Flutterでボタンに影をつける方法

1. ボタンにBoxDecorationを使用する方法:

   ElevatedButton(
   child: Text('ボタン'),
   style: ElevatedButton.styleFrom(
   elevation: 8, // 影の高さを設定
   shadowColor: Colors.black, // 影の色を設定
   ),
   onPressed: () {
   // ボタンが押された時の処理
   },
   )

2. Containerウィジェットを使用する方法:

   Container(
   decoration: BoxDecoration(
   boxShadow: [
     BoxShadow(
       color: Colors.black,
       blurRadius: 8, // 影のぼかしの半径を設定
       spreadRadius: 2, // 影の広がりを設定
       offset: Offset(4, 4), // 影の位置を設定
     ),
   ],
   ),
   child: ElevatedButton(
   child: Text('ボタン'),
   onPressed: () {
     // ボタンが押された時の処理
   },
   ),
   )

3. 自作のボタンウィジェットに影を追加する方法:

   class ShadowButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
   return Container(
     decoration: BoxDecoration(
       boxShadow: [
         BoxShadow(
           color: Colors.black,
           blurRadius: 8,
           spreadRadius: 2,
           offset: Offset(4, 4),
         ),
       ],
     ),
     child: ElevatedButton(
       child: Text('ボタン'),
       onPressed: () {
         // ボタンが押された時の処理
       },
     ),
   );
   }
   }
   // 使用方法:
   ShadowButton(),

これらの方法を使用することで、Flutterアプリのボタンに影を追加することができます。影のスタイルや位置を調整することで、デザインに合わせた見た目を作ることができます。