【Flutter】アイコン付きOutlinedButtonを作成する2つの方法

2024年6月7日2025年2月24日

未経験から最短3カ月でプログラマーへ！！【０円スクール】

この記事はで読むことができます。

この記事でわかること

OutlinedButtonにアイコンを追加する方法
アイコン付きOutlinedButtonのカスタマイズ方法

アプリ開発に必須なキャッチコピーやテキストをAI（人工知能）が自動作成

目次閉じる

はじめに
まとめ

はじめに

OutlinedButtonはFlutterで頻繁に使用されるボタンの一つで、アイコンを追加することで視覚的な情報を増やし、ユーザーエクスペリエンスを向上させることができます。本記事では、OutlinedButtonにアイコンを追加する2つの方法を紹介します。

方法1:OutlinedButton.iconを使用する

OutlinedButton.iconを使用することで、アイコンとテキストを同時に設定可能。

Dart

OutlinedButton.icon(
  onPressed: () {
    // ボタンが押された時の処理
  },
  icon: Icon(Icons.flutter_dash), // アイコンを指定
  label: Text('アイコン付きボタン'), // ボタンのテキストを指定
)

アイコンとテキストの位置が自動的に整列され、デザインが一貫性を保つ。

方法2:Rowウィジェットを使用してカスタムアイコン付きボタンを作成

Rowウィジェットを使用することで、アイコンとテキストのレイアウトをカスタマイズ可能です。

Dart

OutlinedButton(
  onPressed: () {
    // ボタンが押された時の処理
  },
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.thumb_up), // アイコンを追加
      SizedBox(width: 8), // アイコンとテキストの間にスペースを追加
      Text('いいね'), // ボタンのテキスト
    ],
  ),
)

SizedBoxでアイコンとテキストの間にスペースを調整できる。