FlutterFlow | ローコードで本格アプリ製作

208

本

Flutterにスーパーパワーを授ける！「Flutter」は、美しいUIのスマホアプリを製作できるフレームワークです。その「Flutter」をローコードで利用できるようにしたのが… もっと読む

運営しているクリエイター: 松井真也＠登録セキスペ

【FlutterFlow】AppBarの子要素が追加できない？まずはスタイル設定から始めよう！

はい、こんにちは～。GWですね～。私は9連休！旅行する2日間を除いて、私は全力で勉強や発信をしていきます！もちろん、楽しみながらね！前回からの続きです。FlutterFlowのAppBarについて紹介してきましたが、今回は、詳細設定を見ていくことにします。「Sliverもやったし、もうやることないんじゃない？」と思いますか？そうですね、Sliverはスゴイ機能でした。ところが、まだまだAppBarの設定の重要な部分を紹介していないのです。ということで、AppBar

【FlutterFlow】オプションから選んで、AppBarの動き方に変化をつけよう：Sliver

前回記事からの続きです。前回は、AppBarでSliverの設定をする方法をご紹介しました。スクロールによってAppBarの見え方が変化するって、なんか楽しいですよね。皆様のアプリに面白さを加える要素になりそうです！今回は、このSliverでできる設定をもっとお見せしましょう。レッツゴー♪ App Bar Behaviorに存在するオプションはい、今回は、前回の記事でご紹介したウィジェットの設定をそのまま使ってまいります。現在、キャンバスは下図のように表

【FlutterFlow】AppBarにイフェクトを加えて、あなたのアプリがもっと華やかになる：Sliver

はい、前回記事の続きです。FlutterFlowでAppBarの使い方を紹介しています。前回は、AppBarを追加し、子要素を配置してみましたね。３つのセクションに分かれているところがミソでした。さて、今回は、SliverAppBarに挑戦します！Sliver（スリバー）？聞いてことないですね。私は、Silver（銀）かと、空目しましたw。これは、上下にスクロールしたときに、AppBarの高さや見え方が変わるという特殊なイフェクトを加えられるものです。例えば、

【FlutterFlow】実は３つのセクションで構成されていた：AppBar

はい、こんにちは～。FlutterFlowのUIビルダーを紹介しております。今回は、、、AppBarでございます。え、今さら感がハンパない？ああ、確かに、新しいページを追加すると最初からウィジェットが存在していますからね。馴染みはある。が、しかし！メインエリアの方に注力しすぎて、この重要なウィジェットをスルーしてきたのは誰ですか？はい、私でございます～！。このAppBarは、そのページのコンテンツは何かを教えてくれたり、アクションや検索バーを追加できたり、しま

【FlutterFlow】カードがひっくり返るアニメーションをカンタンに実現：FlippableCard

こんにちは～。FlutterFlowのUIビルダーの使い方を連続で紹介中です♪。投稿数も100を超えて、Google検索でもだいぶヒットするようになりました。読者様のおかげです！さて、今回はFlippableCardについてご紹介します。ん、これも単語の意味がすぐに頭に入ってこないやつですね…。直訳すると、「裏返しできるカード」ということです。カードをひっくり返すようなアニメーションを付けられます。最初はカードの表面が表示されるのですが、タップすると、その裏面が表示さ

【FlutterFlow】カードをめくるような操作感を実現！Swipable Stack

こんにちは。FlutterFlowの使い方を紹介する連載をしておりますが、だんだん応用的な紹介が増えてきました。今回は、SwipableStackです～。スワイプすることで次のアイテムを表示できるあのUIを実現しようというわけですよ。イメージとしては、アイテムをトランプに重ねておいて1枚ずつ、指で滑り落とす感じですね。ときどき見かけるＵＩですが、やはりFlutterFlowでも実装できます。よしいってみよ～。 SwipableStackを追加するでは、さっそ

ブログ生成、商品解説もばっちり！ビジネス特化型テキスト生成AI「Jasper」：ChatGPTとの違いやその特徴は？

Jasperは、ビジネス利用に特化した生成AIです。LinkedIn記事、広告、ブログ投稿、電子メール、ウェブサイトコピー、AIアートを作成するためのAIツールです。Chrome拡張機能を備えています。商用利用のロイヤリティフリーの文章を取得できます。ChatGPTと比較して、その魅力を紹介しています。

