【Flutter】Drawerでメニューリストを表示する

スマホアプリでは、メニューアイコンを押すとメニューリストが左側からスライドしてきて表示されるというユーザーインターフェースはよく見るかと思います。 この記事ではそのようなユーザーインターフェースを実現する「Drawer」ウィジェットをご紹介します。

Drawerウィジェット

使い方

①Scaffoldの中でDrawerを設定

Scaffoldウィジェットのプロパティとして「appBar」や「body」がありますが、それに加えて「drawer」プロパティを設定するだけです。これでDrawerが表示されます。めっちゃ簡単ですね。

②Drawerの中身を作成

これだけだと寂しいのでListViewとListTileウィジェットを使ってDrawarウィジェットの中身を作ってみます。

よく見るメニュー一覧ができました。

あとはListTileのonTapプロパティでそれぞれのページに飛ばしてあげればOKです。

アーキテクチャー

サンプルコード

class OkaneruDrawer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        children: [
          Container(
            padding: EdgeInsets.only(top: 25,bottom: 10),
            decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [Colors.black,appbar_green],
                  begin: const FractionalOffset(0.0, 0.0),
                  end:  const FractionalOffset(1.0, 0.0),
                  stops: [0.0, 1.0],
                  tileMode: TileMode.clamp,
                )
            ),
            child: Column(
              children: [
                Material(
                  borderRadius: BorderRadius.circular(80),
                  elevation: 8,
                  child: Container(
                    height: 160,
                    width: 160,
                    // child: CircleAvatar(
                    //   backgroundImage: Image(n),
                    // ),
                  ),
                ),
                SizedBox(height: 10,),
                Text(
                  'Drawer Mene',
                  style: TextStyle(
                      color: Colors.white,
                      fontSize: 35,
                      fontFamily: 'Signatra'
                  ),
                )
              ],
            ),
          ),
          SizedBox(height: 12,),
          Container(
            padding: EdgeInsets.only(top: 1),
            decoration: BoxDecoration(
                gradient: LinearGradient(
                  colors: [appbar_green,Colors.black],
                  begin: const FractionalOffset(0.0, 0.0),
                  end:  const FractionalOffset(1.0, 0.0),
                  stops: [0.0, 1.0],
                  tileMode: TileMode.clamp,
                )
            ),
            child: Column(
              children: [
                ListTile(
                  leading: Icon(Icons.home,color: Colors.white,),
                  title: Text('Home',style: TextStyle(color: Colors.white),),
                  onTap: (){},
                ),
                Divider(
                  height: 10,color: Colors.white,thickness: 6,
                ),
                ListTile(
                  leading: Icon(Icons.home,color: Colors.white,),
                  title: Text('My Orders',style: TextStyle(color: Colors.white),),
                  onTap: (){},
                ),
                Divider(
                  height: 10,color: Colors.white,thickness: 6,
                ),
                ListTile(
                  leading: Icon(Icons.home,color: Colors.white,),
                  title: Text('My Cart',style: TextStyle(color: Colors.white),),
                  onTap: (){},
                ),
                Divider(
                  height: 10,color: Colors.white,thickness: 6,
                ),
                ListTile(
                  leading: Icon(Icons.home,color: Colors.white,),
                  title: Text('Search',style: TextStyle(color: Colors.white),),
                  onTap: (){},
                ),
                Divider(
                  height: 10,color: Colors.white,thickness: 6,
                ),
                ListTile(
                  leading: Icon(Icons.home,color: Colors.white,),
                  title: Text('Add New Address',style: TextStyle(color: Colors.white),),
                  onTap: (){},
                ),
                Divider(
                  height: 10,color: Colors.white,thickness: 6,
                ),
                ListTile(
                  leading: Icon(Icons.home,color: Colors.white,),
                  title: Text('Logout',style: TextStyle(color: Colors.white),),
                  onTap: (){},
                ),
                Divider(
                  height: 10,color: Colors.white,thickness: 6,
                ),

              ],
            ),
          )
        ],

      ),
    );
  }
}