097 – USANDO COMPONENTES DA MATERIAL – Curso de Flutter Grátis

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.