Flutter - Apresentando Layouts - II

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

Assista também às aulas:

Continuando a primeira parte do artigo veremos os layouts básicos usando múltiplos filhos.

Widgets de layout básico (multiple children)

Até gora vimos widgets que usam apenas um filho (child).

Ao criar um layout, no entanto, geralmente é necessário organizar vários widgets juntos. Vamos ver como fazer isso usando rows(linhas), columns(colunas) e stacks (pilhas).

Rows e Columns

Para criar uma linha ou coluna no Flutter, você adiciona uma lista de widgets filhos a um widget Row ou Column.

Row Column

Os widgets Column e Row possuem as mesmas propriedades que atuam na respectiva orientação.

Por sua vez, cada filho(child) pode ser uma linha ou coluna, e assim por diante.

Para usar Row basta passar uma lista de widgets para o parâmetro children de Row :

Widget meuLayoutWidget() {
      return Row(
        children: [
          Icon(Icons.home),
          Icon(Icons.access_time),
          Icon(Icons.account_balance),
          Icon(Icons.add_a_photo),
        ],
      );
    }

Para usar Column você faz a mesma coisa usando o parâmetro children de Column:

Widget meuLayoutWidget() {
      return Column(
        children: [
          Icon(Icons.home),
          Icon(Icons.access_time),
          Icon(Icons.account_balance),
          Icon(Icons.add_a_photo),
        ],
      );
    }

 iremos obter o resultado abaixo:

E se você quiser que o conteúdo da linha ou coluna seja uniformemente espaçado na tela ?

Simples, basta envolver (wrap) cada child com um widget Expanded.

Você pode fazer isso digitando ou usar a opção do menu de atalho selecionando : Wrap with new widget, e a seguir digitando o widget Expanded:

Fazendo isso para cada child teremos:

Widget meuLayoutWidget() {
      return Row(
        children: [
          Expanded(child: Icon(Icons.home)),
          Expanded(child: Icon(Icons.access_time)),
          Expanded(child: Icon(Icons.account_balance)),
          Expanded(child: Icon(Icons.add_a_photo)),
        ],
      );
    }

Podemos usar o parâmetro flex com o widget Expanded para dar pesos de tamanho aos filhos. 

Widget meuLayoutWidget() {
      return Row(
        children: [
          Expanded(flex: 2, child: Icon(Icons.home)),
          Expanded(flex: 2, child: Icon(Icons.access_time)),
          Expanded(flex: 5, child: Icon(Icons.account_balance)),
          Expanded(flex: 1, child: Icon(Icons.add_a_photo)),
        ],
      );
    }

Para você visualizar melhor como o flex atua, vamos definir uma linha (Row) contendo dois contêineres que vamos colorir. O primeiro vai ocupar 70% da linha e o segundo 30%.

Veja como fica o código usando a widget Expanded e seu parâmetro flex:

Widget meuLayoutWidget() {
     return Row(
        children: [
          Expanded(
            flex: 7,
            child: Container(
              color: Colors.green,
            ),
          ),
          Expanded(
            flex: 3,
            child: Container(
              color: Colors.yellow,
            ),
          ),
        ],
      );
    }

Mas e se você tiver apenas uma única view e deseja que ela ocupe somente uma fração do tamanho de seu pai ?

Neste caso você poderia usar a widget FractionallySizedBox para especificar uma porcentagem do espaço disponível a ser preenchido.

No exemplo a seguir temo apenas um contêiner vermelho que é definido para preencher 70% da largura disponível e 30% da altura disponível.

Widget meuLayoutWidget() {
     return FractionallySizedBox(
      widthFactor: 0.7,
      heightFactor: 0.3,
        child: Container(
          color: Colors.red,
    ),
  );
}

 

Stack

O widget Stack permite sobrepor vários widgets uns sobre os outros, e, mostra seus filhos como uma pilha de itens. Isso não só permite desenhos personalizados, mas também algumas animações muito legais.

Esse widget é muito útil se você quiser sobrepor vários filhos de uma forma simples, por exemplo, ter algum texto e uma imagem, sobreposta com um gradiente e um botão anexado ao fundo.

Existem dois tipos principais de Stacks:  Stack e IndexedStack.

Abaixo um exemplo de uso da widget Stack onde estamos empilhando 3 contâineres sobrepondo-os:

Widget meuLayoutWidget() {
     return Stack(
      children: <Widget>[
        Container(
          width: 300,
          height: 300,
          color: Colors.red,
        ),
        Container(
          width: 100,
          height: 100,
          color: Colors.green,
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.blue,
        ),
      ],
  )
}

Aqui podemos alinhar e posicionar cada um dos widgets usados na pilha (Stack) usando o widget Align ou Positioned.

Widget meuLayoutWidget() {
     return Stack(
      children: <Widget>[
        Container(
          width: 300,
          height: 300,
          color: Colors.red,
        ),
        Align( 
               alignment: Alignment.topRight,
               child: Container(
            width: 100,
            height: 100,
            color: Colors.green,
          ),
        ),
        Positioned(
          right: 40.0,
          top: 40.0,
          child: Container(
            width: 50,
            height: 50,
            color: Colors.blue,
          ),
        ),
      ],
  )
}

Um cenário muito comum é usar um widget Stack para escrever texto em uma imagem.

Vamos supor que temos uma imagem abaixo que esta no endereço: https://pbs.twimg.com/media/D4FT8OZW4AAcmGc.jpg

E desejamos escrever o texto : 'Foto de um buraco negro' nesta imagem.

Para isso bastar usar um Stack com dois filhos: Image e Text:

Widget meuLayoutWidget() {
      return Stack(
        children: <Widget> [
          // primeiro filho na pilha
          Image.network(
         'https://pbs.twimg.com/media/D4FT8OZW4AAcmGc.jpg'),
          // segundo filho na pilha
          Padding(
            padding: EdgeInsets.all(16.0),
            child: Text(
              'Imagem do buraco negro no centro da galáxia M87',
              style: TextStyle(fontSize: 20, color: Colors.white),
            ),
          ),
        ],
      );
    }

Além desses widgets de Layouts com múltiplos filhos temos ainda os seguintes widgets que se enquadram na mesma categoria mas que merecem um artigo a parte:

Na próxima parte do artigo veremos como criar layouts mais complexos.

"Palavra fiel é esta: que, se morrermos com ele, também com ele viveremos;
Se sofrermos, também com ele reinaremos; se o negarmos, também ele nos negará;
Se formos infiéis, ele permanece fiel; não pode negar-se a si mesmo."
2 Timóteo 2:11-13

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