🐦
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);
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()
),
);
}
}
Discussion