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

208

本

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

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

【FlutterFlow】内側の要素を土台から支えるウィジェット：コンテナ

こんにちは！FlutterFlowのウィジェットの使い方を丁寧に学ぼうという企画で記事を書いています。さて、今回は、コンテナ・ウィジェットです。コンテナ？貨物でも輸出します？いえ、違いますよ～ｗ。コンテナは、背景色をつけたり、角を丸めたり、子要素のサイズを制限したりする大事な機能を持つ「入れもの」です。アプリのインターフェイスを作り込む「基盤」となって、スクリーンを論理的に小さな単位に区切ってくれます。ということで、コンテナ、行ってみよ～。参考にするのは、こち

【FlutterFlow】ウィジェットの「幅」と「パッディング」の緻密な関係を知る：Dividerの外観設定

前回記事からの続きです。Dividerウィジェットを使ってページにエリア区切りをつけるテクニックを学習中です！前回は、Dividerを設置して太さ、高さ、ラインスタイルなどをカスタマイズしました。いずれも重要な設定ですね。ちなみに、ラインスタイル設定メニューから破線と点線の意味の違いを知りましたｗ。まだまだ勉強することが世の中には多いと思うのでした。さて、今回は、後半編。Dividerの色、左右のパッディング、幅指定、これらの設定をやりましょう！レッツゴー♪ 色

【FlutterFlow】ページのコンテンツを区切って一層使いやすく：Divider

はい、本日はDividerウィジェットをご紹介しましょう。Dividerの意味は、「分け隔てるもの」ですね。これを使えば、ページコンテンツの区切りを視覚的に表現できるので、ユーザーにとって使いやすくなります。極めて単純そうなこのウィジェット、その潜在能力はいかに？それではいってみよ～。 Dividerの追加まずは、Dividerの追加です。下図のように、CircleImageとテキストがあるシンプルなページがあります。ちなみに、CircleImageとテキストの

【FlutterFlow】PageView専用アクションでページ遷移をコントロール

前回記事からの続きです。PageViewウィジェットを使って「オンボーディング」（新規ユーザーにアプリの導入説明する複数ページ）を作っています。前回は、インジケータのカスタマイズを紹介しました。ドットの間隔やドットの丸みを調整したり、さてまたはドットを透明化したりと詳細な設定ができましたねさて、今回は、ボタンを使ったページ遷移をやりましょう。スクロールやドットのタップを使ってもページ遷移させることは、もちろんできるのですが、選択肢としてボタンも考えておきたいですよね。

【FlutterFlow】まさかドットを透明化？まだまだできるPageViewインジケータのカスタマイズ

前回記事からの続きです。PageViewウィジェットを使って「オンボーディング」（新規ユーザーにアプリの導入説明する複数ページ）を作っています。前回は、「インジケータ」の外観のカスタマイズをやりましたね。色やサイズや位置を変えたりしました。今回も、インジケータのカスタマイズの続きをやります～。「もうやることないのでは？」と思うかもしれません。が、実はまだあるのです。うむ、設定できることが豊富ですな～。ということで、先を急ぎましょう！インジケータのドットの間隔を

【FlutterFlow】ユーザーを導くインジケータはここまでカスタマイズできる

前回記事からの続きです。PageViewウィジェットを使って「オンボーディング」（新規ユーザーにアプリの導入説明する複数ページ）を作っています。前回は、PageView全体の外観設定に焦点をあて、スワイプでなくタップによるナビゲーションに変更したり、インジケータがページ上に乗るようにしたりしました。今回は、インジケータの設定に焦点をあてます！インジケータは、ユーザーが今どのページを表示しているのかを視覚的に分かるようにしてくれます。デフォルトの設定でも十分に分かりやす

【FlutterFlow】サイズからスクロール方向まで！PageViewのカスタマイズはこんなに簡単

はい、こんにちは～！前回記事からの続きです。 PageViewウィジェットを使って「オンボーディング」（新規ユーザーにアプリの導入説明する複数ページ）を作っています。前回は、今回は、Stackウィジェットにテキストを加えて、画像の上にそれを表示させました！これだけでも十分キレイなのですが、外観のカスタマイズができます。今回は、それに挑戦しましょう。レッツゴー♪ ページサイズの変更まずは、ページサイズの変更からやります。現在、画面いっぱいにオンボーディング用の画

