【5分でわかる】アイコンボタン(iconbutton)を実装する方法

ども、木村です。本業はデータサイエンティスト、副業でアプリ開発をしています。

本記事では、Flutterでアイコンボタン(iconbutton)を実装する方法について解説していきます。

想定読者

Flutterでアイコンボタン(iconbutton)を実装したい方

アイコンボタン(iconbutton)を実装する方法

アイコンボタン(iconbutton) とは？
アイコンボタン(iconbutton)を実装する

まとめ

アイコンボタン(iconbutton)を実装する方法

アイコンボタン(iconbutton) とは？

ボタンとして利用できるアイコンのことです。

今回はこちらのボタンを実施に実装してみましょう。

アイコンボタン(iconbutton)を実装する

アイコンボタン(iconbutton)を実装するには、IconButton を利用します。

IconButton class - material library - Dart API

API docs for the IconButton class from the material library, for the Dart programming language.

こちらのウィジェットにより標準で用意されたマテリアルアイコンを簡単にボタン化することが可能です。

以下のような形式で設定します。

IconButton(
           icon: const Icon(Icons.<設定したいアイコンのID>),
           tooltip: ＜ボタンを触ったら表示したい文字列＞,
           onPressed: () {
             ＜ボタンを押したら実行したい処理＞
           },
         ),

マテリアルデザインのアイコンの設定方法については以前紹介した以下の記事をご参考ください。