【FlutterFlow】これで完璧！StaggeredViewの詳細設定

こんにちは。昨日は、NoCodeCampの3周年記念会に参加してきました。熱量が高く、行動力のある方ばかりで刺激されまくりです～！さて、前回記事の続きです。前回は、StaggeredViewを紹介しました。高さの異なる画像を配列するウィジェットです。今回は、このStaggeredをカスタマイズしていきます。設定できる項目は、多くないですが、だからこそ、それらの設定項目をきちんと押さえておきましょう！では、レッツゴー♪ クロス軸に表示される画像数最初は、クロス軸方

【FlutterFlow】高さを不規則にして印象的なイメージを表現：StaggeredView

こんにちは～。本日もFlutterFlowの使い方をご紹介してまいります！今回は、StaggeredViewです。「スタガ…何それ、食べれるの？焼いた方ががいい？」という声が聞こえてきましたよ。意味が分からないのですね？一緒です♪ Staggeredは、「不安定な、不規則なパターンの」という意味です。ただし、アプリ製作の文脈では、次のようなパターンを指すことが多いみたいですね。高さは同じ、幅が異なる長方形が配置されています。今回の狙いは、これを画像で実現しようと

【FlutterFlow】上からだけと思ったら大間違い！ボタンを下から積み上げる：Wrapウィジェット

発表です！FlutterFlowのマガジンの記事が100本を超えました～🎊。FlutterFlowを知ったのが昨年の12月です。使い始めてから4か月くらいですが、少しずつ前進しております。読者の皆様とともに！引き続きよろしくお願い致します。さて、前回からの続きです。Wrapウィジェットの使い方を紹介しています。今回はその5回目の記事です。前回は、子要素のアラインメントをやりました。センタリングしたり、右よせしたりできるのでした。タテ方向にも同様のことができまｓた。が、

【FlutterFlow】子要素の配列を極めよう！Wrapウィジェット

前回記事からの続きです。FlutterFlowのWrapウィジェットを解説しています。今回はその4回目です。前回は、子要素のスペースの追加についてお話ししました。Run Spacingって何ぞ？というお話をしましたね。ようは、Cross軸方向にスペースを確保するのでした。Wordの「段落後にスペースをもうける」みたいな感じでしょうか。今回は、お待ちかね？子要素のAlignment（配列）をご紹介します。レッツゴー♪ メイン軸方向のアラインメントでは、Wrapウィ

【FlutterFlow】これで納得！Run Spacingって何だ？Wrapウィジェット

前回記事からの続きです。FlutterFlowのWrapウィジェットを解説しています。今回はその３回目です。前回は、子要素の配列の方向をデフォルトの水平から、垂直に変えてみました。設定自体は至極カンタンでしたね。今回は、子要素の間隔を調整してみます。そこで登場するのが、「Run Spacing」という言葉。なにそれ！？聞きなれない。気になる方は、続きをどうぞ～。レッツゴー♪ 子要素の間にスペースを追加するでは、子要素の間にスペースを入れることを試みます。下図

【FlutterFlow】クリック1回！子要素はタテに並んで折り返す：Wrapウィジェット

前回記事からの続きです。FlutterFlowのWrapウィジェットを解説しています。今回はその2回目です。前回は、Wrapウィジェットの役割、カラムやロウとの違いなどを確認して、実際にWrapウィジェット内にボタンをたくさん追加しました（コンテナが指定する範囲から、あふれましたけど…）。今回は、Wrapが子要素を配置する向き（軸）を「垂直」に変更してみますよ～。レッツゴー♪ 軸のデフォルトは「水平」前回記事で確認したとおり、Wrap内の子要素の配列方向は、「水

【FlutterFlow】スペースがないならスクロールでなく「折り返し」：Wrapという選択肢

こんにちは～。FlutterFlowのUIビルダーや、Firebaseの使い方のコツなどを紹介しています。今回は、Wrapウィジェットです。ん、「そんなウィジェットあったかな。カラムやロウじゃなくて？」そう思う方、ごもっともです。でも、ウィジェット一覧のちょっと分かりにくいところにありますよ。ほらね。カラムやロウほど登場機会の多くないこのウィジェット。いったいどのように使うのでしょうか。謎ですね！？よし、確認してみよう！この公式資料を参考にします。子要素の「折