【FlutterFlow】Stackでイメージ上にテキストを柔軟に配置できる

前回記事からの続きです。PageViewウィジェットを使って「オンボーディング」（新規ユーザーにアプリの導入説明する複数ページ）を作ろうとしています。前回は、ページビューウィジェットを追加して、PageViewページ内にあるImageをStackウィジェットで包む（Wrap）ところまでやりました～。今回は、Stackウィジェットにテキストを加えて、画像の上にそれを表示させましょう！レッツゴー♪ Stackの影響で小さくなったイメージを大きく表示ウィジェットの現状

【FlutterFlow】スワイプ可能なページを実装する「PageView」

はい、こんにちは～！このところ、FlutterFlowのUIビルダーの使い方を覚えよう～ということでいろんなウィジェットを紹介しております。前回までは、タブバーを紹介しておりました。果たして今回は～、、、「ページビュー」ウィジェットでございます～。それで、何ができるのかですって？実は、スワイプ可能なページを作ることができます。ふむ、それができたら、ユーザー体験が上がりそうです。さあ、試してみましょう～。参考にするのは、この公式資料です。レッツゴー♪ ページビュー

【FlutterFlow】最初に選択されるタブはこうやれば指定できる

前回記事からの続きです。タブバーの設定を習得しよう！ということで記事を連続で書いています。前回は、選択中のタブバーの外観を変える設定についてご紹介しました。選択されているタブを際立たせることができれば、ユーザーさんも使いやすいですね。そして、今回は、デフォルトで選択されるタブを指定します。なんだ、簡単そうだな…と思うかもしれません。でも、ちょっとだけ小難しいのです。知らないと分からなくなりますよ！気になりますね！よし行ってみよ～♪。最初に選択されるタブを設定タ

【FlutterFlow】タブの外観をカスタムして、選択中のタブを際立たせる方法

前回記事からの続きです。タブバーの使い方をマスターしよう！というコンセプトでブログを書いています。前回は、タブパーの基本的な設定をやりましたね。例えば、タブを増やしたり、タブページの子要素の位置を変更したり。ところで、みなさん。「どれが選択中のタブが分かりにくいな…」って思ったことはありませんか。それ、解決できます。今回は、選択中のタブバーの外観をカスタマイズしてみましょう！レッツゴー♪ 選択されたタブの色を変更現在、タブの外観は下図のとおりです。選択されている

【FlutterFlow】タブバーのカスタマイズの基本を1分で紹介

前回記事からの続きです。テーマは、「タブ・バーを使いこなして、使いやすいナビを実現しよう！」です。前回は、タブ・バーを追加して、そのタブ部分をカスタマイズしました。ちょっと素敵なタブが作れました～。今回は、ページ内テキストをカスタマイズしたり、タブの切り替え・追加をやってみましょう。それでは、レッツゴー♪ ページ内のテキストをカスタマイズ現在、タブ・ページは下図のとおりです。デフォルトのままです。ここからスタートしましょう！一番上のTabBar Pageをカ

【FlutterFlow】複数ページのナビゲーションを素早く実現するタブ・バー

はい、こんにちは。本日は、タブ・バーを紹介したいと思います。タブバーは、画面上部でタブを表示させ、それらをタップするとそれぞれのコンテンツを表示できるナビゲーションの一つです。前置きは短めにしてさっそくやってみましょう！参考にするのは、こちらの公式資料です。レッツゴー♪ ３つのウィジェットのセットで構成何はともあれ、TabBarウィジェットを空のページに追加します。カラム内ではなく、ページに直置きです。キャンバスを見ると…、おお、すでに何かタブバーが出来

【FlutterFlow】カラム内ウィジェットの間隔を自在にコントロール「Spacer」

はい、本日ご紹介するのはスペーサーでございます。スペーサーって何それ？って感じですね。スペースを作るもの、という意味です。たた、FlutterFlowを使うにあたり、より具体的に言うと、「カラムウィジェットやロウ・ウィジェットの子要素の間に柔軟にスペースを挿入する」ために使われます。ちょっとまて、その機能どこかにありましたよね。そう、カラムのプロパティの「メイン軸の配置」設定で設定できたはず。でも、もっとカスタマイズしたいときに、このSpacerが役に立つというわ