Um guia completo para Flutter Row & Column com exemplo

Neste artigo, vamos aprender como usar linhas e colunas em um flutter com um exemplo. Este tópico é muito importante no desenvolvimento do flutter, sem linhas e colunas você não pode construir a interface do usuário.

Comparação de Row e Column

Explorando o Widget Column

Como dito antes, o widget columna alinha a direção vertical chidren´s. Para alterar a interface do usuário, precisamos jogar com CrossAxisAligment e MainAxisAlignment. No widget Column, MainAxisAligment estará na direção vertical e CrossAxisAligment na direção horizontal.

Container(
  color: Colors.grey[300],
  width: double.infinity,
  height: double.infinity,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
        height: 50,
        width: 50,
        color: Colors.red,
      ),
      Container(
        height: 50,
        width: 50,
        color: Colors.green,
      ),
      Container(
        height: 50,
        width: 50,
        color: Colors.blue,
      ),
    ],
  ),
),

Exemplo 1 do Column

No exemplo acima, corrigimos MainAxisAligment na posição inicial (start) e alteramos CrossAxisAligment como uma posição inicial, central e final (start, center e end).

Flutter Exemplo 2 Column

No exemplo acima, corrigimos MainAxisAligment na posição central (center) e alteramos CrossAxisAligment como uma posição inicial, central e final (start, center e end).

Flutter Exemplo 3 Column

No exemplo acima, corrigimos MainAxisAligment na posição final (end) e alteramos CrossAxisAligment como posição inicial, central e final (start, center e end).

Flutter Exemplo 4 Column

No exemplo acima, corrigimos CrossAxisAligment na posição central (center) e alteramos MainAxisAligment.

MainAxisAlignment.spaceBetween: primeiro e último widget sem espaço e espaço entre os widgets internos

MainAxisAlignment.spaceAround: Todos os widgets agrupados com algum espaço ao redor.

MainAxisAlignment.spaceEvenly: Todos os widgets agrupados com espaço igual

Column Exemplo 5

Botão Simples de Coluna

Center(
  child: Container(
    height: 100,
    width: 100,
    child: TextButton(
      onPressed: () {},
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.android),
          Text("Android"),
        ],
      ),
    ),
  ),
),

Cartão de contato

Center(
  child: Container(
    height: 200,
    width: 200,
    color: Colors.blueGrey[200],
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        CircleAvatar(
          backgroundImage: NetworkImage(
              "https://codesundar.com/wp-content/uploads/2020/08/78494341_2774884842574595_7784880823911579648_n-300x300.jpg"),
          radius: 28,
        ),
        Text("CODESUNDAR"),
        Text("Learn flutter easily"),
        ElevatedButton(
          onPressed: () {},
          child: Text("Start"),
        )
      ],
    ),
  ),
),

Post Blog

Container(
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
        height: 200,
        width: double.infinity,
        child: Image.network(
          "https://i.pinimg.com/originals/87/b6/e3/87b6e3ebf4d64dc72392e50a9f74bf84.jpg",
          fit: BoxFit.cover,
        ),
      ),
      Container(
        child: Text(
          "Heavy Rain is predicted during this summer",
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      SizedBox(height: 8),
      Text("Posted 5 mins ago"),
      SizedBox(height: 8),
      Container(
        child: Text(
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. "),
      )
    ],
  ),
),
),

Explorando o Widget  Row

Como dito antes, o widget de linha alinha a direção horizontal do widget children. Para alterar a interface do usuário, precisamos jogar com CrossAxisAligment e MainAxisAlignment. No widget Row, MainAxisAligment estará na direção horizontal e CrossAxisAligment na direção vertical.

Container(
  color: Colors.grey[300],
  width: double.infinity,
  height: double.infinity,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.start,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
        height: 50,
        width: 50,
        color: Colors.red,
      ),
      Container(
        height: 50,
        width: 50,
        color: Colors.green,
      ),
      Container(
        height: 50,
        width: 50,
        color: Colors.blue,
      ),
    ],
  ),
),

Flutter Exemplo 1 Row

No exemplo acima, corrigimos CrossAxisAligment na posição inicial (start) e alteramos MainAxisAligment como uma posição inicial, central e final (start, center e end).

Flutter Exemplo 2 Row

No exemplo acima, corrigimos CrossAxisAligment na posição central (center) e alteramos MainAxisAligment como posição inicial, central e final (start, center e end).

Flutter Exemplo 3 Row

No exemplo acima, corrigimos CrossAxisAligment na posição final (end) e alteramos MainAxisAligment como posição inicial, central e final (start, center e end).

Flutter Exemplo 4 Row

No exemplo acima, corrigimos CrossAxisAligment na posição central (center) e alteramos MainAxisAligment.

MainAxisAlignment.spaceBetween: primeiro e último widget sem espaço e espaço entre os widgets internos

MainAxisAlignment.spaceAround: Todos os widgets agrupados com algum espaço ao redor.

