micomia

Blog

技術記事

Icon Buttonとは？｜初心者向けのFlutterFlow徹底解説

Icon Buttonとは？｜初心者向けのFlutterFlow徹底解説

micomia株式会社の井上です。今回はIcon Buttonについて解説していきます。

初心者にも分かりやすく解説していくのでぜひご一読ください。


目次



1. Icon Buttonとは

Icon Buttonはその名の通りアイコンとボタンの機能を組み合わせたものになります。

アイコンとボタンそれぞれの機能に関しては別の記事で紹介しているのでそちらをご覧ください。


Iconとは？｜初心者向けのFlutterFlow徹底解説


Buttonとは？｜初心者向けのFlutterFlow徹底解説


2. Icon Buttonの実装方法

Icon Buttonはその他のWidgetと同じように追加できます。


image


3. Icon Buttonの詳細設定

Button Default Styleの箇所にある部分から見ていきます。

まずButton SizeはIcon Button自体のサイズを変更できます。


image

image

その下にあるFill ColorはIcon Button自体のカラーを変更できます。


image

カラーをつけたくない場合は右側の×アイコンを押すことで削除できます。


image

下にあるBorder Colorは枠線のカラーを設定できます。設定方法は先ほどのFill Colorと同様です。

その横にあるBorder Widthは枠線の太さを設定できます。


image

Border Radiusは枠線の丸みを調節できます。


image

その下にあるIcon Propertiesのエリアでは中に表示されているIconに関する設定をできます。


image

image

その下にあるShow Loading Indicatorは、ONにするとIcon Buttonを押した時にローディングの表示がされます。


image

その下のDisableは、ONにするとIcon Buttonを押しても何も起こらない(Actionがない)状態にできます。


image

一番下にあるButton Hover Styleは、ホバー(カーソルが合わせられた状態)の色を変えることができます。


image

また、画面遷移などのActionをつける場合は他のWidgetと同じようにAdd Actionから追加できます。


image

Icon Buttonがよく使われている例としては、App Barの左側のものです。ここにはNavigate Backというアクションをつけて前の画面に戻すことが多いです。


image


4. さいごに

今回はIcon Buttonについて解説していきました。IconとButtonの機能が合わさった非常に便利なWidgetになっているのでぜひ本記事を参考にしながら実装してみてください。

本記事の内容を動画で見たい方は以下をご覧ください。


image

動画でもっと知りたい方はこちら


井上花琳

micomia株式会社でプロジェクトマネージャーを担当しています。 FlutterFlowを活用したアプリ開発プロジェクトを複数統括し、そのノウハウを発信しています。

記事一覧に戻る

関連記事

ノーコードでアプリ開発はどこまでできる？Adalo→FlutterFlow移行の実例で限界と本番化を解説
ノーコード・FlutterFlow

ノーコードでアプリ開発はどこまでできる？Adalo→FlutterFlow移行の実例で限界と本番化を解説

ノーコードアプリ開発のリアルを開発会社が解説します。Adalo・Glideなど無料ツールの特徴と限界から、FlutterFlowへ移行した実例まで紹介し、どこまで作れてどこで限界を感じるのかを、実際の本番開発の経験をもとにお伝えします。

【これ一本で丸わかり】FlutterFlowとは？できること・料金・日本語対応・iOS/Android開発までわかりやすく解説
ノーコード・FlutterFlow

【これ一本で丸わかり】FlutterFlowとは？できること・料金・日本語対応・iOS/Android開発までわかりやすく解説

FlutterFlowとは何か、できること・料金プラン・日本語対応・iOS/Android対応状況を開発会社が本音で解説します。複数アプリをApp Store・Google Playへリリースした経験から、メリットもデメリットも紹介します。

FlutterFlowとFlutterの違いとは？特徴・開発スピード・使い分けを徹底比較
ノーコード・FlutterFlow

FlutterFlowとFlutterの違いとは？特徴・開発スピード・使い分けを徹底比較

FlutterFlowとFlutterは何が違うのかを、開発スピード・カスタマイズ性・必要スキルの3軸で比較します。MVPや社内ツールにはFlutterFlow、高度な処理や独自UIにはFlutter、プロジェクト別の使い分けが分かります。

植物専門SNS「でぃぐりーん」開発記録｜初心者が最初の一鉢を買えない課題をアプリで解決した方法
開発ストーリー

