-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は記述しておきましょう。
(処理内容は今は空で大丈夫です。)