Usando Componentes Materiais
O Flutter fornece vários widgets que ajudam você a criar aplicativos que seguem o Material Design. Um aplicativo Material é iniciado com o widget MaterialApp, que cria vários widgets úteis na raiz do aplicativo, incluindo um Navegador, que gerencia uma pilha de widgets identificados por sequências de caracteres, também conhecidos como “rotas”. O Navegador permite fazer a transição sem problemas entre as telas do seu aplicativo. Usar o widget MaterialApp é inteiramente opcional, mas é uma boa prática.
content_copy
pacote de importação: flutter / material.dart ‘;
void main ()
runApp (MaterialApp (
título: ‘Flutter Tutorial’,
home: TutorialHome (),
));
class TutorialHome estende o StatelessWidget
@sobrepor
Construção de Widget (contexto BuildContext)
// Scaffold é um layout para os principais componentes de material.
Andaime de retorno (
appBar: AppBar (
levando: IconButton (
ícone: Ícone (Icons.menu),
Sugestão: ‘menu de navegação’,
onPressed: null,
)
title: Text (‘título do exemplo’),
ações: MENOR Widget MAIOR [
IconButton (
ícone: Ícone (Icons.search),
dica de ferramenta: “Pesquisar”
onPressed: null,
)
]
)
// body é a maior parte da tela.
corpo: Centro (
criança: Texto (‘Olá, mundo!’),
)
floatingActionButton: FloatingActionButton (
dica de ferramenta: ‘Adicionar’, // usada pelas tecnologias de assistência
criança: Icon (Icons.add),
onPressed: null,
)
);
Agora que o código mudou de MyAppBar e MyScaffold para os widgets AppBar e Scaffold, e de material.dart, o aplicativo está começando a examinar um pouco mais o Material. Por exemplo, a barra de aplicativos tem uma sombra e o texto do título herda o estilo correto automaticamente. Um botão de ação flutuante também é adicionado.
Observe que os widgets são passados como argumentos para outros widgets. O widget Scaffold usa vários widgets diferentes como argumentos nomeados, cada um dos quais é colocado no layout Scaffold no local apropriado. Da mesma forma, o widget AppBar nos permite passar widgets para o líder e as ações do widget de título. Esse padrão se repete em toda a estrutura e é algo que você pode considerar ao projetar seus próprios widgets.
Para mais informações, consulte Componentes do material.