Container 為 Widget 添加 Decoration | 點燈坊

Container 可替 Widget 添加 Decoration。

Version

Flutter 3.24

Decoration

• Hello World 的四周圍除了有 padding 外，四個角還有弧度
• Text 並 沒有 提供屬性設定 borderRadius

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    var container = Container(
      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 50),
      decoration: BoxDecoration(
        color: Colors.amber,
        borderRadius: const BorderRadius.all(Radius.circular(18.0)),
        border: Border.all(width: 1.0, color: Colors.blue),
      ),
      child: const Text('Hello World'),
    );

    var body = Center(child: container);

    return Scaffold(body: body);
  }
}

Line 10

var container = Container(
  padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 50),
  decoration: BoxDecoration(
    color: Colors.amber,
    borderRadius: const BorderRadius.all(Radius.circular(18.0)),
    border: Border.all(width: 1.0, color: Colors.blue),
  ),
  child: const Text('Hello World'),
);

• decoration：設定 Container 的 style
  • borderRadius：設定 border 的 弧度
  • border：設定 border 的 寬度、顏色
• child：將 Text 包在 Container 內

Conclusion

• 若沒對 Container 設定 有效 屬性，Android Studio 會提出警告