【FlutterFlow】生産性爆上がり？「コンポーネント」を新規追加しよう

はい、こんにちは！FlutterFlowのUIビルダーの使い方などを紹介しております。

前回までの記事では、Navgationについて紹介しました。通ってきた経路（ページ）をジャンプして元のページに戻る方法などを知ることができました。

今回からは、コンポーネントを扱いたいと思います。「コンポーネント？ウィジェットじゃなくて？」と思う方もいると思います。私もそうでした！でも、ちょっと異なるものですよ。

では、早速いってみましょ～。

コンポーネントとは？

まずは、コンポーネントとは何かを知りましょう。参考にするのは、こちらの公式資料です。

コンポーネントとは、アプリ内で繰り返し使うことができる、カスタマイズされたウィジェットのことです。

アプリの部品という意味では、ウィジェットと同じですが、アプリ内独自の部品である点が異なります。

アプリ内のページには、共通の部品があり、それらは共通の外観と機能を持っているはずです。それを何回も作るのは大変なので、一つ作って繰り返し使えばいいではないか、という発想です。

このコンポーネントは、プログラミングでいうところの「DRY（Don't Repeat Yourself）の原則」に則ています。ようするに「同じコードをいろんなところに繰り返し書くのはやめよう」というのものです。この原則で、効率よくアプリ製作ができ、アプリの保守も楽になるというわけです。

コンポーネントを作ってみよう

と、御託を並べてみましたが、一つ試してみましょう！

コンポーネントは、一から作ることもできますし、テンプレートをカスタマイズして作ることもできます。

ダイヤモンドマークをクリックして、新しいコンポーネントを選択します（なんで、コンポーネントがダイヤのマークなのかしら？）。

コンポーネント作成の画面に切り替わります。おお～テンプレートが大量にありますね。このテンプレートを活かすことも、ある意味、「DRYの原則」に従っていると言えましょう。

messageというキーワードで検索して、下のコンポーネントを選ぶことにしました。

Use my themeをクリック

名前をつけて保存します。他のコンポーネントと名前を重複させることはできません。

はい、自分のコンポーネントとして一つ追加できました～。

コンポーネントのタブにコンポーネントが一覧が表示されていることにご注意ください。ページと同じように管理できるんですね～。

あとは良しなに自分でカスタマイズすればいいわけです。

はい、本日はここまで～。今回は、コンポーネントとは何か？を知るとともに、コンポーネントを実際に一つ追加してみました。

次回は、コンポーネントを再利用するところを紹介しましょう！

では～。