Container 為 Widget 添加 BoxShadow | 點燈坊

Container 可替 Widget 添加 BoxShadow。

Version

Flutter 3.24

Decoration

• Android 與 iOS 都成功顯示 BoxShadow

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    var appBar = AppBar(
      title: const Text('Container BoxShadow'),
    );

    var container = Container(
      width: 200,
      height: 200,
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 1,
            blurRadius: 10,
            offset: const Offset(0, 5),
          ),
        ],
      ),
    );

    var body = Center(
      child: container,
    );

    return MaterialApp(
      home: Scaffold(
        appBar: appBar,
        body: body,
      ),
    );
  }
}

Line 12

var container = Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.white,
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 1,
        blurRadius: 10,
        offset: const Offset(0, 5),
      ),
    ],
  ),
);

• decoration：設定 Container 的 style
  • boxShadow：設定 BoxShadow
    • color：設定陰影顏色和透明度
    • spreadRadius：設定擴散半徑
    • blurRadius：設定模糊半徑
    • offset：設定僅向下偏移

Conclusion

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