CodeZine(コードジン)

特集ページ一覧

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

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

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

 前回は、マテリアルデザインでのテキスト処理について説明しました。今回はボタンやメニューは利用者が操作の意思を伝えるコンポーネントであるボタンやメニューなどの表示コンポーネントを紹介します。

目次

ボタン

 マテリアルデザインにおいて、基本的なボタンに以下の4種類があります。

  • テキストボタン(TextButton)
  • アウトラインボタン(OutlinedButton)
  • 立体ボタン(ElevatedButton)
  • トグルボタン(ToggledButton)

 これらのボタンの違いを示したものが図1です。テキストボタン、アウトラインボタン、立体ボタンは装飾の違いであり、それ以外は大きく違いはありません。また、トグルボタンは複数のボタンを1つにしたもので、ON/OFFのステータスがある部分が異なります。

図1:マテリアルデザインのボタン
図1:マテリアルデザインのボタン

テキストボタン(TextButton)

 テキストボタンは、テキストを基本としたシンプルなボタンです。以前のFlutterではFlatButtonというボタンがありましたが、現在は、TextButtonを利用することが推奨されています。

 リスト1はテキストボタンを使ったサンプルコードで実行結果が図2です。

図2:TextButtonの実行例
図2:TextButtonの実行例
[リスト1]TextButtonを使ったサンプルコード(lib/button/TextButtonWidget.dartの抜粋)
// (1) 基本的な使い方
TextButton(
  onPressed: (){
    print("button press !!");
  },
  child: Text('OK')
),
// (2) 不活性のボタン
TextButton(
  onPressed: null,
  child: Text('Disabled Button'),
),
// (3) スタイルの変更
TextButton(
  style: TextButton.styleFrom(
    primary: Colors.red,
  ),
  onPressed: (){},
  child: Text('登録する'),
),
// (4) アイコンをボタンに追加する
TextButton.icon(
  icon: Icon(Icons.add),
  onPressed: (){},
  label: Text('登録する')
)

 (1)がもっともシンプルな記述例です。onPressedメソッドは必ず定義しなければならず、(2)のようにnullを指定すると不活性状態のボタンになります。ボタンのスタイルを変更する場合にはstyleFromを使うことでTextButtonにあったスタイルの変更が可能です。(3)では、文字の色を指定しています。そして、アイコンを利用するには(4)のようにTextButtonのiconコンストラクタを利用します。

アウトラインボタン(OutlinedButton)

 アウトラインボタンは、ボーダー付きボタンです。以前のFlutterではOutlineButtonというボタンがありましたが、現在は、OutlinedButtonを利用することが推奨されています。

 リスト2はテキストボタンを使ったサンプルコードで実行結果が図3です。実際のコードはTextButtonとほぼ同様です。

図3:OutlinedButtonの実行例
図3:OutlinedButtonの実行例
[リスト2]OutlinedButtonを使ったサンプルコード(lib/button/OutlinedButtonWidget.dartの抜粋)
// (1) 基本的な使い方
OutlinedButton(
  onPressed: (){
    print("button press !!");
  },
  child: Text('OK')
),
// (2) 不活性のボタン
OutlinedButton(
  onPressed: null,
    child: Text('Disabled Button'),
),
// (3) 装飾の変更
OutlinedButton(
  style: OutlinedButton.styleFrom(
    primary: Colors.red,
    side: BorderSide(
      color: Colors.red,
    )
  ),
  onPressed: (){},
  child: Text('登録する')
),
// (4) アイコンをボタンに追加する
OutlinedButton.icon(
  onPressed: (){},
  icon: Icon(Icons.add),
  label: Text('登録する')
)

 (1)がもっともシンプルな記述例です。(2)のようにnullを指定すると不活性状態のボタンになります。ボタンのスタイルを変更する場合にはstyleFromを使うことでOutlinedButtonにあったスタイルの変更が可能です。

 (3)では、文字の色とボーダーの色を指定しています。そして、アイコンを利用するには(4)のようにOutlinedButtonのiconコンストラクタを利用します。

立体ボタン(ElevatedButton)

 立体ボタンは、立体的な効果を持ったボタンを作るためのウィジェットです。以前のFlutterではRaisedButtonというボタンがありましたが、現在は、ElevatedButtonを利用することが推奨されています。リスト3がサンプルコードと実行結果が図4です。

