Flutterflowでアプリ開発を始めるには、まずプロジェクトの管理が重要です。
このガイドでは、
プロジェクトの設定
について詳しく説明します。
この記事はこんな人におすすめ！
- flutter flow初学者
- プロジェクトの設定について知りたい！
- 開発アプリを素早く視覚的に確認したい！
プロジェクトの設定
プロジェクトの作成はできるようになった？
うん、プロジェクト名を入力してテンプレートを
選ぶだけで簡単にできたよ。
じゃあ、今回はプロジェクトの設定について解説していくよ。
＜プロジェクト作成について、まとめてる記事はこちら＞
新規プロジェクトをそのまま使用するのも良いですが、
自分好みにカスタマイズすることでアプリ開発がスムーズになったり、
運用方針の選定にも役に立ちます。
テーマ
左サイドバーの下から２番目にあるアイコンをクリックすることで、
このプロジェクトの「テーマ」を決めることができるようになります。
プロジェクト内の配色
Flutter Flowのテーマ設定機能は非常に便利で、ダークモードの設定を含むテーマ全体を一括で管理できます。これにより、ダークモードに切り替えた際に、プライマリーカラーなどの色を簡単に変更することができます。他のツールでは、ダークモード用とライトモード用の画面を別々に作成する必要があり、それに伴って労力が倍増することが多いですが、Flutter Flowでは色の変更だけで対応できるため、効率的です。
さらに、Figmaで作成したテーマをインポートすることも可能です。既存のプロジェクトがあり、そのテーマをそのまま利用したい場合、一つ一つ設定するのではなく、インポート機能を使って簡単に取り込むことができます。これにより、設定作業を大幅に簡略化できます。
テキストデザインの設定
Flutter Flowでは、テキストのサイズやウェイトなどを事前に一括設定できる機能があり、デザインの統一感を簡単に保てます。これにより、アプリごとにテキストのサイズがバラバラになって見た目が統一されないという問題を解消します。初期段階でこれらの設定を一括で行うことで、見た目の一貫性が保たれ、デザインが決まりやすくなります。
さらに、フォントやアイコンもカスタムでインポートして使用することが可能です。自作のアイコンやオリジナルのフォントを利用することで、アプリのデザインの幅が広がり、よりオリジナリティを出すことができます。これらの機能を持つツールは珍しく、デザインにこだわりたい方にとって非常に有用です。
また、Flutter Flowではこれらの設定をページごとに統括して管理できるため、他のツールでは対応が難しい場合も簡単に行うことができます。全体のデザインを一括管理できるこの機能は、特にデザインをしっかりと作り込みたいプロジェクトに適しています。
設定ページ
左サイドバーの一番下にあるアイコンをクリックすることで、
このプロジェクトの「設定」を決めることができるようになります。
プロジェクト名やパッケージ名の変更や
初めに表示されるページの設定も変更可能です。
ナビゲーションバー＆アプリバー
ナビゲーションバー＆アプリバー設定ページから、ページにナビゲーションバーとアプリバーを追加し、カスタマイズすることができます。
①ナビゲーションバー設定
ナビゲーションバー（NavBar）は、アプリのページ間を素早く切り替えることができます。ナビゲーションバー設定ページから、ナビゲーションバーを追加し、デザインに合わせてスタイルを変更することができます。
②アプリバー設定
アプリバー（AppBar）は、現在のページに関連する情報やアクションを表示します。アプリバー設定ページから、アプリバーを追加し、ニーズに合わせてカスタマイズすることができます。
③スタイリング
スタイリングはアプリバーで表示させるデザインを変更することができます。
アプリバーに表示させるデザインの他にも「色」「高さ」「サイズ」を変更できます。
Firebaseの設定
この画面でFirebaseの連携を行うことができます。
プロジェクトの初回作成時にも以下のようなFirebaseの連携画面が表示されます。
この画面で設定をせずにスキップしてしまった方はこの設定ページで連携しましょう！
Firebaseについて詳しく知りたい方は下記の記事をご覧ください。
＜Firebaseをまとめてる記事はこちら＞
言語の設定
言語設定ページでは、開発するアプリ内で表示する言語の設定ができます。
多言語対応アプリを制作したい場合はこちらを設定する必要があります。
言語変更に必要な項目について説明します。
①Primary Language
アプリケーションのベース言語であり、設定した言語に統一される。
②Display Language
アプリビルダーでアプリを表示する言語である。
③Add Language
アプリに対応させる言語を追加できる。
このボタンを押して言語を追加していくことで、
各ページ記載されている言葉を自動翻訳してくれる機能もある。
下の画像では、「HomePage」内に記載されている単語が一番左に表示されている。
画面右側の「Translate Page」ボタンを押すことで自動翻訳される。
注意点
この機能を使用するには有料プランに加入する必要があるよ！！
手動で翻訳する分には無料で利用できるから、初めは無料で試してみるのがいいかも。
まとめ
この記事では、
・プロジェクトの設定
について説明しました。
次回は、ページの作成とデータベースについて詳しく解説します。
コメント