【Flutterflow】アカウント作成と基本的な使い方

Flutterflowは、コードを書くことなくアプリを作成できる強力なツールです。

このガイドでは、Flutterflowの基本概念、アカウント作成から初期設定、

そして基本的な操作ガイドについて説明します。初心者から中級者まで、

誰でも理解しやすい内容となっていますので、ぜひ最後までお読みください。

---

Flutterflow

Flutterflowは、GoogleのFlutterフレームワークをベースにしたノーコードツールです。このツールを使用すると、プログラミングの知識がなくても、直感的にアプリをデザインし、構築することができます。これにより、開発時間を大幅に短縮し、プロトタイプから本格的なアプリまで幅広く対応できます。

＜flutter flowをまとめてる記事はこちら＞

アカウント作成と新規プロジェクト

アカウント作成

Flutterflowを使用するには、まずアカウントを作成する必要があります。

以下のステップに従って作成しましょう。

1. Flutter Flowの公式サイトにアクセス
まず、ブラウザでFlutter Flowの公式サイト（[flutterflow.io](https://flutterflow.io)）
にアクセスします。

2. サインアップページに移動
公式サイトにアクセスしたら、右上の「無料で始める」ボタンをクリックします。

3. メールアドレスとパスワードの入力
サインアップページが表示されたら、
使用するメールアドレスとパスワードを入力し、「Create Account」ボタンをクリックします。

4. メールアドレスの認証
作成後、登録したメールアドレスに確認メールが届くので、リンクをクリックして認証を完了させます。
すると下のような画面が表示されるはずです。

これでアカウント作成は完了です。

新規プロジェクトの作成

アカウントの作成が完了したところで次は、

新規プロジェクトの作成に移ります。

と言っても作成方法はとても簡単です。

1.　ダッシュボードの右上にある「Create New」のボタンをクリック

2. プロジェクト作成画面が表示されるので名前を決めて「Create Blank」をクリック
　flutter flow側で用意されたテンプレートを使用したい場合は、
　使用したいアイコンをクリック

そうすることで、新規プロジェクトを作成することが出来ます。

---

基本的な操作ガイド

UI構築

FlutterflowのUIビルダーはドラッグアンドドロップ形式で、直感的に操作できます。

①ナビゲーションメニュー

ナビゲーションメニューは、上から
「ウィジェットパレットへのアクセス」
「ウィジェットツリーへのアクセス」
「ストーリーボードへのアクセス」
「Firestoreの機能」
「APIコールの機能」
「画像アセットのアップロード機能」
「インテグレーション機能」
「カスタム関数の機能」
「テーマ設定の機能」

を利用することが可能です。

②ツールバー

ツールバーには、
プロジェクトの構成、アプリのバージョン管理、ヘルプ、デバッグ、コードのダウンロード、アプリの実行に関するボタンが含まれています。

③キャンバスエリア

キャンバスエリアでは、
モバイルデバイスの画面プレビューを表示し、さまざまなオプションでカスタマイズすることができます。

④プロパティパネル

プロパティパネルはキャンバスの右側にあり、選択したウィジェットやページを
カスタマイズするためのすべてのプロパティが表示されます。

エレメントの配置

左ペインにあるエレメントを中央へドラックアンドドロップをすることで、
画面UIを編集することが出来ます。

ページの管理

複数ページを作成し、ページ一覧で管理できます。
各ページ上のエレメントの構成をツリー状で把握できます

---

まとめ

この記事では、
・アカウント作成
・新規プロジェクト
・基本的な操作ガイド

について説明しました。

次回は、プロジェクトの開始と管理について詳しく解説します。