Padding

O widget Padding insere espaço ao redor de seu filho. A classe EdgeInsets oferece métodos convenientes para definir preenchimento em diferentes direções.

Padding(
  preenchimento: EdgeInsets.symetric(horizontal: 20.0, vertical: 10.0),
  filho: Text('Conteúdo com preenchimento'),
)

ConstrainedBox e SizedBox

ConstrainedBox aplica restrições adicionais ao widget filho. Por exemplo, para criar um contêiner vermelho com largura máxima e altura mínima de 50 pixels:

ConstrainedBox(
  restricoes: BoxConstraints.expand(largura: 100.0, altura: 50.0),
  filho: Container(
    altura: 5.0,
    filho: CaixaVermelha(),
  ),
)

SizedBox especifica dimensões fixas para o widget filho:

SizedBox(
  largura: 80.0,
  altura: 80.0,
  filho: CaixaVermelha(),
)

DecoratedBox

DecoratedBox desenha uma decoração antes ou depois de seu widget filho, como fundo, borda ou gradiente. A classe BoxDecoration implementa elementos de decoração comuns.

DecoratedBox(
  decoracao: BoxDecoration(
    cor: Colors.azul,
    borda: Border.all(largura: 2.0, cor: Colors.cinza),
    borderRadius: BorderRadius.circular(8.0),
  ),
  posicao: DecorationPosition.fundo,
  filho: Text('Com decoração'),
)

Transform

O widget Transform aplica transformações de matriz ao widget filho. Por exemplo, uma rotação:

Container(
  cor: Colors.preto,
  filho: Transform(
    alinhamento: Alignment.direitaCentro,
    transformacao: Matrix4.rotationZ(0.3),
    filho: Container(
      preenchimento: EdgeInsets.all(8.0),
      cor: Colors.laranja,
      filho: Text('Transformado'),
    ),
  ),
)

Container

Container combina widgets como DecoratedBox, ConstrainedBox, Transform, Padding e Align para cenários complexos. Exemplo com múltiplas configurações:

Container(
  margem: EdgeInsets.only(top: 50.0, esquerda: 120.0),
  restricoes: BoxConstraints.tightFor(largura: 200.0, altura: 150.0),
  decoracao: BoxDecoration(
    gradiente: RadialGradient(
      cores: [Colors.vermelho, Colors.laranja],
      centro: Alignment.topLeft,
      raio: 0.98,
    ),
    sombras: [
      BoxShadow(
        cor: Colors.preto54,
        offset: Offset(2.0, 2.0),
        desfoque: 4.0,
      ),
    ],
  ),
  transformacao: Matrix4.rotationZ(0.2),
  alinhamento: Alignment.centro,
  filho: Text(
    '5.20',
    estilo: TextStyle(cor: Colors.branco, tamanhoFonte: 40.0),
  ),
)

Scaffold, TabBar e Navegação Inferior

A biblioteca Material fornece widgets para estruturar páginas. Scaffold atua como esqueleto de uma rota, facilitando a composição de interfaces com barra de navegação, menus e navegação inferior.

Exemplo de página com barra de navegação, menu de gaveta, navegação inferior e botão de ação flutuante:

class RotaScaffold extends StatefulWidget {
  @override
  _RotaScaffoldState createState() => _RotaScaffoldState();
}

class _RotaScaffoldState extends State<rotascaffold> {
  int _indiceSelecionado = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        titulo: Text('Nome do Aplicativo'),
        acoes: <widget>[
          IconButton(icon: Icon(Icons.share), onPressed: () {}),
        ],
      ),
      drawer: MeuMenu(),
      bottomNavigationBar: BottomNavigationBar(
        itens: <bottomnavigationbaritem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), titulo: Text('Início')),
          BottomNavigationBarItem(icon: Icon(Icons.business), titulo: Text('Negócios')),
          BottomNavigationBarItem(icon: Icon(Icons.school), titulo: Text('Escola')),
        ],
        indiceAtual: _indiceSelecionado,
        corFixa: Colors.azul,
        aoPressionar: _aoPressionarItem,
      ),
      floatingActionButton: FloatingActionButton(
        filho: Icon(Icons.adicionar),
        onPressed: _aoAdicionar,
      ),
    );
  }

  void _aoPressionarItem(int indice) {
    setState(() {
      _indiceSelecionado = indice;
    });
  }

  void _aoAdicionar() {}
}
</bottomnavigationbaritem></widget></rotascaffold>

AppBar

AppBar é uma barra de navegação Material com título, menus e abas. Exemplo com TabBar no rodapé:

TabController _controladorAbas;
List<string> abas = ['Notícias', 'História', 'Imagens'];

@override
void initState() {
  super.initState();
  _controladorAbas = TabController(comprimento: abas.length, sincronizador: this);
}

AppBar(
  titulo: Text('Título'),
  rodape: TabBar(
    controlador: _controladorAbas,
    abas: abas.map((aba) => Aba(texto: aba)).toList(),
  ),
)
</string>

TabBarView

TabBarView sincroniza com TabBar para exibir conteúdo das abas. Exemplo:

Scaffold(
  appBar: AppBar(
    rodape: TabBar(
      controlador: _controladorAbas,
      abas: abas.map((aba) => Aba(texto: aba)).toList(),
    ),
  ),
  corpo: TabBarView(
    controlador: _controladorAbas,
    filhos: abas.map((aba) {
      return Container(
        alinhamento: Alignment.centro,
        filho: Text(aba, fatorEscalaTexto: 5),
      );
    }).toList(),
  ),
)

Drawer

Drawer representa um menu lateral. Exemplo de implementação:

class MeuMenu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      filho: MediaQuery.removePadding(
        context: context,
        removerTopo: true,
        filho: Coluna(
          crossAxisAlignment: CrossAxisAlignment.inicio,
          filhos: <widget>[
            Padding(
              preenchimento: EdgeInsets.only(top: 38.0),
              filho: Fileira(
                filhos: <widget>[
                  Padding(
                    preenchimento: EdgeInsets.symmetric(horizontal: 16.0),
                    filho: ClipOval(
                      filho: Image.asset('imgs/avatar.png', largura: 80),
                    ),
                  ),
                  Text('Usuário', estilo: TextStyle(pesoFonte: FontWeight.bold)),
                ],
              ),
            ),
            Expandido(
              filho: ListView(
                filhos: <widget>[
                  ListTile(
                    lider: Icon(Icons.adicionar),
                    titulo: Text('Adicionar conta'),
                  ),
                  ListTile(
                    lider: Icon(Icons.configuracoes),
                    titulo: Text('Gerenciar contas'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}
</widget></widget></widget>

FloatingActionButton

FloatingActionButton é um botão Material que flutua na interface para ações comuns.

Navegação Enferior

BottomAppBar permite criar uma barra de navegação inferior com efeito de recorte. Exemplo:

bottomNavigationBar: BottomAppBar(
  cor: Colors.branco,
  forma: CircularNotchedRectangle(),
  filho: Fileira(
    filhos: [
      IconButton(icon: Icon(Icons.home)),
      SizedBox(),
      IconButton(icon: Icon(Icons.business)),
    ],
    mainAxisAlignment: MainAxisAlignment.spaceAround,
  ),
)

O local do recorte depende da posição do FloatingActionButton, como:

floatingActionButtonLocation: FloatingActionButtonLocation.centralDocked,