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.
Desafio
FácilTransforme isto em um pequeno cabeçalho de perfil:
- mantenha
Ada Lovelacena primeira linha - coloque
Londone1815lado a lado abaixo, em umaRow
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'),
],
),
),
),
);
}
}
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
1Olá, Flutter
O que é Flutter?Altere o textoA árvore de widgetsScaffold e AppBarStrings e aspasComentários7Projeto: Cartão de Visita
Cartão de Visita: LayoutCartão de Visita: Estilo5Linhas e Colunas
ColunaLinhaEspaço entre widgetsCentralizar uma colunaAlinhar as bordas esquerdasLinhas dentro de colunasPratique por conta própria: Compilador de Flutter online