Widget NavigationRail em Flutter
Como desenvolvedor de aplicativos Flutter, você precisa se manter atualizado com os novos designs de interface do usuário existentes. Sempre costumo usar novos widgets, animações e designs de interface do usuário para tornar meus aplicativos mais bonitos. Uma dessas ferramentas atraentes foi adicionada ao inventário com a versão estável v1.17 do Flutter, e é um widget NavigationRail.
Neste artigo, discutiremos o widget Navigation Rail no Flutter. Mostraremos um pequeno programa de demonstração para integrar o trilho de navegação em seus aplicativos de flutter.
Conteudo
Widget NavigationRail
O NavigationRail é praticamente comparável ao trabalhar com BottomNavigationBar. Os dois também podem ser usados em par para fazer um encontro consistente entre os dispositivos. Na documentação oficial descrita do Flutter, é um widget de material e pode ser colocado à esquerda ou à direita na tela, e você pode explorar entre um número modesto de telas ou fragmentos diferentes como quiser chamá-los.
Você pode usar NavigationRail e BottomNavigationBar para criar um design de interface do usuário perfeitamente interessante.
Layout da tela
O local do NavigationRail não é pré-caracterizado dispensado a si mesmo em um Scaffold. Ao contrário do AppBar ou do BottomNavigationBar, um trilho de navegação é normalmente utilizado como o primeiro ou o último componente de um widget Row, que caracteriza o corpo do Scaffold.
O conteúdo principal e o trilho são comumente isolados por um divisor vertical. Ele é envolvido por um widget Expanded para ocupar o restante do espaço na tela. A propriedade de elevation do NavigatonRail também pode ser utilizada para o equivalente.
NavigationRailDestination
É uma classe simples; costumava criar navegações tocáveis no NavigationRail. Ele contém os dados para representar essa navegação ou visualização/fragmento de destino. Não é uma classe Widget e, além disso, contém mais três propriedades:
- Icon: O widget Icon geralmente é posicionado e, além disso, pode receber qualquer widget. Deve ser sempre não nulo.
- Selected Icon: É um campo opcional e não obrigatório. Mostraremos um painel como um Selected Icon e date_range como um ícone. Assim, uma espécie de ícone preenchido pode ser colocado aqui.
- Label: Deve ser não nulo. Um campo obrigatório, que deve ser preenchido com um Widget de texto que funciona como título para destino específico e localizado abaixo do ícone. O rótulo pode ser exibido ou oculto utilizando a propriedade label type do
NavigationRail.
Propriedades do NavigationRail
Algumas propriedades do navigationrail são as seguintes:
- OnDestinationSelected: Esta propriedade é chamada quando um dos destinos é escolhido. O widget stateful que faz o trilho de navegação precisa monitorar o registro do NavigationRailDestination escolhido e chamar ‘setState’ para reconstruir o navigationrail com o novo selectedIndex.
- Destinations: Esta propriedade faz um resumo dos objetos NavigationRailDestination. O resumo deve conter pelo menos duas coisas e como BottomNavigationBar para propriedades de coisas.
- GroupAlignment: Esta propriedade usada para definir o alinhamento vertical dos destinos ferroviários. Tomaremos um valor entre -1,0 e 1,0. O valor padrão implícito é -1,0, que define o alinhamento como Superior. O valor de 0,0 o alinha ao Center. O valor de 1,0 alinha os itens rail ao Bottom. Valores arbitrários entre o intervalo também podem ser atribuídos.
- SelectedIconTheme e UnselectedIconTheme: Esta propriedade utilizada, você pode caracterizar a color, opacity, e size dos ícones dos objetos NavigationRailDestination, quando eles são escolhidos e quando eles certamente não são.
- SelectedLabelTextStyle e UnselectedLabelTextStyle: você pode usar essas propriedades para personalizar a aparência e o estilo dos rótulos de texto para estados selecionados/não selecionados ou abaixo de NavigationRailDestintaion.
Você precisa atribuir objetosTextStylea essas propriedades. - Label Type: essa propriedade usa um valor
NavigationRailLabelTypeda classe enum, que oferece três opções.
NavigationRailLabelType.selected NavigationRailLabelType.none NavigationRailLabelType.all
Selected mostrará todos os ícones e apenas o rótulo quando um destino for selecionado. Todos mostrarão rótulos e ícones o tempo todo, selecionados ou não, e nenhum ocultará todos os rótulos em todos os cenários, apenas ícones serão mostrados.
- MinWidth: Esta propriedade caracteriza a largura do NavigationRail. Na verdade, é claro, seus valores padrão são 72; no entanto, você também pode alterar o incentivo para fazer um Rail reduzido.
- SelectedIndex: Esta propriedade caracteriza o arquivo que definirá o NavigationRailDestination atualmente escolhido.
- Leading e Trailing: essas propriedades funcionam da mesma maneira que em outros widgets, como ListTile, AppBar, etc. Elas aceitam qualquer objeto Widget. Portanto, no design abaixo, foi fácil aninhar vários widgets dentro de um Column ou ListView, se necessário, e passá-lo como inicial ou final.
Texto Vertical
Utilizaremos um widget RotatedBox para ajustar a direção vertical do meu widget Text, que pode ser utilizado, inclusive, no método Compact do NavigationRail.
NavigationRailDestination(
icon: SizedBox.shrink(),
label: Padding(
padding: EdgeInsets.symmetric(vertical: 8),
child: RotatedBox(
quarterTurns: -1,
child: Text("Welcome"),
),
),
);
Código Fonte
import 'package:flutter/material.dart';
import 'package:flutter_navigation_rail_demo/details.dart';
class HomeScreen extends StatefulWidget {
HomeScreen({Key key}) : super(key: key);
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
int _selectedIndex = 0;
NavigationRailDestination textDestination(
String text,) {
return NavigationRailDestination(
icon: SizedBox.shrink(),
label: Padding(
padding: EdgeInsets.symmetric(vertical: 8),
child: RotatedBox(
quarterTurns: -1,
child: Text(text),
),
),
);
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Row(
children: <Widget>[
NavigationRail(
minWidth: 55.0,
groupAlignment: 0.0,
backgroundColor: Colors.blueGrey,
selectedIndex: _selectedIndex,
onDestinationSelected: (int index) {
setState(() {
_selectedIndex = index;
});
},
labelType: NavigationRailLabelType.all,
leading: Column(
children: <Widget>[
SizedBox(
height: 8,
),
Center(
child: CircleAvatar(
radius: 22,
backgroundImage: AssetImage("assets/images/man2.jpg"),
),
),
SizedBox(
height: 70,
),
RotatedBox(
quarterTurns: -1,
child: Icon(Icons.dashboard,color: Color(0xffFCCFA8),
),
),
SizedBox(
height: 15,
),
RotatedBox(
quarterTurns: -1,
child: Icon(Icons.date_range),
)
],
),
selectedLabelTextStyle: TextStyle(
color: Colors.orangeAccent,
fontSize: 14,
letterSpacing: 1,
decorationThickness: 2.0,
),
unselectedLabelTextStyle: TextStyle(
fontSize: 13,
letterSpacing: 0.8,
),
destinations: [
textDestination("Trending",),
textDestination("Latest",),
textDestination("Favourites"),
textDestination("All", ),
],
),
Details(_selectedIndex)
],
),
),
);
}
}Você verá um código completo em um GitHub, e este é um pequeno programa de demonstração para integrar com o NavigationRail.
Conclusão
Navigation Rail Widget é um procedimento de design de tendências significativamente. Você pode criar interface do usuário exclusiva com novo conteúdo para os usuários, neste widget, sem usar a barra de aplicativos e a barra de navegação inferior em um andaime. Você pode usar RotatedBox para alinhar rótulos e ícones na direção horizontal ou vertical.
No artigo, expliquei todas as propriedades do Navigation Rail Widget, você pode modificar esse código de acordo com sua escolha, e esta foi uma pequena introdução do Navigation Rail de minha parte e seu funcionamento usando o Flutter.
Espero que este blog forneça a você informações suficientes em Experimentando o Navigation Rail Widget em seus projetos flutter. Este é um programa de demonstração que integrará o Navigation Rail em um flutter, então tente.
❤ ❤ Obrigado por ler este artigo ❤❤
