[読書会]Drawerクラスの参考資料

api.flutter.dev/material/Drawer-class 中の「参照」には、次の説明記載があります。

・Scaffold.drawer, where one specifies a Drawer so that it can be shown.
 (1.Scaffold.drawerScaffold の Drawer プロパティ)について)
・Scaffold.of, to obtain the current ScaffoldState, which manages the display and animation of the drawer.
 (2.Scaffold.ofScaffold の of メソッド)について)
・ScaffoldState.openDrawer, which displays its Drawer, if any.
 (3.ScaffoldState.openDrawer メソッド について)
・material.io/design/components/navigation-drawer.html
 (4.Navigation Drawerのデザインパターンについて)

以下は、上記についての解説になります。

1.Scaffold.drawer(Scaffold の Drawerプロパティ)について

  • Scaffold.drawerは、FlutterアプリケーションでDrawerを表示するために設定するプロパティです。
  • Scaffoldは、Flutterの基本的なレイアウト構造を提供するウィジェットで、アプリのレイアウトに使用されます。ScaffoldのdrawerプロパティにDrawerウィジェットを設定することで、アプリ画面の左側からスライドして表示されるナビゲーションメニューを追加できます。
(例)このコードでは、ScaffoldのdrawerプロパティにDrawerウィジェットを設定することで、スライドメニューを追加しています。
Scaffold(
  appBar: AppBar(title: Text('Drawer 使用例:')),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: <Widget>[
        DrawerHeader(
          decoration: BoxDecoration(color: Colors.blue),
          child: Text('Drawer Header'),
        ),
        ListTile(
          title: Text('Item 1'),
          onTap: () {
            //tap押下時処理
          },
        ),
        ListTile(
          title: Text('Item 2'),
          onTap: () {
            //tap押下時処理
          },
        ),
      ],
    ),
  ),
  body: Center(child: Text('主コンテンツ')),
);

2.Scaffold.of(Scaffold の of メソッド)について

  • Scaffold.ofは、現在のScaffoldStateを取得するためのメソッドです。
    ScaffoldStateは、Scaffoldウィジェットの状態を管理し、その状態にアクセスするために使用されます。
  • ScaffoldStateは、Drawerの表示やアニメーションなどの機能を管理します。Scaffold.of(context)を使用することで、現在のScaffoldの状態にアクセスし、Drawerを開くなどの操作が可能になります。
(例)このコードでは、ボタン押下時に、Scaffold.of(context).openDrawer()を呼び出してDrawerを開いています。
ElevatedButton(
  onPressed: () {
    Scaffold.of(context).openDrawer(); //Drawerを開く
  },
  child: Text('Drawerを開く'),
);

3.ScaffoldState.openDrawer メソッド について

  • ScaffoldState.openDrawerは、Scaffoldに設定されたDrawerを表示するメソッドです。
    Drawerが設定されている場合、このメソッドを呼び出すとDrawerが表示されます。
  • このメソッドは、Scaffoldウィジェットに設定されたDrawerを手動で開くために使用します。
(例)このコードでは、ScaffoldStateのインスタンスを取得し、openDrawer()メソッドを呼び出すことでDrawerを表示しています。
ScaffoldState scaffoldState = Scaffold.of(context);
scaffoldState.openDrawer(); //Drawerを開く

4.Navigation Drawerのデザインパターンについて

  • material.io/design/components/navigation-drawer.htmlは、GoogleのMaterial Designガイドラインの一部で、Navigation Drawer(ナビゲーションドロワー)のデザインパターンについて説明している公式ドキュメントのURLです。
  • ここでは、ナビゲーションドロワーの使い方やデザインのベストプラクティスが紹介されています。FlutterのDrawerはこのガイドラインに基づいて設計されており、デザインガイドラインを理解するためにこのリソースが参考になります。

5.まとめ

  • Scaffold.drawerは、Drawerウィジェットを設定して表示するためのプロパティ。
  • Scaffold.of(context)は、現在のScaffoldの状態を取得し、Drawerの表示や他の操作を行うために使用。
  • ScaffoldState.openDrawerは、プログラム上でDrawerを開くためのメソッド。
  • material.io/design/components/navigation-drawer.htmlは、ナビゲーションドロワーに関するMaterial Designガイドラインの公式ドキュメント。

コメントを残す