Por que eu devo ler este artigo:O layout organiza o que será visível para o usuário, influenciando a forma como ele vai interagir com o app. Por esse motivo essa é uma parte importante no desenvolvimento. Aqui vamos conhecer os diversos Widgets de layout do Flutter. O Flutter contém diversos Widgets para criar as interfaces visuais com as quais os usuários vão interagir. Neste artigo aprenderemos a organizar esses Widgets na tela utilizando os Widgets de layout.

Uma parte importante no desenvolvimento de um app é a criação de layouts, ou a forma em que os componentes visuais estarão dispostos na tela do dispositivo, pois eles podem ajudar ou dificultar a interação do usuário com o app.


Guia do artigo:

No geral, o layout de uma tela é composto por Widgets visíveis, como barras de menu, painéis, imagens etc., e também por Widgets invisíveis, como linhas, colunas e grades. Esses Widgets invisíveis usamos para organizar a tela, alinhando os Widgets visíveis e delimitando o espaço que eles ocupam.

Por exemplo, na Figura 1 podemos ver o layout planejado para um app e ao lado a implementação dele em uma tela.

Planejamento de um layout e um app que utiliza esse layout
Figura 1. Planejamento de um layout e um app que utiliza esse layout

Repare na imagem a esquerda os nomes em cada parte do layout, como AppBar e Image. Esses são exemplos de Widgets visíveis do Flutter presentes na tela. Além deles, há também Widgets invisíveis, tais como Center e Row, que desempenham o papel de organizar a tela.

Widgets para organizar

Dentre os Widgets utilizados para organizar a tela os mais utilizados são Center, Column e Row. Eles funcionam como contêineres para outros Widgets filhos, que devem ser configurados utilizando as propriedades child, no caso de haver apenas um filho, ou children, para muitos filhos.

Center

Centraliza todos os seus Widgets filhos. E para customizar a forma como essa centralização ocorre podemos usar propriedades que determinam as dimensões de Center conforme a Tabela 1.

heightFactor

Se o valor não for nulo, define a altura de Center pela altura do filho multiplicado por esse valor.

widthFactor Se o valor não for nulo, define a largura de Center pela largura do filho multiplicado por esse valor.
Tabela 1. Propriedades para dimensionar Center em relação aos filhos

Por exemplo, caso o valor da propriedade widthFactor seja igual a 2.0, a largura de Center será o dobro da de seus filhos.

Exemplo de Layout com Center

No exemplo a seguir usamos Center para apresentar o texto “Olá Mundo!” centralizado na tela do dispositivo. O resultado pode ser visto na Figura 2.

Layout planejado para utilizar o Widget Center
Figura 2. Layout planejado para utilizar o Widget Center

O código para a criação desse layout pode visto na Listagem 1 e é explicado logo após.


    import 'package:flutter/material.dart';
  
    void main() => runApp(MyApp());
  
    class MyApp extends StatelessWidget {
 // This widget is the root of your application.
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
       home: Scaffold(
         appBar: AppBar(
           title: Text('Flutter Layouts'),
         ),
         body: Column(
           children: [
             Center(
               heightFactor: 2,
               child: Text(
                'Olá Mundo!',
                textDirection: TextDirection.ltr,
                style: TextStyle(
                  fontSize: 32,
                 color: Colors.white,
                )
               ),
             ),
           ] 
         ),
       ),   
   );
 }
}
Listagem 1. Criação de um Layout simples com o Widget Center

Explicando o código:

  • Linha 9: o método build retorna MaterialApp como o Widget principal do app.
  • Linha 10: o Widget Scaffold é usado para compor a página home.
  • Linha 11: Widget AppBar que cria uma barra para o aplicativo.
  • Linha 14: O Widget Column ocupa o corpo do Widget Scaffold.
  • Linha 16: O Widget Center é filho de Column.
  • Linha 17: a propriedade heightFactor define a altura de Center multiplicando seu valor(2) pela altura do Text filho.
  • Linha 18: O Widget Text é filho de Center.
  • Linha 19: A sequência de texto que Text exibirá no app: “Olá Mundo!”
  • Linha 20: A propriedade textDirection está definida como ltr, pois o texto será lido da esquerda para direita.
  • Linha 21: A propriedade TextStyle define o estilo do texto.
  • Linha 22: A propriedade fontSize define o tamanho da fonte como 32
  • Linha 23: A propriedade color define a cor da fonte como white (branco)

Após executarmos esse código o resultado deverá se parecer com a Figura 3.

App em execução no Android
Figura 3. App em execução no Android

Podemos ver na Figura 4 que a altura de Row é o dobro da altura de Text, conforme foi definido pela propriedade heightFactor.

Altura de Center e do filho Text
Figura 4. Altura de Center e do filho Text

Column

Com esse Widget alinhamos os Widgets na tela do app no sentido vertical, como se fizessem parte de uma coluna.

Para customizar esse alinhamento utilizamos as seguintes propriedades:

  • mainAxisAlignment: que alinha os filhos no eixo principal.
  • crossAxisAlignment: que alinha os filhos no eixo transversal

