圆角

本课属于 Coddy Flutter 学习旅程的“你的第一个应用”单元。第 18 课，共 32 课。

如果不只想使用纯色，Container 可以使用 decoration:。BoxDecoration 可以让边角变圆：

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

BorderRadius.circular(12) 会将每个边角都变圆，曲线宽度为 12 像素。

注意，color: 移到了 BoxDecoration 内部。Container 不能同时设置 color: 和 decoration:：Flutter 会报错，因为它无法判断你想要哪种颜色。

挑战

简单

将粉色方框的边角变圆：

将 Container 的 color: 替换为 decoration:
将它设为 BoxDecoration，并使用 color: Colors.pink 和 borderRadius: BorderRadius.circular(16)

亲手试试

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