Căn thẳng mép trái

Thuộc phần Ứng dụng đầu tiên trong hành trình Flutter của Coddy. Bài học 23 trên 32.

Hướng còn lại của Column, nằm ngang qua nó, là trục ngang. Mặc định, mỗi phần tử con được căn giữa theo chiều ngang của cột, nên dòng ngắn và dòng dài không bắt đầu ở cùng một vị trí.

crossAxisAlignment: thay đổi cách căn chỉnh đó:

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

Trong Column, CrossAxisAlignment.start căn các phần tử con về bên trái, end căn về bên phải, còn center là mặc định.

Thử thách

Dễ

Căn chỉnh để cả hai dòng bắt đầu ở cùng một mép trái bằng thuộc tính crossAxisAlignment: của cột.

Tự làm thử

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