A barra de aplicativos é um dos componentes mais usados em todos os tipos de aplicativos. Ele pode ser usado para hospedar um campo de pesquisa, botões para navegar entre as páginas ou simplesmente o título da página. Por ser um componente muito usado, o Flutter fornece um widget dedicado para essa funcionalidade chamado AppBar .
Neste tutorial, mostraremos como personalizar a AppBar em um aplicativo Flutter, percorrendo alguns exemplos práticos.
Aqui está o que vamos cobrir:
O que é AppBar no Flutter?
Flutter AppBar é um componente de aplicativo desenvolvido de acordo com as diretrizes do Material Design . Geralmente é colocado na parte superior da tela e tem a capacidade de conter outros widgets em seu layout. A AppBar geralmente exibe informações de marca, como logotipos e títulos, e geralmente contém botões ou outros pontos de interação do usuário.
Esta é a aparência do AppBar padrão no Flutter:
//Principalmente, AppBar é usado dentro de um widget Scaffold. Andaime( appBar: AppBar (), ),
Muito em branco, certo? Vamos personalizá-lo ao nosso gosto.
Layout AppBar
No Flutter, o layout do AppBar compreende principalmente três componentes: principal , título e ações . à esquerda é colocado na posição mais à esquerda da AppBar; title e actions aparecem à sua direita.
lider
principal inclui um widget e pode ser atribuído a qualquer coisa-texto, um ícone ou até mesmo vários widgets em uma linha.
AppBar ( à esquerda: Ícone (Icons.account_circle_rounded), ),
Você pode controlar a largura que o entrelinha pode ter:
AppBar ( à esquerda: Ícone (Icons.account_circle_rounded), LeadWidth: 100,//o padrão é 56 ),
Se principal não for fornecido, o AppBar indicará isso para nós automaticamente. Os exemplos incluem uma seta de navegação para voltar à página anterior ou um ícone de menu para abrir a gaveta.
A seta de navegação aparece automaticamente quando uma rota anterior está disponível.
class HomePage extends StatelessWidget { @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( corpo: Centro ( filho: TextButton ( filho: Texto ('Push'), onPressed: ()=> Navigator.push (context, MaterialPageRoute ( construtor: (contexto) { return SecondPage (); }, )), ), ), ); }
} class SecondPage extends StatelessWidget { @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( appBar: AppBar (), ); }
}
Quando adicionamos uma Drawer ao Scaffold , um ícone de menu é atribuído a principal para abrir a gaveta.
class HomePage extends StatelessWidget { @sobrepor Construção de widget (contexto BuildContext) { return Scaffold ( appBar: AppBar (), gaveta: gaveta (), ); }
}
Se desejar, esse comportamento pode ser evitado tornando automaticallyImplyLeading falso.
AppBar ( automaticImplyLeading: false,//simples assim! ),
title
Como o nome sugere, ele é usado principalmente para mostrar títulos, como o título do aplicativo ou o cabeçalho da página.
AppBar ( título: Texto ('Página de perfil'),
),
Mas você não está limitado a isso, já que title também aceita um widget. Você pode usá-lo para mostrar ícones, imagens, formas ou qualquer combinação deles usando widgets de layout, como linha e coluna .
Aqui está um exemplo:
AppBar ( título: Container ( largura: 40, filho: Image.network (url), ), ),
Por padrão, title é alinhado à esquerda de AppBar, de acordo com as diretrizes do Material. Você pode alterar isso para alinhá-lo no centro:
AppBar ( título: Container ( largura: 40, filho: Image.network (url), ), centerTitle: true,//assim! ),
actions
ações é uma lista de widgets alinhados à direita do AppBar. Normalmente os vemos em aplicativos usados como botões para acionar menus suspensos, avatares de perfil etc.
AppBar ( ações: [ Ícone (Icons.more_vert), ], ),
Vamos adicionar mais um widget à lista:
AppBar ( ações: [ Recipiente( largura: 30, filho: Image.asset ( 'assets/images/profile_pic.png', ), ), Ícone (Icons.more_vert), ], ),
Personalização da AppBar no Flutter
Agora que estamos familiarizados com o layout do AppBar, vamos levar a personalização para o próximo nível, brincando com as opções de tema. AppBar contém todos os tipos de propriedades, incluindo cores, tamanhos, temas de ícones, temas de texto e muito mais.
Cor de fundo
O código a seguir altera a cor de fundo do AppBar para laranja profundo. 500 é adicionado para acessar um tom específico da cor, 900 sendo o mais escuro e 50 sendo o mais claro.
AppBar ( backgroundColor: Colors.deepOrange [500], ),
Tema do ícone
O código abaixo muda a cor do ícone para verde e o tamanho para 36 :
AppBar ( actionsIconTheme: IconThemeData (color: Colors.green, size: 36), ),
Tema do texto
Digamos que você queira alterar a cor do texto para âmbar com um tom mais claro de 200 e definir o tamanho da fonte para 24 :
AppBar ( textTheme: TextTheme ( headline6: TextStyle (//headline6 é usado para definir o tema do título cor: Colors.amber [200], fontSize: 24, ), ), ),
Elevação
Se quiser dar um pequeno impulso ao AppBar, você pode usar elevation . O código a seguir aumenta a elevação do AppBar para 15 .
AppBar ( elevação: 15, ),
Observe que AppBar é levantado e a sombra se espalha por uma área maior.
Cor da sombra
Você pode até alterar a cor da sombra projetada. O código abaixo muda a cor da sombra do AppBar para o``range``A``ccent .
AppBar ( shadowColor: Colors.orangeAccent, ),
Muito legal, certo?
Altura e opacidade da barra de ferramentas
Finalmente, temos as propriedades da barra de ferramentas. A barra de ferramentas contém texto, ícones, botões e qualquer coisa que esteja em primeiro plano, exceto widgets como Container e Image .
Para alterar a altura e opacidade dos itens da barra de ferramentas AppBar:
AppBar ( toolbarHeight: 100,//o padrão é 56 toolbarOpacity: 0,5, ),
Conclusão
Se você chegou até aqui, agora deve entender:
- O que é AppBar e como é usado no Flutter
- Layout do AppBar (
principal,títuloeações) - Como personalizar o layout do AppBar e adicionar widgets
- Como criar um tema para os ícones, texto, fundo, elevação, cor da sombra e barra de ferramentas da AppBar
Então, aqui está! Um passo a passo completo sobre tudo o que o AppBar do Flutter tem a oferecer. Espero que este artigo ajude você a criar belas AppBars em todos os seus futuros aplicativos Flutter.
A postagem Tutorial do Flutter AppBar apareceu primeiro em LogRocket Blog .