植物専門SNS「でぃぐりーん」開発記録｜初心者が最初の一鉢を買えない課題をアプリで解決した方法

植物初心者の「どれを買えばいいか分からない」という悩みを解決するために開発した、植物専門SNS『でぃぐりーん』の開発記録です。専門SNSを作る前の現場体験、MVPでのスピード開発、位置情報を使ったUX、AI機能まで全体をまとめました。

建材特化フリマアプリ「Mate-Re:」開発記録｜業界特化設計・決済・UI/UXの裏側
開発ストーリー

建材特化フリマアプリ「Mate-Re:」開発記録｜業界特化設計・決済・UI/UXの裏側

建設現場で廃材が捨てられてしまう課題から生まれた、建材特化フリマアプリ『Mate-Re:』の開発記録です。業界特化の設計思想や現場目線のUI/UX、Stripe Connectを使った決済実装、循環経済を意識した設計までまとめました。

医療従事者向けSNS「メディカルサークル」開発記録｜信頼感のUI設計・RevenueCat課金・コミュニティ安全設計の裏側
開発ストーリー

医療従事者向けSNS「メディカルサークル」開発記録｜信頼感のUI設計・RevenueCat課金・コミュニティ安全設計の裏側

医療従事者専用SNS『メディカルサークル』の開発記録です。医療情報を安全に共有するための設計、RevenueCatを使った課金実装、コミュニティの安全設計、専門家認証機能まで、信頼感を重視した開発の裏側を解説します。

建設現場向け日本語学習アプリ「ゲンゴー」開発記録｜外国人技能実習生・多言語対応・4択クイズ設計の裏側
開発ストーリー

建設現場向け日本語学習アプリ「ゲンゴー」開発記録｜外国人技能実習生・多言語対応・4択クイズ設計の裏側

建設現場で働く外国人技能実習生に向けた日本語学習アプリ『ゲンゴー』の開発記録です。多言語対応や4択クイズの設計、建設業界に特化した学習コンテンツの設計思想まで、ニッチ特化アプリを作る裏側を解説します。

園芸サポートアプリ「グリラボ」開発記録｜初心者向けUI・育成ガイド・楽しさ設計の裏側
開発ストーリー

園芸サポートアプリ「グリラボ」開発記録｜初心者向けUI・育成ガイド・楽しさ設計の裏側

植物初心者が「続けられない」という課題を解決するために開発した、園芸サポートアプリ『グリラボ』の開発記録です。文字を詰め込まないUI設計、育成ガイド、ゲーミフィケーション、AI機能の役割分担まで全体をまとめました。

FlutterFlowでできないこと｜開発会社が実例で解説する限界と回避策
発注ガイド

FlutterFlowでできないこと｜開発会社が実例で解説する限界と回避策

FlutterFlowが苦手とするStripeのサブスク決済や帳票生成、セキュリティ・デザイン自由度の制約を、開発会社が実例つきで整理しました。どこで限界に当たり、どう回避してFlutterと使い分けるかの判断基準まで分かります。

アート特化SNSアプリ「Artl」開発記録｜作品ファースト設計・「鑑賞しました」・トリミングしない展示の裏側
開発ストーリー

アート特化SNSアプリ「Artl」開発記録｜作品ファースト設計・「鑑賞しました」・トリミングしない展示の裏側

アート特化SNS『Artl』の開発記録です。作品を主役に置く『作品ファースト』の設計や、クリエイターが使いやすい投稿体験の実装、Firebase連携、コミュニティ設計の裏側を、開発者の視点から解説します。

AI駆動開発の注意点｜開発会社が実践してわかった「速いけど危うい」落とし穴と対策
発注ガイド

AI駆動開発の注意点｜開発会社が実践してわかった「速いけど危うい」落とし穴と対策

AI駆動開発は速さの裏で落とし穴も増えます。曖昧な指示でかえって遅くなる、セキュリティや依存関係の見落とし、コードの一貫性の崩れといった注意点と対策を、非エンジニアが陥りやすい権限・データ保存の失敗もあわせて解説します。

AI野球コーチアプリ「NEOLAB AI」開発記録｜スポーツ×AI・チャットUI・個別最適化の設計思想
開発ストーリー

AI野球コーチアプリ「NEOLAB AI」開発記録｜スポーツ×AI・チャットUI・個別最適化の設計思想

