Layouts

O Flutter oferece uma variedade de widgets de layout que permitem organizar e posicionar os elementos da interface do usuário de maneira eficaz. Aqui estão alguns dos widgets de layout mais comuns e úteis disponíveis no Flutter:

Widgets de Layout Simples:

1. Container:

   • Um contêiner retangular que pode conter outros widgets. Ele pode ser estilizado com margens, preenchimento, bordas e muito mais.

   Container(
     margin: EdgeInsets.all(16.0),
     padding: EdgeInsets.all(16.0),
     decoration: BoxDecoration(
       color: Colors.blue,
       borderRadius: BorderRadius.circular(8.0),
     ),
     child: Text('Conteúdo do Contêiner'),
   )
   

2. Row e Column:

   • Organizam widgets horizontalmente (Row) ou verticalmente (Column). Você pode definir alinhamentos, espaçamentos e distribuição de espaço entre os widgets filhos.

   Row(
     mainAxisAlignment: MainAxisAlignment.spaceAround,
     children: <Widget>[
       Text('Widget 1'),
       Text('Widget 2'),
     ],
   )
   
   Column(
     crossAxisAlignment: CrossAxisAlignment.start,
     children: <Widget>[
       Text('Linha 1'),
       Text('Linha 2'),
     ],
   )
   

Widgets de Layout Flexível:

1. Expanded:

   • Um widget que preenche o espaço disponível em um Row, Column ou Flex.

   Row(
     children: <Widget>[
       Expanded(child: Text('Widget 1')),
       Expanded(child: Text('Widget 2')),
     ],
   )
   

2. Flexible:

   • Um widget que pode ser flexível em um Flex. Permite especificar uma proporção de espaço para cada widget filho.

   Flex(
     direction: Axis.horizontal,
     children: <Widget>[
       Flexible(
         flex: 2,
         child: Text('Widget 1'),
       ),
       Flexible(
         flex: 1,
         child: Text('Widget 2'),
       ),
     ],
   )
   

Scrollable Layouts:

1. ListView:

   • Um widget que exibe uma lista de widgets de maneira rolável.

   ListView(
     children: <Widget>[
       ListTile(title: Text('Item 1')),
       ListTile(title: Text('Item 2')),
       // ...
     ],
   )
   

2. GridView:

   • Um widget que exibe widgets em uma grade de maneira rolável.

   GridView.count(
     crossAxisCount: 2,
     children: <Widget>[
       GridTile(child: Text('Item 1')),
       GridTile(child: Text('Item 2')),
       // ...
     ],
   )
   

Widgets de Layout Avançados:

1. Stack:

   • Empilha widgets uns sobre os outros. Útil para sobreposição de elementos na tela.

   Stack(
     children: <Widget>[
       Positioned(
         top: 10.0,
         left: 10.0,
         child: Text('Posicionado no Topo à Esquerda'),
       ),
       Positioned(
         bottom: 10.0,
         right: 10.0,
         child: Text('Posicionado na Parte Inferior à Direita'),
       ),
     ],
   )
   

2. Wrap:

   • Organiza widgets em várias linhas ou colunas, dependendo do espaço disponível.

   Wrap(
     spacing: 8.0,
     runSpacing: 4.0,
     children: <Widget>[
       Chip(label: Text('Tag 1')),
       Chip(label: Text('Tag 2')),
       // ...
     ],
   )
   

Esses são apenas alguns exemplos de como os widgets de layout podem ser usados no Flutter. A combinação e personalização destes widgets permite criar interfaces do usuário complexas e responsivas. Ao experimentar e combinar esses widgets, você pode criar layouts personalizados que atendam às necessidades específicas do seu aplicativo.