FlutterのBottomSheetで背景を透過させる

ボトムシートで角丸表示した際に裏が透過しない問題のメモ.
themeの設定が必要だった.

MaterialAppを作成するときにBottomSheetThemeDataを作成して背景を透明にする

return MaterialApp(
  title: 'MyApp',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    bottomSheetTheme: BottomSheetThemeData(
      backgroundColor: Colors.transparent,
    ),
  ),
  home: const HomeScreen(),
);

これでBoxDecorationで色つけたときに角丸部分がきちんと透過する

class DebugLayoutScreen extends StatelessWidget {
  const DebugLayoutScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTextStyle.merge(
          child: Container(
            color: Colors.blue,
          )
      ),
      bottomSheet: Container(
          width: double.infinity,
          height: 200,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.vertical(
              top: Radius.circular(20),
            ),
          ),
          padding: const EdgeInsets.symmetric(horizontal: 0.0, vertical: 16.0),
          child: Container()
      ),
    );
  }
}