Menu
CoddyTech

Linhas dentro de colunas

Parte da seção Seu primeiro app do Journey de Flutter da Coddy. Lição 24 de 32.

Um Row pode ser um dos filhos de um Column. É assim que uma tela ganha linhas com várias coisas nelas:

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text('Pancakes'),
    Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('20 min'),
        SizedBox(width: 12),
        Text('Easy'),
      ],
    ),
  ],
)

mainAxisSize: MainAxisSize.min faz com que uma linha ou coluna tenha apenas o tamanho necessário para seus filhos, em vez de ocupar todo o espaço disponível. Aqui, isso mantém os dois no meio da tela.

challenge icon

Desafio

Fácil

Transforme isto em um pequeno cabeçalho de perfil:

  • mantenha Ada Lovelace na primeira linha
  • coloque London e 1815 lado a lado abaixo, em uma Row

Experimente você mesmo

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Ada Lovelace', style: TextStyle(fontSize: 28)),
              Text('London'),
              Text('1815'),
            ],
          ),
        ),
      ),
    );
  }
}
quiz iconTeste seus conhecimentos

Esta lição inclui um quiz rápido. Comece a lição para respondê-lo e acompanhar seu progresso.

Todas as lições de Seu primeiro app

Pratique por conta própria: Compilador de Flutter online