Sejajarkan Sisi Kiri

Termasuk bagian Aplikasi Pertamamu dalam perjalanan Flutter di Coddy. Pelajaran 23 dari 32.

Arah lain dari Column, melintanginya, adalah sumbu silang. Secara default, setiap child berada di tengah kolom, jadi baris pendek dan baris panjang tidak dimulai dari tempat yang sama.

crossAxisAlignment: mengubahnya:

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [...],
)

Dalam Column, CrossAxisAlignment.start menyelaraskan child di sisi kiri, end di sisi kanan, dan center adalah default.

Tantangan

Mudah

Buat kedua baris dimulai dari tepi kiri yang sama dengan crossAxisAlignment: pada kolom.

Coba sendiri

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