
-Hatchout school-
株式会社井雄
編集者: 奥野領太
はじめに
ビギナーでは、初級編で作ったパスワードポストAppをより実用的なものにしていきます。
ここでは皆さんの自走力を付ける為の内容となっています。
分からない所は「Hint」と書かれているところを参考に、自身でググって答えを探してみましょう!
その他スターターコースの内容の復習もあります。是非力試ししてみて下さい!
【1】ToDoリストの追加
それでは始めていきましょう。
前回同様、ToDoリストを書き出していきましょう。
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
//todo パスワード追加画面の大枠を作成
//todo パスワード確認画面の大枠を作成
//todo パスワード追加画面で情報入力
//todo パスワード追加ボタンの作成
//todo 追加ボタンタップでリスト作成
//todo パスワード確認画面に削除ボタンを作成し、ボタンタップでリスト削除
//todo IDとPWのListも作成し情報管理する
//todo クリップボードコピー
//todo SnackBar表示
//todo 登録情報編集ページへ遷移
//todo 登録情報編集ページのレイアウト作成
//todo 登録情報の編集
//todo 追加画面のパスワードの表示・非表示の切り替え
//todo スライダブル実装
【2】パスワード追加画面の大枠を作成
まずはFloatingActionButtonをタップした時に、下記の画面に遷移するようレイアウト作成してみましょう。
まず始めに、ここから先色々新しい画面が出てくることが予想される為、分かりやすいよう、遷移後のページ構成を担っているClassの名前を『NextPage』から『AddPassword』に変更しておきましょう。
Rename時の注意
Renameする時は『shift』+『F6』のショートカットキーを使うようにしましょう。
こうする事で、そのClassやメソッドが使われている場所もまとめてRenameすることができます。エラーが発生する可能性を減らせるので、今から習慣づけて使うようにしましょう。
これに伴いDart Fileの名称も『next_page.dart』から『add_password.dart』に変更しておきます。
ここまでで準備は完了です。
初級編の『新しい画面のレイアウト作成』同様、上下のTextが縦に揃うようにレイアウトしていきましょう。
リストをタップした時ではなく、FloatingActionButtonをタップした時、というのも気をつけて記述していきましょう。
【3】パスワード確認画面の大枠を作成
次はリストをタップした時に、下記のようなパスワードを確認する新しい画面を作成してみましょう。(Hint:OutlineButton, Center)
OutlineButton Widgetを使うことで、上図のようなボタンを簡単に作成することができます。shape Propertyに適切な値を入れることによって、ボタンの形状を変えることができます。
また、onPressed Propertyを記述しないと下図のように灰色になり、タップできなくなってしまいます。
この状態だとボタンとして機能しないので、onPressed Propertyは記述しておきましょう。
(処理内容は今は空で大丈夫です。)