🌟

FlutterFlow最新アップデート情報・日本語まとめ (〜2023/9/9)

2023/08/28に公開

FlutterFlow公式情報よりアップデートを記載します。随時更新予定。
FlutterFlowについての解説は以下記事をご参照下さい。
https://zenn.dev/sugawara/articles/02e2f119a363fb

2023/9/9

複数選択Dropdown

Multi-Select Dropdownでは、ユーザーがリストから複数の選択肢を選択できます。例えば、旅行アプリの場合、ユーザーは無料Wifiやスイミングプールなど、好みのアメニティを選択して物件を絞り込むことができます。

この新しいWidgetにより、より洗練されたユーザー体験を作ることができます。

Reorderable List(並び替え可能なリスト)

Reorderable Listを使えば、ユーザーが好きに項目を並べ替えることができるようになります。

例えば、ToDo管理のようなアプリで優先順位をつける際、タスク行を上下にドラッグして並び替えることができます。この機能により、ユーザーのエンゲージメントとアプリ内での滞在時間を高めることが可能になります。

この機能を使用するためには、プロジェクトにListViewを追加し、Reorderableをオンに切り替える必要があります。また、無限スクロールを有効にしている場合は使えません。

Firebaseパフォーマンスモニタリング

Firebaseパフォーマンスモニタリングを使うことで、リアルタイムのアプリパフォーマンスのデータを取得することができます。性能問題に早期に積極的に対処することで、ユーザー体験を向上させ、エンゲージメントを高めることができます。

この機能の追加は、Settings > Firebase > Performance Managementから可能です。

PinCodeのアップデート

• Pincodeをクリアするアクションが追加されました。
• Pincode Widgetの使用時に表示されるデフォルトのキーボードタイプを定義できるようになりました。

Custom Image For 404 Errors 🖼️

404エラーで表示する、独自のカスタム画像を設定できるようになりました。この追加機能により、エラーページにもブランド独自のアイデンティティを反映させることができます。

デプロイ履歴

デプロイ履歴の確認機能が追加されました。
WebおよびMobile 向けデプロイの日時とステータスが表示されるようになりました。
これにより、デプロイのステータスを追跡し、以前の成功したバージョンに戻すことがより簡単になります。

この新しいオプションは、[設定] > [Web Publishing]または[Mobile Publishing] > [Deployment History]で確認できます。

Pull to Refreshのアップグレード

読み込み中のIndicatorをカスタマイズできるようになりました。

ChoiceChipsのアップグレード

  • 角丸、背景色・文字色・アイコンカラー、幅の設定ができるようになりました
  • 選択できないChipの色の設定ができるように
  • ChoiceChips WidgetをWrap可能に

その他

• メモリ内/未アップロードの画像やPDFを表示できるようになりました!
• ボタンサイズを画面幅の%で設定できるようになりました。
• Check Box Widgetの選択/非選択時のテキストスタイルを定義できるようになりました。
• TextFieldの最大文字数を定義できるようになりました。
• CanvasKitをサポートしました。
• 画像を親の内側に配置するためのImage Alignmentプロパティを追加しました。
• キーボード(またはマウス)を使って、数値プロパティ(コンテナの幅など)を増減できるようになりました。
• 変数と条件を操作するためのUIを更新し、クリック数と開発時間を削減しました。
• Run、Test、Publish用のメニューを更新しました。
• Local StateのUIをより使いやすく更新しました。

2023/8/11

Splash画面のアップグレード

より高度なSplash画面のカスタマイズのための新機能を追加。

  • Splash画面の最小表示時間を設定可能になりました。
  • Splash画面を表示する最小時間を設定可能になりました。
  • WEB上でSplash画面を表示しないように設定可能になりました。

HeroAnimation(コンポーネント用)

HeroAnimationは、画面から別の画面への遷移をする際に、よりスムーズでシームレスに見せるエフェクトのことですが、コンポーネント用のHeroAnimationがサポートされ、より魅力的でまとまりのある画面遷移を作成できるようになりました。

TabBarの強化

