Flutter - Apresentando Layouts - III

Hoje veremos o conceito de Layouts no Flutter. (baseado na documentação oficial)

O Flutter é um SDK de aplicativo móvel do Google que ajuda a criar aplicativos móveis modernos para iOS e Android usando uma única (quase) base de código.

Se você não conhece o Flutter veja o meu artigo :  Flutter - Primeiros contatos e impressões

Continuando a segunda parte do artigo veremos como criar layouts mais complexos.

Criando layouts complexos

Se você acompanhou as duas primeiras partes deste artigo então já sabe como usar os widgets de layout simples e podemos avançar para um cenário onde vamos criar um layout mais complexo.

Para criar layouts complexos o truque é dividir o layout complexo em layouts simples menores. As linhas e colunas geralmente vão ser muito usadas nesta abordagem.

Como exemplo, vamos usar a imagem abaixo e tentar criar o seu layout no Flutter:

Vamos dividir este layout um pouco mais complexo em layouts menores e mais simples.

Observe que podemos dividir este layout como sendo composto de uma única coluna com três linhas:

linha 1
linha 2
linha 3

Note que na primeira linha e na terceira linha podemos dividir dois itens simples: uma imagem e um texto:

imagem  texto
texto
texto  imagem

Agora que dividimos o layout em layouts mais simples temos informações suficiente para criar o nosso widget de layout complexo. Você pode usar qualquer imagem ou ícone que desejar.

Vamos iniciar esboçando o layout que já sabemos vai conter :

Veja como deve ficar o código do método meuLayoutWidget:

Widget meuLayoutWidget() {
      return Column(
        children: [
          Row(
            children: [
              Icon(Icons.account_circle),
              Text('Macoratti .net'),
            ],
          ),
          Text('Macoratti.net quase tudo para a'),
          Text('plataforma .NET'),
          Row(
            children: [
              Text('SAIBA MAIS'),
              Icon(Icons.arrow_forward),
            ],
          ),
        ],
      );
    }

 

Nada mal, mas precisamos melhorar o layout incluindo preenchimento(padding), alinhamento(align) e cor (color).

Precisamos envolver todo o nosso conteúdo em um quadro com a cor roxa. Para isso vamos usar um Container, com bordas e com a cor purple.

Clique no widget Column e selecione o ícone da opção do menu de atalho selecionando : Wrap with Container:

A seguir defina as propriedades do Container conforme o código abaixo:

Widget meuLayoutWidget() {
      return Container(
        margin: EdgeInsets.all(16.0),
        padding: EdgeInsets.all(16.0),
        decoration: BoxDecoration(
          color: Colors.purple[800],
          border: Border.all(),
          borderRadius: BorderRadius.all(Radius.circular(3.0)),
        ),
        child: Column(
          children: [
            Row(
              children: [
                Icon(Icons.account_circle),
                Text('Macoratti .net'),
              ],
            ),
            Text('Macoratti.net quase tudo para a'),
            Text('plataforma .NET'),
            Row(
              children: [
                Text('SAIBA MAIS'),
                Icon(Icons.arrow_forward),
              ],
            ),
          ],
        ),
      );
    }

 

Agora vamos definir a altura da coluna para que ela se ajuste ao seu conteúdo.

Fazemos isso definindo seguinte propriedade para a coluna :  mainAxisSize: MainAxisSize.min

Widget meuLayoutWidget() {
      return Container(
        margin: EdgeInsets.all(16.0),
        padding: EdgeInsets.all(16.0),
        decoration: BoxDecoration(
          color: Colors.purple[800],
          border: Border.all(),
          borderRadius: BorderRadius.all(Radius.circular(3.0)),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              children: [
                Icon(Icons.account_circle),
                Text('Macoratti .net'),
              ],
            ),
            Text('Macoratti.net quase tudo para a'),
            Text('plataforma .NET'),
            Row(
              children: [
                Text('SAIBA MAIS'),
                Icon(Icons.arrow_forward),
              ],
            ),
          ],
        ),
      );
    }

 

A seguir vamos incluir um preenchimento(padding) no ícone da primeira Row. Para selecione Icon e clique na  opção do menu de atalho selecionando :  Add Padding

Vamos também alterar do ícone para amarelho e a cor do texto desta linha para branco conforme o código abaixo:

Widget meuLayoutWidget() {
      return Container(
        margin: EdgeInsets.all(16.0),
        padding: EdgeInsets.all(16.0),
        decoration: BoxDecoration(
          color: Colors.purple[800],
          border: Border.all(),
          borderRadius: BorderRadius.all(Radius.circular(3.0)),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Icon(Icons.account_circle,
                                  color: Colors.yellow,
                ),
                Text('Macoratti .net', style: 
                 TextStyle(color: Colors.white)),
              ],
            ),
            Text('Macoratti.net quase tudo para a'),
            Text('plataforma .NET'),
            Row(
              children: [
                Text('SAIBA MAIS'),
                Icon(Icons.arrow_forward),
              ],
            ),
          ],
        ),
      );
    }

 

Agora basta repetir o procedimento para a segunda e para a terceira linha:

Widget meuLayoutWidget() {
      return Container(
        margin: EdgeInsets.all(16.0),
        padding: EdgeInsets.all(16.0),
        decoration: BoxDecoration(
          color: Colors.purple[800],
          border: Border.all(),
          borderRadius: BorderRadius.all(Radius.circular(3.0)),
        ),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Row(
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Icon(Icons.account_circle,
                  color: Colors.yellow,),
                ),
                Text('Macoratti .net', 
                       style: TextStyle(color: Colors.white)),
              ],
            ),
          // segunda linha
            Padding(
              padding: EdgeInsets.symmetric(
                vertical: 16.0,
                horizontal: 0,
              ),
              child: Text('Macoratti .net quase tudo para a 
                                 plataforma .NET.',
                style: TextStyle(
                  color: Colors.white,
                ),
              ),
            ),
            // terceira linha
            Row(
              children: [
                Text('SAIBA MAIS',
                  style: TextStyle(
                    color: Colors.yellow,
                  ),
                ),
                Padding(
                  padding: EdgeInsets.only(left: 8.0),
                  child: Icon(Icons.arrow_forward,
                    color: Colors.green,
                  ),
                ),
              ],
            ),
          ],
        ),
      );
    }

 

Nossa !!! olha esse código, e, esse layout nem é tão complexo assim...(imagine um layout muiiito complexo !!!)

Mas olhando o resultado final na figura acima podemos dizer que embora não esteja perfeito até que não esta nada mal para a criação do primeiro layout mais complexo.

Agora, na próxima parte do artigo, vamos tratar e deixar o nosso código mais legível.

(disse Jesus)"Aquele que tem os meus mandamentos e os guarda esse é o que me ama; e aquele que me ama será amado de meu Pai, e eu o amarei, e me manifestarei a ele."
João 14:21

Veja os Destaques e novidades do SUPER DVD Visual Basic (sempre atualizado) : clique e confira !

Quer migrar para o VB .NET ?

Quer aprender C# ??

Quer aprender os conceitos da Programação Orientada a objetos ?

Quer aprender o gerar relatórios com o ReportViewer no VS 2013 ?

Referências:

José Carlos Macoratti