Artigos Flutter Flutter: Criando layouts com Center, Column e Row
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(const MyApp());

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

Explicando o código:

  • Linha 10: o método build retorna MaterialApp como o Widget principal do app.
  • Linha 11: o Widget Scaffold é usado para compor a página home.
  • Linha 12: Widget AppBar que cria uma barra para o aplicativo.
  • Linha 15: O Widget Column ocupa o corpo do Widget Scaffold.
  • Linha 17: O Widget Center é filho de Column.
  • Linha 18: a propriedade heightFactor define a altura de Center multiplicando seu valor(2) pela altura do Text filho.
  • Linha 19: O Widget Text é filho de Center.
  • Linha 20: A sequência de texto que Text exibirá no app: “Olá Mundo!”
  • Linha 21: A propriedade textDirection está definida como ltr, pois o texto será lido da esquerda para direita.
  • Linha 22: A propriedade TextStyle define o estilo do texto.
  • Linha 23: A propriedade fontSize define o tamanho da fonte como 32
  • Linha 24: 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 na raiz do 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(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super (key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const 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 12: o método build retorna MaterialApp como o Widget principal do app;
  • Linha 13: o Widget Scaffold é usado para compor a página home;
  • Linha 14: Widget AppBar que cria uma barra para o aplicativo;
  • Linha 15: Um Widget Text exibe o título do aplicativo na AppBar;
  • Linha 17: O Widget Center ocupa o corpo do Widget Scaffold;
  • Linha 18: O Widget Row vai alinhar seus filhos no sentido horizontal;
  • Linha 19: A propriedade mainAxisAlignment está configurada como spaceEvenly para distribuir igualmente os espaços entre os Widgets filhos do Widget Center;
  • Linha 21 a 23: 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

Curso de Flutter

Curso de Flutter

Curso
Hello world com Dart

Hello world com Dart

Artigo
Bate-papo sobre mobile

Bate-papo sobre mobile

Vídeo