Góc bo tròn

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

Để làm được nhiều hơn việc tô một màu đơn thuần, Container nhận decoration:. BoxDecoration có thể bo tròn các góc:

Container(
  padding: EdgeInsets.all(16),
  decoration: BoxDecoration(
    color: Colors.indigo,
    borderRadius: BorderRadius.circular(12),
  ),
  child: Text('Rounded'),
)

BorderRadius.circular(12) bo tròn mọi góc bằng một đường cong rộng 12 pixel.

Lưu ý rằng color: đã chuyển vào bên trong BoxDecoration. Container không thể có cả color: lẫn decoration:: Flutter sẽ dừng và báo lỗi vì không thể xác định bạn muốn dùng màu nào.

Thử thách

Dễ

Bo tròn các góc của hộp màu hồng:

thay color: của Container bằng decoration:
đặt giá trị này thành BoxDecoration với color: Colors.pink và borderRadius: BorderRadius.circular(16)

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(
            padding: EdgeInsets.all(16),
            color: Colors.pink,
            child: Text('Sale', style: TextStyle(fontSize: 32, color: Colors.white)),
          ),
        ),
      ),
    );
  }
}