Flutter Drawerに固定ヘッダーを表示するサンプル

2024年2月4日

環境
Windows11 pro 64bit
Flutter 3.3.7

構文
child: Column(
children: [
DrawerHeader(),//ヘッダー
DrawerWidget(),//　Drawerで表示するウェジェット
],
),
Drawerで表示するウェジェットを、Columnのchildrenにします。
Columnのchildrenの最初のウェジェットに、固定ヘッダーを指定します。

使用例

@override
 Widget build(BuildContext context) {
   return SafeArea(
     child: Scaffold(
       appBar: AppBar(),
       drawer: Drawer(
         child: Column(
           children: [
             DrawerHeader(
               child: Container(
                 color: Colors.red,
               ),
             ),
             Expanded(
               child: ListView.builder(
                 itemBuilder: (context, index) {
                   return ListTile(
                     leading: Icon(Icons.person),
                     title: Text('Book$index'),
                   );
                 },
                 itemCount: 20,
               ),
             ),
           ],
         ),
       ),
     ),
   );
 }