システム開発部のTです。FlutterFlowというノーコードで開発できるツールがあったので、個人的な使用感とかを書いていきたいと思います。なお、本編では無料プランで出来る範囲での所感になります。また、一通り使ってみましたが、FlutterFlowだけでは全ての実装は厳しそうでした。 FlutterFlow 本件は、以下のサイトのツールを利用します。以降の記事ではユーザー登録手順等は省略しています。 https://app.flutterflow.io/ FlutterFlowについて 本編では詳しい説明は省略しますが、以下のサイトの記事が非常にわかりやすく記載されていました。 はじめてのFlutterFlow https://zenn.dev/yujitakase/articles/0699ba82e2bd75 本編では、無料プランにて使っていきたいと思います。 Create New ログイン後、以下のページが表示されます。「＋Create New」を押下し、プロジェクトを生成しましょう。 Project Nameに任意のプロジェクト名を設定します。本編では「FlutterDemoApp」としました。その後、「Blank App」の「＋Create New」ボタンを押下します。 以下の画面に遷移するので、そのまま「Skip」を押下してください。「Next」を押下すると、FlutterFlowについての解説、チュートリアルに進むことができます。 以下の画面まできたら、開発準備完了です。 デモアプリ作成 本編では、いつものデモアプリとして、インクリメンタルアプリを作っていきたいと思います。 Flutterでプロジェクト生成した直後に出来ているデモアプリですね。このアプリをFlutterFlowで作れるのか検証してみたいと思います。 AppBarの配置 まずは、手始めにAppBarの配置をしてみましょう。以下のように、Widgetパネルから「AppBar」をドラッグ＆ドロップで配置できます。 今度はタイトルを配置してみましょう。「Text」Widgetをタイトル位置に持っていきます。ドロップしたときに、AppBarに配置するか、Scaffold上に配置するかを選択できますので、今回はAppbarに配置を選択しましょう。 Textがタイトル位置に配置されました。 タイトルの文字列を変更します。本編では「Flutter Demo Home Page」にしています。 右下の「Show Default Button」のチェックをOFFすると、戻るボタンを非表示にできます。 FloatingActionButtonの配置 カウンターのインクリメントするための「＋」ボタンを配置します。PageElementsに「FAB」というWidgetがあるので、それを配置します。 ボタン配置後、そのボタンに「＋」アイコンを設定します。BaseElementsに「Icon」Widgetがあるので、それをボタンに向かってドラッグ＆ドロップします。 配置箇所を聞かれるので、「FloatingActionButton」を選択します。 以下のように配置できたかと思います。 アイコンを「＋」に変更し、アイコン色も白にします。アイコンサイズはデフォルトの24のままにしておきます。 以下、変更後。 その他のWidgetの配置 残りは画面真ん中あたりに表示するラベルとカウンターですね。本来のデモアプリの構造では、Centerを配置したあと、Columnを配置して・・・という流れだったと思います。しかし、FlutterFlow上のWidgetsを確認したところ「Center」がどこにも存在していません。とはいえで、Columnだけでも配置できたので、その手順を記載していきます。 「Column」をドラッグ＆ドロップします。 配置先を聞かれるので、「Scaffold」を選択します。 配置後、AlignmentのHorizontal、およびVerticalの値を「0」にし、MainAxisAlignmentを「Center」にすることで、Columnの子Widgetが真ん中に寄ります。この状態で、TextWidgetを配置していきましょう。 TextWidgetを選択肢、Columnに向かってドラッグ＆ドロップします。 配置箇所はColumnなので、Columnを選択します。 画面中央に「Hallo World」が配置されたかと思います。ここのテキストをデモアプリ同様の文字列に置き換えてみましょう。画面左のプロパティから変更可能です。 置き換え文字列は以下になります。 置き換え後 同じように、カウンターも配置します。フォントサイズは28にしました。本来、TextStyleで指定しているのですが、指定手段が見当たらなかったので、フォントサイズのみの調整にしています。（うーん・・・） レイアウトは以上になります。最終的には、以下のようになっているはずです。 以降から、ボタン押下時の処理の実装に進みます。ノーコードなFlutterFlowではどのように実装するのでしょうか・・・。 FloatingActionButton押下時の実装 […]

Read more of this post