AI野球コーチアプリ『NEOLAB AI』の開発記録です。スポーツ×AIという組み合わせや、チャットUIで個別指導を届ける仕組み、一人ひとりに最適化する設計思想まで、開発の背景と技術的な工夫を開発者が解説します。

ECサイトをシステム会社に発注するなら「要件リスト」を先に揃えるべき！｜10領域の全項目チェックリスト
発注ガイド

ECサイトをシステム会社に発注するなら「要件リスト」を先に揃えるべき！｜10領域の全項目チェックリスト

ECサイトをシステム会社へ発注する前に要件を整理しないと、見積もりのズレや追加費用が生じやすくなります。決済・配送・会員管理・管理画面・外部連携など10領域の全項目をチェックリスト形式でまとめ、発注前に押さえるべき要件が分かります。

アプリ開発を依頼するには？費用・流れ・依頼先の選び方を開発会社が解説｜micomia
発注ガイド

アプリ開発を依頼するには？費用・流れ・依頼先の選び方を開発会社が解説｜micomia

アプリ開発を依頼するときの流れを、要件整理から開発会社選定・見積もり比較・契約・開発・リリースまでの6ステップで整理しました。費用の目安やフリーランスと開発会社の違い、依頼先の具体的な選び方まで開発会社が分かりやすく解説します。

アプリ開発費用の相場と内訳｜種類別の目安・予算を抑えるコツ・依頼前の整理ポイントを開発会社が解説
発注ガイド

アプリ開発費用の相場と内訳｜種類別の目安・予算を抑えるコツ・依頼前の整理ポイントを開発会社が解説

アプリ開発費用の相場はSNS・マッチング・業務系など種類で大きく変わります。ノーコード・MVP・フルスクラッチそれぞれの費用目安と内訳、予算を抑えるコツや依頼前に整理しておきたいポイントを開発会社が分かりやすく解説します。

恋愛系マッチングアプリを作りたいと思ったら読む記事｜開発会社が教える、作る前に詰めるべきこと
発注ガイド

恋愛系マッチングアプリを作りたいと思ったら読む記事｜開発会社が教える、作る前に詰めるべきこと

恋愛系マッチングアプリの開発で失敗しないために、作る前に詰めておきたい6つのポイントを解説します。ターゲット設定やマネタイズ、不正ユーザー対策、年齢確認の実装、プロフィール設計、マッチングアルゴリズムまで押さえるべき要点が分かります。

省人化とは？意味・読み方と中小企業のバックオフィス業務で進める具体的な方法
DX

省人化とは？意味・読み方と中小企業のバックオフィス業務で進める具体的な方法

省人化は業務プロセスを自動化・効率化し、少ない人員で仕事を回す取り組みです。RPA・AI・クラウドを使った中小企業のバックオフィス省人化を4つのパターンに整理し、実践の手順まで具体的にまとめました。

SNSアプリの作り方完全ガイド｜開発費用・作成手順・必要機能・成功事例まとめ
開発Tips

SNSアプリの作り方完全ガイド｜開発費用・作成手順・必要機能・成功事例まとめ

SNSアプリの作り方を、パッケージ開発とオーダーメイド開発に分け、費用・機能・開発期間・ターゲット設定の4観点で比較します。依頼前に整理すべき点や費用相場を、SNS開発の実績がある開発会社が解説します。

システム受託開発とは？依頼前に知るべき流れ・契約形態・費用相場
発注ガイド

システム受託開発とは？依頼前に知るべき流れ・契約形態・費用相場

システム受託開発の流れを、要件定義から設計・開発・テスト・納品までの5工程に沿って整理しました。請負契約と準委任契約の違い、50万〜1000万円以上という費用相場の考え方、信頼できる開発会社の選び方まで発注前に分かります。

要件定義が曖昧でも相談してよいのか｜アプリ開発の進め方をわかりやすく解説
発注ガイド

要件定義が曖昧でも相談してよいのか｜アプリ開発の進め方をわかりやすく解説

要件定義がまだ固まっていなくても、開発会社に相談して問題ない理由を解説します。曖昧な状態から要件を一緒に整理していくサポート体制や進め方の実際を紹介し、アイデア段階でも相談してよいと分かる内容にまとめました。

Icon Buttonとは？｜初心者向けのFlutterFlow徹底解説 | micomia株式会社