Menu
CoddyTech

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.

challenge icon

Desafio

Fácil

Faç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)),
            ],
          ),
        ),
      ),
    );
  }
}
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