書籍情報保管アプリ #7 『登録ボタンをDialogで表示・ユーザー登録』
前回は、本のスキャン+登録を1つのページでできるようにしました。
ただ、snackbarで実装したため、ユーザーが登録ボタンを押さずに前のページに戻れてしまう、という不具合の元となっていました。今回は、Dialog BOXで登録できるようにします。
Dialogボックスの表示
こちらは、やはりCook Bookのサンプルコードを参照して実装しました。
ただし、バーコードのonDetect関数が、Future関数であったため、下記のようにSetStateの内部でshowDialogを呼ばないといけないようです。(理由は理解せず。。)
setState(() {
showDialog(
context: context,
barrierDismissible: false,
builder: (context) {
return AlertDialog(
・・・
)
}
)
}
ボタンの配置などを見直し
ログイン・ログアウトのボタンなどが雑な配置になっていたのでPopUp メニューに配置します。
英語ですが、下記のYouTubeがわかりやすいです。
あと、ログインの時のメール入力のキーボードが一般入力だと「個人的に」いけていないので、メールアドレス入力のキーボードにしておきます。
スキャナーの横向きに対応する
mobile_scannerは現状横向きを検知してくれないため、下記を参考にして横向きに(なんちゃって)対応しました。
(後日談)実装はできていると思うのですが、scannerの動作が不安定になったので一旦外しました。
あとで復活させるためにメモだけ残しておきます。
書影の著作権について
本の表紙の使用について下調べしています。「引用」と言える形であれば良いらしい。
Eメールの確認の実装
前回実装したログインでは、嘘や他人のメールアドレスでもログインできてしまうので、下記を参考に実装しました。
ちょっとコードが古かったので手直ししています。
特に、controllerを使用したパスワード長さチェックのところは下記を参考に。
@override
void initState() {
super.initState();
// Start listening to changes.
_userPasswordController.addListener(_checkPassWordLength);
}
void _checkPassWordLength() {
final text = _userPasswordController.text;
if (text.length >= 6) {
_pswdOK = true;
} else {
_pswdOK = false;
}
}
ログインに成功したらpopuntilでHomeに戻ります。
またパスワードの可視・不可視を切り替えるのは下記を参考に。
今の見た感じ
ログイン関係などかなりスッキリしてきました。一覧と個別のページをもう少し改修して公開の準備していきたいと思います。(まだまだかなー。みなさんどこまで作り込まれるのか。。)
今後やりたいこと
ログイン画面(以下のページ参照。今回メール確認を追加しました。)
本一覧表示(以下のページ参照)
ライセンス関係表示
書評保存
UI/UXの修正(今回少し対応。継続中)
登録した本の削除(以下のページ参照)
コードの整理(Classの再定義など)(以下のページ参照)
本の一覧の検索・並べ替え(以下のページ参照)
GoogleBookAPIも使えるようにする
本の情報追加する
多言語化する