Flutter - Apresentando Layouts - IV

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 terceira parte do artigo vamos tratar de deixar o nosso código mais legível.

Tornando o código do layout mais legível

No nosso código temos uma grande quantidade de indentação usada, e, isso torna o código difícil de ler.

Imagine se nosso layout tivesse mais linhas e mais colunas ???

Nota: Você pode visualizar a árvore de widgets de qualquer projeto usando a ferramenta Flutter Inspector. Isso ajuda um pouco o entendimento.

A solução para tornar o código mais legível é dividir os blocos de código grandes em partes menores.

Vejamos como podemos fazer isso...

1- Quebrar as seções de código de widgets maiores como variáveis

Uma abordagem que podemos usar é quebrar as seções ou bloco de código maiores em variáveis.

Para o nosso exemplo veja abaixo como podemos melhorar a leitura do código extraindo linhas dos widgets maiores em variáveis:

Widget meuLayoutWidget() {
      Widget primeiraRow = Row(
        ...
      );

      Widget segundaRow = Row {...};
      Widget terceiraRow = ...
      return Container(
        ...
        child: Column(
          children: [
            primeiraRow,
            segundaRow,
            terceiraRow,
          ],
        ),
      );
    }

No Visual Studio Code podemos selecionar a seção, no nosso exemplo uma Row, e,  usar a opção do menu de atalho selecionando : Extract local variable

2- Quebrar as seções de código de widgets maiores como funçoes

Esta abordagem é praticamente igual à anterior, exceto que usamos funções ao invés de variáveis.

Foi assim que configuramos o código no início do artigo usando a função meuLayoutWidget().

Para o nosso exemplo veja como fica essa abordagem:

Widget meuLayoutWidget() {
      Widget primeiraRow() {
        ...
      }

      Widget segundaRow()  {... }
      Widget terceiraRow() { ...}
      return Container(
        ...
        child: Column(
          children: [
            primeiraRow(),
            segundaRow(),
            terceiraRow(),
          ],
        ),
      );
    }

No Visual Studio Code podemos selecionar a seção de código, e,  usar a opção do menu de atalho selecionando : Extract Method

3- Quebrar as seções de código de widgets maiores como widgets customizados

Nesta abordagem extraímos o código de um widget maior para um widgete customizado menor.

No Visual Studio Code podemos selecionar a seção de código, e,  usar a opção do menu de atalho selecionando : Extract Widget

Ferramentas

Além disso podemos usar alguns recursos do Flutter como a ferramenta

  1. Flutter Inspector - exibe a árvore de widgets;
  2. Renderização Visual -  faz a renderização visual do layout usado;

Para a segunda opção, no Visual Studio Code tecle CTRL+SHIFT+P e selecione a opção : Toggle Debug Painting

Essa opção ativa linhas azuis no emulador permitindo que você visualize as partes do seu layout.

Veja na figura a seguir o resultado para a exibição do nosso layout:

Temos assim uma apanhado geral sobre o conceito de layouts no Flutter, como podemos usar e como podemos otimizar o código gerado.

Na próxima parte do artigo veremos como tratar a entrada do usuário.

"Grandes são as obras do Senhor, procuradas por todos os que nelas tomam prazer."
Salmos 111:2

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