なんでも浮き上がらせちゃうContainer

いろんなWidgetに流用できる影付きContainer

UIにはいろんな種類がある。
Button、textField、RadioButton、dropdownButton･･･
そういういろいろ混ざった画面に、統一感のある影をつけたい。
というとき、これ一つ作り置きで便利。

何でもこれでwrap

配色は適当に変えてくださいね。

import 'package:flutter/material.dart';

class ShadowedContainer extends StatelessWidget {
  final Widget child;

  const ShadowedContainer({
    super.key,
    required this.child,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0x99e6e6fa),
        borderRadius: BorderRadius.circular(20.0),
        boxShadow: const [
          BoxShadow(
            color: Colors.grey,
            spreadRadius: 1.0,
            blurRadius: 10.0,
            offset: Offset(10, 10),
          )
        ]
      ),
      child: child,
    );
  }
}

使うときはこんな感じ

サイズ指定もナンニモ要らない。

                                    Expanded(
                                      flex: 2,
                                      child: Padding(
                                        padding: const EdgeInsets.all(20.0),
                                        child: ShadowedContainer(　　　←ここ
                                          child: CustomDropdownButton(
                                            selectedValue: model.selectedCalendar,
                                            options: model.periods,
                                            onChanged: (value) {
                                              model.setCalendar(value);
                                            },
                                          ),
                                        ),
                                      ),
                                    ),