MainAxisAlignment.spaceEvenly: Todos os widgets agrupados com espaço igual

Botão Simples de Linha

Center(
  child: Container(
    width: 120,
    child: ElevatedButton(
      onPressed: () {},
      child: Row(
        children: [
          Icon(Icons.android),
          Text("Press Me"),
        ],
      ),
    ),
  ),
),

Exemplo de Contador com Row

Center(
  child: Container(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        OutlinedButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
        Text("10"),
        OutlinedButton(
          onPressed: () {},
          child: Icon(Icons.remove),
        ),
      ],
    ),
  ),
),

Exemplo de um Card de Produto com Row

Container(
  padding: EdgeInsets.all(16.0),
  child: Container(
    color: Colors.grey[400],
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Container(
          width: 80,
          height: 80,
          child: Image.network(
            "https://i.pinimg.com/originals/87/b6/e3/87b6e3ebf4d64dc72392e50a9f74bf84.jpg",
            fit: BoxFit.cover,
          ),
        ),
        Container(
          child: Text(
            "Umberla For Sale",
            style: TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        Text("5 USD")
      ],
    ),
  ),
),

Rows & Column Juntos

Sim, você pode mesclar row e columns para criar interfaces de usuário complexas.

Exemplo 1 Row & Column

Center(
  child: Container(
    color: Colors.white,
    width: 240,
    height: 300,
    child: Column(
      children: [
        Container(
          height: 160,
          width: double.infinity,
          child: Image.network(
            "https://i.pinimg.com/originals/87/b6/e3/87b6e3ebf4d64dc72392e50a9f74bf84.jpg",
            fit: BoxFit.cover,
          ),
        ),
        Container(
          padding: EdgeInsets.all(8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      "Umberla for sale",
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 18.0,
                      ),
                    ),
                    SizedBox(height: 4),
                    Text("200 bought this")
                  ],
                ),
              ),
              Container(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text("4.5"),
                    Icon(
                      Icons.star,
                      size: 14,
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
        Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              ElevatedButton(
                child: Text("Add To Cart"),
                onPressed: () {},
              ),
              ElevatedButton(
                child: Text("Buy Now"),
                onPressed: () {},
              ),
            ],
          ),
        ),
      ],
    ),
  ),
),

Exemplo 2 Row & Column

Center(
  child: Container(
    color: Colors.white,
    width: double.infinity,
    height: 100,
    padding: EdgeInsets.all(8),
    margin: EdgeInsets.all(12),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(
          height: 80,
          width: 80,
          child: Image.network(
            "https://i.pinimg.com/originals/87/b6/e3/87b6e3ebf4d64dc72392e50a9f74bf84.jpg",
            fit: BoxFit.cover,
          ),
        ),
        SizedBox(width: 8),
        Expanded(
          child: Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  "Umberla for sale",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 18.0,
                  ),
                ),
                SizedBox(height: 4),
                Text("200 bought this")
              ],
            ),
          ),
        ),
        SizedBox(width: 8),
        Container(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text("4.5"),
              Icon(
                Icons.star,
                size: 14,
              ),
            ],
          ),
        )
      ],
    ),
  ),
),

Exemplo 3 Row & Column

Center(
  child: Container(
    color: Colors.white,
    width: double.infinity,
    height: 308,
    margin: EdgeInsets.all(20),
    child: Column(
      children: [
        Container(
          padding: EdgeInsets.all(12.0),
          child: Row(
            children: [
              CircleAvatar(
                backgroundImage: NetworkImage(
                    "https://codesundar.com/wp-content/uploads/2020/08/78494341_2774884842574595_7784880823911579648_n-300x300.jpg"),
                radius: 20,
              ),
              SizedBox(
                width: 8.0,
              ),
              Expanded(
                child: Container(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text("SUNDARAVEL M"),
                      Text("5 mins ago"),
                    ],
                  ),
                ),
              ),
              SizedBox(
                width: 8.0,
              ),
              Icon(Icons.more_vert),
            ],
          ),
        ),
        Container(
          height: 200,
          width: double.infinity,
          child: Image.network(
            "https://i.pinimg.com/originals/87/b6/e3/87b6e3ebf4d64dc72392e50a9f74bf84.jpg",
            fit: BoxFit.cover,
          ),
        ),
        SizedBox(height: 8),
        Container(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Container(
                child: Row(
                  children: [Icon(Icons.thumb_up), Text("Like")],
                ),
              ),
              Container(
                child: Row(
                  children: [Icon(Icons.comment), Text("Comment")],
                ),
              ),
              Container(
                child: Row(
                  children: [Icon(Icons.share), Text("Share")],
                ),
              )
            ],
          ),
        ),
      ],
    ),
  ),
),

Referências adicionais:

• https://flutter.dev/docs/development/ui/layout
• https://api.flutter.dev/flutter/widgets/Column-class.html
• https://api.flutter.dev/flutter/widgets/Row-class.html