2
0

【flutter】サイドバーに動きをつけたい

Posted at

こんにちは!
今回はサイドバーに動きをつけた内容を紹介します。

使用パッケージ

実装内容

Qiita.gif

実際のコード

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: SimpleHiddenDrawer(
        menu: const InnerDrawerOne(),//サイドメニューの内容を定義
        screenSelectedBuilder: //メインのコンテンツをビルドするためのコールバック
            (position, controller) {
              Widget screenCurrent;

          switch (position) { //値に応じて、選択された画面を決定
            case 0:
              screenCurrent = const Newfile();//クラスを指定
              break;
            case 1:
              screenCurrent = DateSelect();//クラスを指定
              break;
            case 2:
              screenCurrent = const QiitaSample1();//クラスを指定
              break;
            default:
              screenCurrent = const Newfile(); // デフォルトのウィジェットを設定
              break;
          }

          return Scaffold(
            backgroundColor: Colors.yellow,
            appBar: AppBar(
              leading: IconButton(
                icon: const Icon(Icons.menu),
                onPressed: () {
                  controller.toggle();
                },
              ),
            ),
            body: screenCurrent,
          );
        },
      ),
    );
  }
}

参考サイト

終わり

今回の紹介は以上になります。
今回も読んでいただき、ありがとうございました。

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0