Playlist: Curso Grátis de FLUTTER e DART Completo
Widgets Básicos
O Flutter vem com um conjunto de widgets básicos poderosos, dos quais os seguintes são muito usados:
Texto: O widget Texto permite criar uma execução de texto com estilo em seu aplicativo.
Linha, coluna: Esses widgets flex permitem criar layouts flexíveis nas direções horizontal (Linha) e vertical (Coluna). Seu design é baseado no modelo de layout flexbox da web.
Stack: Em vez de ser linearmente orientado (horizontal ou verticalmente), um widget Stack permite empilhar widgets uns sobre os outros em ordem de pintura. Você pode então usar o widget Posicionado nos filhos de uma Pilha para posicioná-los em relação à borda superior, direita, inferior ou esquerda da pilha. As pilhas são baseadas no modelo de layout de posicionamento absoluto da web.
Container: o widget Container permite criar um elemento visual retangular. Um contêiner pode ser decorado com um BoxDecoration, como um plano de fundo, uma borda ou uma sombra. Um contêiner também pode ter margens, preenchimento e restrições aplicadas ao seu tamanho. Além disso, um Container pode ser transformado em espaço tridimensional usando uma matriz.
Abaixo estão alguns widgets simples que combinam esses e outros widgets:
content_copy
pacote de importação: flutter / material.dart ‘;
classe MyAppBar estende o StatelessWidget
MyAppBar (this.title);
// Os campos em uma subclasse de widget estão sempre marcados como “final”.
título final do Widget;
@sobrepor
Construção de Widget (contexto BuildContext)
retorno recipiente (
altura: 56,0, // em pixels lógicos
preenchimento: const EdgeInsets.symmetric (horizontal: 8.0), MAIOR
decoração: BoxDecoration (color: Colors.blue [500]),
// Row é um layout linear e horizontal.
criança: Row (
// MENOR Widget MAIOR é o tipo de itens na lista.
children: MENOR Widget MAIOR [
IconButton (
ícone: Ícone (Icons.menu),
Sugestão: ‘menu de navegação’,
onPressed: null, // null desabilita o botão
)
// Expanded expande seu filho para preencher o espaço disponível.
Expandido (
criança: título,
)
IconButton (
ícone: Ícone (Icons.search),
dica de ferramenta: “Pesquisar”
onPressed: null,
)
]
)
);
classe MyScaffold estende o StatelessWidget
@sobrepor
Construção de Widget (contexto BuildContext)
// Material é um pedaço de papel conceitual no qual a interface do usuário é exibida.
Material de retorno (
// Coluna é um layout linear e vertical.
criança: Coluna (
children: MENOR Widget MAIOR [
MyAppBar (
título: Texto (
‘Título do exemplo’,
estilo: Theme.of (contexto) .primaryTextTheme.title,
)
)
Expandido (
criança: Center (
criança: Texto (‘Olá, mundo!’),
)
)
]
)
);
void main ()
runApp (MaterialApp (
title: ‘My app’, // usado pelo alternador de tarefas do sistema operacional
home: MyScaffold (),
));
Certifique-se de ter uma design de uses-material-design: true na seção de flutter do seu arquivo pubspec.yaml. Ele permite que você use o conjunto predefinido de ícones de material.
content_copy
nome: my_app
flutter:
usa-material-design: true
Muitos widgets de Material Design precisam estar dentro de um MaterialApp para exibir corretamente, a fim de herdar os dados do tema. Portanto, execute o aplicativo com um MaterialApp.
O widget MyAppBar cria um Container com uma altura de 56 pixels independentes de dispositivo com um preenchimento interno de 8 pixels, ambos à esquerda e à direita. Dentro do contêiner, MyAppBar usa um layout de linha para organizar seus filhos. O filho do meio, o widget de título, é marcado como Expandido, o que significa que ele se expande para preencher qualquer espaço disponível restante que não tenha sido consumido pelas outras crianças. Você pode ter vários filhos Expandidos e determinar a proporção em que eles consomem o espaço disponível usando o argumento flex para Expandido.
O widget MyScaffold organiza seus filhos em uma coluna vertical. No topo da coluna, coloca uma instância de MyAppBar, passando a barra de aplicativos um widget de texto para usar como título. Passar widgets como argumentos para outros widgets é uma técnica poderosa que permite criar widgets genéricos que podem ser reutilizados de várias maneiras. Finalmente, o MyScaffold usa um Expanded para preencher o espaço restante com seu corpo, que consiste em uma mensagem centralizada.
Para mais informações, consulte Layouts.