TabBarを使うことでコンテンツを複数のセクションに整理し、表示されるコンテンツをすばやく切り替えることができます。以下の機能が強化されました。

  • TabBarがWidgetStateをサポートするようになりました。
  • 新しいTab変更アクションを追加しました。
  • 未選択のTabのフォントスタイルを定義できるようになりました。

デザイン周りのオプション強化 🎨

  • AutoSize Textの強化:最小フォントサイズと最大フォントサイズを設定できるようになりました。
  • ScrollBarの色の設定:ブランドカラーに合わせ、スクロールバーの色を設定できるようになりました。
  • Web Appsのステータスバーの色の設定: Wen Appsのカスタムステータスバーの色を定義できるようになり、アプリケーションに洗練されたタッチを追加できます。

Read Document From Reference アクション 📚

ReferenceからDocumentを読み込む新しいアクションが追加されました。これにより、ユーザーのプロフィールや商品の詳細など、必要な時に必要な情報を得るためにDocumentを読み込むことができます。

  • Design System(Teams/Enterpriseプラン用)でリアルタイムコラボレーションが可能になりました。
  • CustumCodeがFlutterFlowの依存関係をオーバーライドしている場合に表示する新しい警告を追加しました。
  • 新しいビルドを開始するとき、またはAPKやコードをダウンロードするときに、カスタムコードのバリデーションがオプションになりました。
  • POST & PUT & Patch APIのクエリパラメータをサポートしました。
  • TextFieldsのSubmit Typeを定義できるようになりました(キーボードにDone、Next、Returnなどを表示するかどうかなど)。

2023/7/21

FlutterFlowコミュニティのリニューアル

  • トピック別フォーラム: APIやカスタムコードなど特定のトピックに特化したフォーラムを導入し、必要な情報を得やすくなりました。
  • 検索機能の改善: 検索機能がアップグレードされ、質問に対する回答をより簡単に見つけることができるようになりました
  • Jobボード:協業先を見つけ、新しいキャリアの機会を探索します。
  • ShowCase:FlutterFlowを使って作ったアプリを紹介できます
  • プロフィールの強化: 強化されたユーザープロフィールで、あなたの経験についてより多くのことを共有できるように。
  • WishList: 希望する新機能や、連携機能について投票できます。
    新しいコミュニティに参加するには、AccountResourceページ > CommunityResourse > FlutterFlow Communityを開いてください。

Loopアクション

Action内で "while"でのループがサポートされました。

無限スクロール機能対応

より多くのリスト系Widgetに無限スクロール機能が追加されました。
PageView、GridView、StaggeredViewに無限スクロールのサポートが追加されました。この新機能は簡単に実装でき、より良いユーザー体験を構築するのに役立ちます。

ユーザーがPageViewでフォトアルバムをめくっているときでも、GridViewで商品を閲覧しているときでも、StaggeredViewでPinterestのようなレイアウトを閲覧しているときでも、無限スクロールはシームレスなコンテンツの流れでユーザーを惹きつけます。

Actionの一時無効化

Actionを無効にする新しいオプションが追加されました。この機能はデバッグ時に、特定のアクションを一時的に無効化(またはコメントアウト)することができます。

Widgetの不透過率(Opacity)が選択可能に

WidgetのOpacityを定義できるようになりました。この新機能は、透明なボタンから目を引くオーバーレイ効果まで、創造的な可能性の全く新しい世界を開きます。

特典プログラムの追加

新しいFlutterFlow Perks Programでは、Google Cloud、Algoliaなどのパートナーから50,000ドル以上の割引を提供しています。

FlutterFlowダッシュボードの "Perks Program "タブに移動して、特典をご確認ください!

  • Firebaseに最初にアップロードしたLocalファイル(Bytes)をアップロードできるようになりました。
  • FirebaseまたはSupabase認証使用時に、ユーザーのメールアドレスを更新するアクションを追加しました。
  • オーディオプレイヤーをバックグラウンドで再生し続けるオプションを追加しました。
  • Webアプリケーションで、HTMLの代わりにCanvasKitレンダラーを使用できるようになりました。
  • (yyyy/MM/DDなど)独自の日付フォーマットを追加できるようになりました。
  • キーボードの矢印を使用して、縦または横のリスト内で項目を移動できるようになりました。

