Material

No catálogo de widgets do Flutter, atualmente conta com quase 40 widgets prontos para uso. Desde um simples botão até widgets para estruturar todo o aplicativo, como o Scaffold.

Navegando pelo catálogo, é possível identificar o que cada widget representa, porém listarei aqui os principais:

MaterialApp: Fornece a estrutura completa para um aplicativo, de acordo com o Material Design. Todas as rotas/navegações são gerenciadas por ele. A estilização (tema / cores / fontes / textos, etc) podem (e devem) ser definidos aqui. A ii18n(internacionalização) do aplicativo também é configurada neste widget. Ele será o widget raiz de um aplicativo.

Scaffold: Para estruturar o layout de uma tela, este é o widget ideal. Neste podemos adicionar barras de navegação (superior e inferior), e na propriedade body, definimos o principal widget da nossa tela.

BottomNavigationBar: Barra de navegação inferior, onde podemos adicionar ícones e textos das nossas telas.

AppBar: Barra superior, onde podemos colocar o título da nossa tela. O Flutter também utiliza este widget para exibir o ícone

Drawer: Menu lateral, que se abre após clicarmos em um ícone na AppBar. Ao adicionarmos um Drawer ao Scaffold e não adicionarmos uma AppBar, o ícone para abrir o Drawer não é exibido.

Veja o código de um aplicativo combinando todos estes widgets:

import 'package:flutter/material.dart';

void main() => runApp(MeuMaterialApp());

class MeuMaterialApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('App Bar'),
        ),
        drawer: const Drawer(),
        body: const Center(
          child: Text('Hello World'),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
              label: 'Settings',
            )
          ],
        ),
      ),
    );
  }
}

Neste vídeo, há uma demonstração de como utilizar os widgets da biblioteca Material para construir um aplicativo com pouco mais de 100 linhas de código.