CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2021/11/24 11:00

目次

ポップアップメニュー(PopupMenuButton)

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

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

図7:PopupMenuButtonsの実行例
図7:PopupMenuButtonsの実行例
[リスト6]PopupMenuButtoを使ったサンプルコード(lib/menu/PopupMenuButtonWidget.dartの抜粋)
PopupMenuButton(
  // (1) メニューアイテムの作成
  itemBuilder: (BuildContext context) => <PopupMenuEntry>[
    // (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:ドロップダウンボタンの実行例
図8:ドロップダウンボタンの実行例
[リスト7]ToggledButtonとPopupMenuButtonを使ってドロップダウンボタンのサンプルコード(lib/menu/PopupMenuButtonWidget.dartの抜粋)
// (1) ToggledButton部分の実装例
Widget createActionButton(){
  final isSelected = <bool>[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) => <PopupMenuEntry>[
      //(省略)
    ],
  );
}

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

まとめ

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

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



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Flutterで始めるモバイルアプリ開発

もっと読む

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。個人紹介主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしど...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5