システム開発部のTです。
FlutterFlowというノーコードで開発できるツールがあったので、個人的な使用感とかを書いていきたいと思います。
なお、本編では無料プランで出来る範囲での所感になります。
また、一通り使ってみましたが、FlutterFlowだけでは全ての実装は厳しそうでした。
FlutterFlow
本件は、以下のサイトのツールを利用します。
以降の記事ではユーザー登録手順等は省略しています。
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」が配置されたかと思います。
ここのテキストをデモアプリ同様の文字列に置き換えてみましょう。
画面左のプロパティから変更可能です。
置き換え文字列は以下になります。
You have pushed the button this many times:置き換え後
同じように、カウンターも配置します。
フォントサイズは28にしました。
本来、TextStyleで指定しているのですが、指定手段が見当たらなかったので、フォントサイズのみの調整にしています。（うーん・・・）
レイアウトは以上になります。
最終的には、以下のようになっているはずです。
以降から、ボタン押下時の処理の実装に進みます。
ノーコードなFlutterFlowではどのように実装するのでしょうか・・・。
FloatingActionButton押下時の実装
FloatingActionButtonに合わせて、プロパティのところにActionタブがあります。
「＋AddAction」を押下してみましょう。
「On Tap」と出てくるので、それを選択。
onTapの内容をカスタマイズできるらしい・・・。
ActionTypeを押下。
タップしたときに値をインクリメントさせるアクションを追加したいのですが・・・。
ActionTypeを見てみると、そういう任意のアクションを実装できそうな選択肢が無い・・・。
・
・
・
まとめ
すいません。
いろいろと調査してみましたが、FlutterFlowではこれ以上のアクションは設定する手段が見当たりませんでした。ButtonのonTapイベントの実装に興味があったのですが、決められたアクションを選択肢から選んで設定するような感じで、選択肢以外の処理についてはFlutterFlow上では実装できないようでした。
一応、FlutterFlow上でレイアウトのソースコードは参照できるため、それをAndroidStudio等にコピペして、開発環境を移して実装は可能ですが、その時点でノーコードではないと思います。
HTMLみたいな静的画面であれば、FlutterFlowでも十分に利用できるかと思いました。
また、有料版であれば、Firebaseとかの外部APIも利用可能なので、アプリ作成の幅が広がるかと思いますが、凝った作りをするのであれば、オールノーコードは厳しいと思いました。
とはいえで、実際レイアウト組んでみましたが、確かにコードで組むよりは素早くレイアウトが組めたかな・・・という所感でした。正直、直にコーディングも可能にしてもらえれば、もっと使い勝手がよかったと思います。有料版だと使用可能になるのでしょうか。
皆さんも、興味あれば無料プランで使っていただければ、どういったものなのか分かるかと思います。
