MENU
SwiftUI/Flutter/Vue等でアプリ開発
  1. ホーム
  2. dev
  3. Flutter
  4. [Flutter] Icon ウィジットの使い方

[Flutter] Icon ウィジットの使い方

Flutter

FlutterのIconウィジェットは、アプリケーション内で簡単にアイコンを表示するための強力なツールです。この記事では、FlutterのIconウィジェットの使い方と基本的な機能について詳しく説明します。

目次

基本的な使い方

Iconウィジェットを使用するためには、次のように記述します。

Icon(
  Icons.favorite,
  color: Colors.red,
  size: 24.0,
)

上記の例では、”favorite”というアイコンが赤色でサイズ24.0で表示されます。Iconsクラスにはさまざまな組み込みアイコンが定義されており、お好みのアイコンを選択できます。

Iconウィジットで利用できる、組み込みのMaterial Iconsアイコン一覧は以下のページから参照することができます。

公式サイト
Icons class – material library – Dart API API docs for the Icons class from the material library, for the Dart programming language.

アイコンのカスタマイズ

Iconウィジェットは、表示するアイコンの外観をカスタマイズするためのいくつかのプロパティを提供しています。以下に例を示します。

Icon(
  Icons.shopping_cart,
  color: Colors.green,
  size: 36.0,
  semanticLabel: 'カート',
)
  1. icon:
    • 型: IconData
    • 必須のプロパティです。表示するアイコンを指定します。
    • 例: Icons.favorite
  2. size:
    • 型: double
    • アイコンのサイズを指定します。デフォルト値は24.0です。
    • 例: size: 30.0
  3. color:
    • 型: Color
    • アイコンの色を指定します。デフォルト値は親ウィジェットのテーマの色です。
    • 例: color: Colors.red
  4. semanticLabel:
    • 型: String
    • アイコンのセマンティックラベルを指定します。スクリーンリーダーなどのアクセシビリティ機能で使用されます。
    • 例: semanticLabel: 'カート'
  5. textDirection:
    • 型: TextDirection
    • アイコンのテキスト方向を指定します。デフォルトでは親ウィジェットのテキスト方向が適用されます。
    • 例: textDirection: TextDirection.rtl
  6. key:
    • 型: Key
    • ウィジェットの一意のキーを指定します。

アイコンの配置

Iconウィジェットは、他のウィジェットと組み合わせて使用することもできます。例えば、次のようにしてAppBar内にアイコンを配置することができます。

AppBar(
  title: Text('アプリタイトル'),
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.settings),
      onPressed: () {
        // 設定ボタンが押された時の処理
      },
    ),
  ],
)

上記の例では、AppBarの右側に設定アイコンが表示されます。IconButtonウィジェットを使用してIconウィジェットをボタンとして扱い、onPressedコールバックを指定することでボタンのクリックイベントを処理できます。

フラットアイコンの使用

FlutterのIconウィジェットは、組み込みのMaterial Iconsだけでなく、さまざまなフラットアイコンセットもサポートしています。例えば、FlutterアプリでFontAwesomeアイコンを使用する場合は、以下の手順に従います。

まず、pubspec.yamlファイルにfont_awesome_flutterパッケージを追加します。

dependencies:
  font_awesome_flutter: ^10.4.0

その後、パッケージをインポートします。

import 'package:font_awesome_flutter/font_awesome_flutter.dart';

次に、FontAwesomeIconsクラスからアイコンを選択して使用します。Iconウィジットの代わりにFaIconを利用します。

FaIcon(
  FontAwesomeIcons.baseball
)

FaIconもIconウィジット同様のプロパティを使用して、サイズ変更等が可能です。

  1. icon:
    • 型: IconData
    • 必須のプロパティです。表示するアイコンを指定します。
    • 例: Icons.favorite
  2. size:
    • 型: double
    • アイコンのサイズを指定します。デフォルト値は24.0です。
    • 例: size: 30.0
  3. color:
    • 型: Color
    • アイコンの色を指定します。デフォルト値は親ウィジェットのテーマの色です。
    • 例: color: Colors.red
  4. semanticLabel:
    • 型: String
    • アイコンのセマンティックラベルを指定します。スクリーンリーダーなどのアクセシビリティ機能で使用されます。
    • 例: semanticLabel: 'カート'
  5. textDirection:
    • 型: TextDirection
    • アイコンのテキスト方向を指定します。デフォルトでは親ウィジェットのテキスト方向が適用されます。
    • 例: textDirection: TextDirection.rtl
  6. key:
    • 型: Key
    • ウィジェットの一意のキーを指定します。

アイコンの動的な変更

アプリケーションの状態に応じてアイコンを動的に変更する場合は、IconウィジェットをStatefulWidgetと組み合わせて使用します。例えば、以下のようなコードを考えてみましょう。

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  bool isFavorite = false;

  @override
  Widget build(BuildContext context) {
    return IconButton(
      icon: Icon(
        isFavorite ? Icons.favorite : Icons.favorite_border,
        color: Colors.red,
      ),
      onPressed: () {
        setState(() {
          isFavorite = !isFavorite;
        });
      },
    );
  }
}

上記の例では、アイコンをお気に入りアイコンと非お気に入りアイコンの間で切り替える動的なアイコンボタンを作成しています。ボタンが押されるたびにsetStateメソッドを使用して状態を更新し、アイコンが切り替わります。

まとめ

この記事では、FlutterのIconウィジェットの基本的な使い方、アイコンのカスタマイズ方法、他のウィジェットとの組み合わせ、フラットアイコンの使用方法、およびアイコンの動的な変更について説明しました。Iconウィジェットは、アプリケーションにアイコンを追加するための柔軟でパワフルなツールです。ぜひ活用しましょう！

Flutter
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次