Em um Widget Column o eixo principal é vertical e o eixo transversal é horizontal.

Exemplo de layout com Column

Nesse exemplo criamos um layout com Column que terá como filhos três Widgets Image alinhados no sentido vertical, conforme a Figura 4.

Layout planejado com Column e três Image como filhos alinhados na
vertical
Figura 4. Layout planejado com Column e três Image como filhos alinhados na vertical

O código para a criação desse layout pode ser lido na Listagem 2 e é explicado mais abaixo.


    import 'package:flutter/material.dart';
  
    void main() {
     runApp(MyApp());
     } 
  
     class MyApp extends StatelessWidget {
     // This widget is the root of your application.
      @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter layouts'),
          ),
          body: Center(
            child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Image.asset('images/lands_01.jpg'),
                    Image.asset('images/lands_02.jpg'),
                    Image.asset('images/lands_03.jpg'),
                  ],
            ),
          ),
          
        )      
      );
    }
   }
  
Listagem 2. Criando layout com Column e três Widgets Image

Para relembrar como StatelessWidget e StatefulWidget funcionam consulte essa documentação.

Nas explicações a seguir nos concentramos nos trechos relacionados com o assunto deste artigo, destacando assim as suas linhas principais nesse contexto.

  • Linha 11: o método build retorna MaterialApp como o Widget principal do app;
  • Linha 12: o Widget Scaffold é usado para compor a página home;
  • Linha 13: Widget AppBar que cria uma barra para o aplicativo;
  • Um Widget Text exibe o título do aplicativo na AppBar;
  • Linha 16: O Widget Center ocupa o corpo do Widget Scaffold;
  • Linha 17: O Widget Column vai alinhar seus filhos no sentido vertical.
  • Linha 18: A propriedade mainAxisAlignment está configurada como spaceEvenly para distribuir igualmente os espaços entre os Widgets filhos de Column.
  • Linha 20 a 22: Três Widgets Image estão compondo o layout de Column.
Utilização de imagens em projetos Flutter: Para utilizarmos imagens em projetos Flutter, conforme o exemplo acima, temos que criar um diretório chamado images no projeto e copiar para ele as imagens que queremos usar. Também precisamos alterar o arquivo pubspec.yaml no diretório raiz.

Para isso, abra o arquivo e localize o seguinte trecho de código dentro dele:


  # The following section is specific to Flutter.
  flutter:
    assets:
  

Altere para o seguinte:


  # The following section is specific to Flutter.
  flutter:
    assets:
       - images/lands_01.jpg
       - images/lands_02.jpg
       - images/lands_03.jpg
  

Agora, podemos executar o app e ver o resultado que deve se parecer com o que vemos na Figura 5.

App em execução com layout vertical utilizando Column
Figura 5. App em execução com layout vertical utilizando Column

Row

Usamos esse Widget para alinhamento horizontal, utilizando as seguintes propriedades:

  • mainAxisAlignment: alinha os filhos no eixo principal.
  • crossAxisAlignment: alinha os filhos no eixo transversal.

Em um Widget Row o eixo principal é horizontal e o eixo transversal é vertical.

Repare que o comportamento das propriedades acima é o inverso do que acontece com o Widget Column.

Exemplo de layout com Row

No exemplo da Figura 6 usamos Row para exibir três imagens em uma tela do app, uma ao lado da outra.

Layout planejado com Row e três Image como filhos alinhados na
horizontal
Figura 6. Layout planejado com Row e três Image como filhos alinhados na horizontal

O código para esse exemplo pode ser visto na Listagem 3 e é explicado abaixo dele.


    import 'package:flutter/material.dart';
  
    void main() {
      runApp(MyApp());
    } 
  
    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
     Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter layouts'),
          ),
          body: Center(
            child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Image.asset('images/lands_01.jpg'),
                    Image.asset('images/lands_02.jpg'),
                    Image.asset('images/lands_03.jpg'),
                  ],
            ),
          ),
          
       )      
      );
    }
   }
Listagem 3. Criando layout com Row e três Widgets Image

Explicando o código:

  • Linha 11: o método build retorna MaterialApp como o Widget principal do app;
  • Linha 12: o Widget Scaffold é usado para compor a página home;
  • Linha 13: Widget AppBar que cria uma barra para o aplicativo;
  • Linha 14: Um Widget Text exibe o título do aplicativo na AppBar;
  • Linha 16: O Widget Center ocupa o corpo do Widget Scaffold;
  • Linha 17: O Widget Row vai alinhar seus filhos no sentido horizontal;
  • Linha 18: A propriedade mainAxisAlignment está configurada como spaceEvenly para distribuir igualmente os espaços entre os Widgets filhos do Widget Center;
  • Linha 20 a 22: Três Widgets Image estão compondo o layout de Center.

Ao executar o app o resultado apresentado deve se parecer com o que vemos na Figura 7.

App em execução com layout horizontal utilizando Row
Figura 7. App em execução com layout horizontal utilizando Row

Parabéns, você criou seus primeiros layouts em apps Flutter!

Confira também