Flutter Containerに影をつけるサンプル

2023年10月15日

環境
Windows11 pro 64bit
Flutter 3.3.7

構文

decoration: BoxDecoration(
   boxShadow: [
     BoxShadow(),
   ],
 ),

Containerに影をつけるには、引数「decoration」に「BoxDecoration」を指定します。
BoxDecorationの引数「boxShdow」に「BoxShadow」を設定します。

使用例

@override
 Widget build(BuildContext context) {
   return Scaffold(
     body: Center(
       child: Column(
         mainAxisSize: MainAxisSize.min,
         children: [
           Container(
             decoration: BoxDecoration(
               boxShadow: [
                 BoxShadow(
                   color: Colors.red, /*色*/
                   spreadRadius: 6, 
                   blurRadius: 6, 
                   offset: Offset(1, 1),
                 ),
               ],
               color: Colors.white,
             ),
             width: 200,
             height: 120,
           ),
         ],
       ),
     ),
   );
 }