Flutterが採用しているマテリアルデザインを使ったコンポーネントを紹介【ボタン編】

Flutterで始めるモバイルアプリ開発 第14回

ポップアップメニュー（PopupMenuButton）

　ポップアップメニューは、マテリアルデザインにおいてはMenusの位置づけのコンポーネントになります。

　一般的にはAppBarのようなメニューとともに使われることが多いですが、単体でも利用可能です。基本的なメニューを表示するためのコード例がリスト6で、その実行例が図7です。

図7：PopupMenuButtonsの実行例

［リスト6］PopupMenuButtoを使ったサンプルコード（lib/menu/PopupMenuButtonWidget.dartの抜粋）

PopupMenuButton(
  // （1） メニューアイテムの作成
  itemBuilder: (BuildContext context) => [
    // （2） メニューアイテム
    PopupMenuItem(
      child: ListTile(
        leading: Icon(Icons.add),
        title : Text('追加')
      )
    ),
    PopupMenuItem(
      child: ListTile(
        leading: Icon(Icons.delete),
        title : Text('削除')
      ),
    ),
    // （3） 区切り線
    PopupMenuDivider(),
    PopupMenuItem(
      child : ListTile(
        title : Text("その他")
      )
    )
  ],
);

　PopupMenuButtonでは、各メニューアイテムを作るためには（1）のようにitemBuilderプロパティを指定し作成します。メニューアイテムは（2）のようにPopupMenuItemで指定します。

　そして、区切り線を指定する場合には、（3）のようにPopupMenuDividerを指定します。続いて、ToggledButtonsとPopupMenuButtonを使って、複数の処理を1つのボタンのように作ったコード例がリスト7で、その実行結果が図8です。

図8：ドロップダウンボタンの実行例

［リスト7］ToggledButtonとPopupMenuButtonを使ってドロップダウンボタンのサンプルコード（lib/menu/PopupMenuButtonWidget.dartの抜粋）

// （1） ToggledButton部分の実装例
Widget createActionButton(){
  final isSelected = [false, false];
  return ToggleButtons(
    isSelected: isSelected,
    onPressed: (index){},
    borderColor: Colors.black54,
    borderRadius: BorderRadius.circular(5.0),
    children: [
      Padding(
        padding: EdgeInsets.only(left: 25.0, right: 25.0),
        child: Text('変更する')
      ),
      // （2） ドロップダウンボタン
      Padding(
        padding: EdgeInsets.only(left: 5.0, right: 5.0),
        child: createPopupMenuButton2()
      ),
    ]
  );
}
// （3） ドロップダウンメニュー
PopupMenuButton createPopupMenuButton2(){
  return PopupMenuButton(
    // （4） 表示アイコン
    icon: Icon(Icons.arrow_drop_down),
    // （5） メニューの表示位置
    offset: Offset(50,50),
    itemBuilder: (BuildContext context) => [
      //（省略）
    ],
  );
}

　（1）がToggledButtonを使ったボタンの実装例で（2）がドロップダウンメニューを表示するための部分です。そして、（3）がドロップダウンメニューの表示メソッドになります。実際のToggleButton側に表示するアイコンを変更するには（4）のように指定します。また、メニューを表示する際にToggleButtons側のウィジェットが消えないようにするには（5）のようにoffsetを指定し表示位置を調整することができます。

まとめ

　今回はマテリアルデザインを使ったボタンとメニューコンポーネントについて説明をしました。スマホアプリでは、ユーザがどこを操作すればよいかがすぐ分かるようにすることが大切になります。なお、アプリ設計者はどのボタンをタップしてほしいかという意思も利用者に伝える必要があるので、今回紹介したTextButton、OutlinedButton、ElevatedButtonを使い分けることがマテリアルデザインでは推奨されています。

　次回は入力コンポーネントを中心に説明します。また、今回紹介していないドロップダウンもメニューに属していますが、通常は入力として利用されることから、こちらは次回からの入力コンポーネントで説明します。