Flutter: Criando layouts com Center, Column e Row

Fique por dentro

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:

Widgets para organizar

Center
Exemplo de Layout com Center
Column
Exemplo de layout com Column
Row
Exemplo de layout com Row

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.

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.

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.

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.

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.

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.

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.

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.

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

Hello world com Dart

Artigo

Bate-papo sobre mobile

V�deo