2023/7/8

FlutterFlow AI Gen 公開

FlutterFlow AI Genが全ユーザーに公開されました。

  • Page生成:作りたいものを記述して、AIでUI開発を始められます。
  • Schema生成:あなたのアイデアを数秒でバックエンドSchemaに変換します。
  • Component生成:再利用可能なアプリコンポーネントを即座に構築します。
  • Theme生成:テキストの説明からユニークで美しい配色を簡単に作成できます。
  • Code生成:ChatGPT Turboでパワーアップした新しいAIコードアシスタントをが利用できます。

参考:
https://flutterflow.us2.list-manage.com/track/click?u=544d5264f5e71e5fa379d41f5&id=aae98b632e&e=77a24b0be8

データ変更トリガーのAction 📄

Firestoreでデータが更新されたときにアクションをトリガーできるようになりました。この新機能により、たとえばDocumentのフィールドの値が変更されたときに自動的に新しいページに移動するなど、データの更新を動的に処理できるようになります。

複数ファイルのアップロード

ファイルアップロードのActionにて、ユーザーが一度に複数のファイルをアップロードできるようになりました。この機能強化により、OnBoarding時のKYCフローの一環として複数の書類をアップロードするような作業を省力化でき、ユーザーのエクスペリエンスが大幅に向上します。

GitHub Firebase Auth 😸

GitHub の認証情報を使ってサインインできるようになりました。この新機能を追加するには、数回ポチポチするだけ!

WidgetTree内からWidgetの削除が可能に 💡

WidgetTree内での作業をより簡単にするために、新しいWidgetの削除機能を追加しました。Widgetを選択 > 右クリック > Remove Widgetで削除できます。
この新機能は、階層内の次の親に再割り当てすることで、子ウィジェットの削除を回避します。

  • Componentに複数のActionパラメータを指定できるようになりました。
  • BottomSheet Actionで使用するComponentにActionパラメータを渡せるようになりました。
  • HTML文字列からウェブビューのコンテンツを設定できるようになりました。
  • Supabase認証ユーザーのためのSupabase JWT Tokenフィールドをサポートしました。
  • Firebase/Supabaseストレージにローカルファイル(バイト)をアップロードできるようになりました。

2023/6/21

Firestore Query Action

Firestore Queryをトリガーする新しいActionを追加しました。
この機能により、Actionがトリガーされたときに関連するデータを読み込むことができます。

これにより、実際に必要な時だけ必要なデータを読み込むことで、より効率的で、レスポンスが良く、ユーザーフレンドリーな体験を提供します。

Sticky Header Widget 🍯

Sticky Headerは画面上部に固定され、残りのコンテンツは下にスクロールするWidgetです。
例えば、Airbnbでリスティング広告をスクロールしている間、検索バーとフィルターは画面上部に固定されます。 これがSticky Headerです。

Audio Recording 🎙️

音声録音の開始と停止のための新しいアクションが追加されました。音声ベースのインタラクションを簡単に構築できるようになりました。この機能により、メモアプリで音声メモを録音したり、言語アプリで発音の練習をしたりといった、新機能が可能になります。

要素の間隔をより簡単に設定できるように 💡

新しいitems spacingプロパティにより、Row・Column・ListViewの子要素間に定義されたスペースを自動的に適用することができるようになりました。

Unsplash画像検索機能 🖼

Unsplashとの統合により、FlutterFlow内からUnsplashの画像を閲覧、追加することができます。

  • Uploadされたファイル(Bytes)とUint8ListがCustumActionと関数の引数で使用できるようになりました。
  • アプリで使用するKotlinのバージョンを設定できるようになりました。
  • TextFieldsのカーソルカラーとカスタムエラーメッセージのスタイルを定義できるようになりました。
  • ActionListを再編成し、「State Management(状態管理)」「Utility(ユーティリティ)」、「Integrations(統合)」の3つの新しいカテゴリーを追加しました。
  • 右クリックでWidgetメニューを開く新しいショートカットを追加しました。

Discussion