図4:ElevatedButtonの実行例
図4:ElevatedButtonの実行例
[リスト3]ElevatedButtonを使ったサンプルコード(lib/button/ElevatedButtonWidget.dartの抜粋)
// 基本的な使い方
ElevatedButton(
  onPressed: (){
    print("button press !!");
  },
  child: Text('OK')
),
// 不活性のボタン
ElevatedButton(
  onPressed: null,
  child: Text('Disabled Button'),
),
// 装飾の変更
ElevatedButton(
  style: ElevatedButton.styleFrom(
    // (1) 背景色を指定
    primary: Colors.red,
    // (2) 影のサイズ
    elevation: 10,
    // (3) 角を丸くする
    shape: RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(30.0),
    )
  ),
  onPressed: (){},
  child: Text('登録する')
),
// アイコンをボタンに追加する
ElevatedButton.icon(
  onPressed: (){},
  icon: Icon(Icons.add),
  label: Text('追加する')
)

 ElevatedButtonもTextButtonやOutlinedButtonとほぼ同様に利用することが可能です。また、ボタンのスタイルを変更する場合にはstyleFromを使うことでElevatedButtonにあったスタイルに変更できます。

 (1)で背景色を指定しています。そして、(2)elevationはボタンの浮きの高さのようなものであり、この値を大きくすると影が大きくなり、ゼロにすると影がなくなります。また、角を丸くする場合には(3)のようにshapeで指定可能です。

トグルボタン(ToggledButton)

 トグルボタンは、ボタンをグループ化して利用する場合のボタンです。また、単純なグループ化だけではなく、利用の可否を指定できます。リスト4がサンプルコードと実行結果が図5です。

図5:ToggleButtonsでスタイルを指定した場合の実行例
図5:ToggleButtonsでスタイルを指定した場合の実行例
[リスト4]ToggleButtonsを使ったサンプルコード(lib/button/ToggledButtonWidget.dartの抜粋)
// (1) ON/OFFの初期値定義
final isSelected = <bool>[true, false, false];
return ToggleButtons(
  // (2) ON/OFFの指定
  isSelected: isSelected,
  // (3) ボタンが押されたときの処理
  onPressed: (index){},
  // (4) 各ボタン表示の子ウィジェットの指定
  children: [
    Padding(
      padding: EdgeInsets.all(10.0),
      child: Text('Button 1'),
    ),
    Padding(
      padding: EdgeInsets.all(10.0),
      child: Text('Button 2'),
    ),
    Padding(
      padding: EdgeInsets.all(10.0),
      child: Text('Button 3'),
    ),
  ],
);

 ToggleButtonsは指定する各ボタンのON/OFFの状態を維持するので(1)のように初期状態を定義しています。そして、(2)のようにisSelectedに指定します。ボタンが押された場合には、(3)のonPressedで指定するメソッドが実行されます。このときに引数であるindexにはボタン配列の番号が設定されます。

 そして、実際に表示されるボタンには(4)のchildrenに指定します。このときにボタンの数とisSelectedで指定した配列数、つまり(1)と(4)の配列数は必ず同じにする必要があります。ToggleButtonsのスタイルも変更することが可能で、図6のように変更したコード例がリスト5です。

図6:ToggleButtonsでスタイルを指定した場合の実行例
図6:ToggleButtonsでスタイルを指定した場合の実行例
[リスト5]ToggleButtonsでスタイルを変更したときのサンプルコード(lib/button/ToggleddButtonWidget.dartの抜粋)
return ToggleButtons(

  //(省略)
  // (1) 枠の変更
  borderWidth: 2,
  borderColor: Colors.amber,
  // (2) 角マルにする
  borderRadius: BorderRadius.circular(5.0),
  // (3) 状態がONのボタンの文字色と枠の色
  selectedColor: Colors.white,
  selectedBorderColor: Colors.black54,
  // (4) 状態がONのボタンの背景色
  fillColor: Colors.red,
  //(省略)
)

 枠の太さと色を変更する場合には(1)のようにborderWidthとborderColorを指定します。また、全体の枠の角を丸くするには(2)のようにborderRadiusを指定します。そして、状態がONのボタンの文字色は(3)のようにselectedColorで指定し、枠の色を指定するにはselectedBorderColorを指定します。さらに、背景色を変更するには(4)のようにfillColorで指定可能です。


  • 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