Khoảng đệm

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

Một chiếc hộp ôm sát phần văn bản bên trong trông chật chội. padding: thêm khoảng trống bên trong hộp, giữa mép hộp và phần tử con:

Container(
  padding: EdgeInsets.all(16),
  color: Colors.yellow,
  child: Text('Room to breathe'),
)

EdgeInsets.all(16) nghĩa là 16 pixel ở cả bốn cạnh. EdgeInsets.symmetric(horizontal: 24, vertical: 8) đặt khoảng cách riêng cho hai cạnh bên và cho phía trên, phía dưới.

Container cũng có margin:. Đó là khoảng trống bên ngoài hộp, giữa hộp và các phần tử xung quanh. Phần có màu không lớn thêm.

Thử thách

Dễ

Hãy chừa một khoảng trống cho Fresh: thêm phần đệm 24 pixel ở mọi phía, bên trong hộp màu xanh lá.

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: Container(
            color: Colors.lightGreen,
            child: Text('Fresh', style: TextStyle(fontSize: 32)),
          ),
        ),
      ),
    );
  }
}