コンテンツへスキップ

【初心者向け】Flutter Flowでログイン機能を作ろう 〜前編〜

今回は前回に引き続きFlutter Flowの使い方をやっていきましょう。
前回の記事↓

今回は上の記事で作成したプロジェクトを使って、次の機能を実装してみましょう。

  • 新規登録機能
  • ログイン機能
本記事の想定作業時間

前編の想定作業時間は30分程度です。

こちらのQRコードを読み取ることで、この記事をスマホで表示させることができます。
モニターが複数台ない方はスマホで動画を見ながら作業すると効率よく進められるかと思います。

画面の作成

まずは画面の作成から行います。
今回は「新規登録兼ログイン画面(認証画面)」と「パスワード再設定画面」の2つを用意します。

usersコレクションがなかった方はこちらの動画を参考にして作成ください。

エラーの解消

Actionを設定して画面同士を接続

続いて「認証画面」と「パスワード再設定画面」をお互いに移動できるようにしましょう。

まとめ
  • FlutterFlowには無料で使えるテンプレートがある。
  • usersコレクションはデフォルトで準備されているのでコレクション名を入れるだけで作成できる。
  • 画面の遷移(次の画面に切り替わること)はActionのNavigate Toを設定する。

残りの新規登録時にusersコレクションにユーザー情報を保存する方法と、その情報を使ってログインする機能の実装になります。
この続きは次回の記事で解説します。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です