Flutter DrawerHeaderに影をつけるサンプル
環境
Windows11 pro 64bit
Flutter 3.3.7
構文
boxShadow: [
BoxShadow(/*影の設定*/),
],
DrawerHeaderの引数「decoration」に、BoxDecorationを指定します。
BoxDecorationの引数「boxShadow」に影を設定します。
影の設定は、[]内にBoxShadowクラスを指定して行います。
使用例
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(),
drawer: Drawer(
child: ListView(
children: [
DrawerHeader(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
blurRadius: 25,
spreadRadius: 18,
color: Colors.grey,
),
],
color: Colors.white,
),
child: Container(),
),
],
),
),
),
);
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(),
drawer: Drawer(
child: ListView(
children: [
DrawerHeader(
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
blurRadius: 25,
spreadRadius: 18,
color: Colors.grey,
),
],
color: Colors.white,
),
child: Container(),
),
],
),
),
),
);
}
@override Widget build(BuildContext context) { return SafeArea( child: Scaffold( appBar: AppBar(), drawer: Drawer( child: ListView( children: [ DrawerHeader( decoration: BoxDecoration( boxShadow: [ BoxShadow( blurRadius: 25, spreadRadius: 18, color: Colors.grey, ), ], color: Colors.white, ), child: Container(), ), ], ), ), ), ); }