フラッタ引き出しサイドバーメニュー

ナビゲーションがモバイルアプリケーションに入る限り、2つの主要なオプションがあります.

Tabbar

引き出し側メニュー

我々はすでに前の記事でFlutter tabbarを作成し、この記事では、我々はどのように引き出しを行うことができます見ていきます.
この記事の最後までに、次のような結果が出ます.

あなたが沿って続くことを望むならば、私は出発点として私のFlutter hello world appをしています.

フラッタの引き出し側メニューの設定

アプリケーションのルートエントリポイントを変更することから始めましょう.前に、我々は主要な機能で体を足場にしたものです.しかし、引き出しに足場を使う必要があります.

void main() async {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyApp(),
    ),
  );
}

アプリとして、我々は引き出しを返すためにこれを変更することができます.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Drawer menu')),
      body: const Center(
        child: Text('Click on the menu icon'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            const DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text(
                'Drawer Header',
                style:
                    TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
              ),
            ),
            ListTile(
              title: const Text('Item 1'),
            ),
            ListTile(
              title: const Text('Item 2'),
            ),
          ],
        ),
      ),
    );
  }
}

これをレンダリングするならば、我々は我々が開くことができる基本的な引き出しを得ます、そして、それには2つのアイテムがあります.
次に、上に引き出しヘッダー項目を追加します.
また、メニューの右側をクリックして引き出しを閉じることができますしかし、メニュー項目をクリックすると、閉じることもできます.
我々は、リストタイルにOnTapイベントを追加することでこれを行うことができます.

ListTile(
  title: const Text('Item 2'),
  onTap: () {
    Navigator.pop(context);
  },
),

それが既存のスタックの上に押されたので、このタップはナビゲーション引き出しメニューを閉じます.
そして、それで、我々はフラッターで我々の基本的な引き出しセットアップをします.
GitHubに完全なコード例を見つけることができます.

読んでいただきありがとうございます、接続しましょう！

私のブログを読んでくれてありがとう.私の電子メール会報を購読して、Facebook