Hàng bên trong cột

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

Row có thể là một trong các phần tử con của Column. Nhờ vậy, màn hình có các hàng chứa nhiều mục:

Column(
  mainAxisSize: MainAxisSize.min,
  children: [
    Text('Pancakes'),
    Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Text('20 min'),
        SizedBox(width: 12),
        Text('Easy'),
      ],
    ),
  ],
)

mainAxisSize: MainAxisSize.min giúp hàng hoặc cột chỉ có kích thước vừa đủ chứa các phần tử con, thay vì chiếm hết không gian được cấp. Ở đây, nó giữ cả hai ở giữa màn hình.

Thử thách

Dễ

Biến nội dung này thành một phần đầu hồ sơ nhỏ:

đặt Ada Lovelace trên dòng đầu tiên
đặt London và 1815 cạnh nhau bên dưới, trong một Row

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(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Ada Lovelace', style: TextStyle(fontSize: 28)),
              Text('London'),
              Text('1815'),
            ],
          ),
        ),
      ),
    );
  }
}