Alinhar as bordas esquerdas
Parte da seção Seu primeiro app do Journey de Flutter da Coddy. Lição 23 de 32.
A outra direção de uma Column, atravessando-a, é seu eixo transversal. Por padrão, cada filho fica centralizado ao longo da coluna, então uma linha curta e uma linha longa não começam no mesmo lugar.
crossAxisAlignment: altera isso:
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [...],
)Em uma Column, CrossAxisAlignment.start alinha os filhos à esquerda, end à direita, e center é o padrão.
Desafio
FácilFaça com que as duas linhas comecem na mesma margem esquerda usando o crossAxisAlignment: da coluna.
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(
children: [
Text('Name', style: TextStyle(fontSize: 24)),
Text('A much longer line', style: TextStyle(fontSize: 24)),
],
),
),
),
);
}
}
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