Flutterでメモアプリを作る(4)Widget build前
前回の記事からかなり期間があきましたが、メモアプリの実装記事です。
今回は前回の最後に生成された_AppMainState()の前半部分になります。
[御礼]
今回解説するコードはteratailの質問にお答えいただいた物を使用しております。
popobotさんありがとうございました。
大変助かりました。
(リンク)
https://teratail.com/questions/244144?modal=q-comp
[範囲]
class _AppMainState extends State<AppMain> {
//linkパッケージで指定したURLが閲覧できない時のエラーメッセージ用の記述
Future _showErrorSnackBar() async {
Scaffold.of(context).showSnackBar(
SnackBar(
content: Text('Oops... the URL couldn\'t be opened!'),
),
);
}
//データ操作用のコントローラ
final redController = TextEditingController();//赤いTextField用のコントローラ
final yellowController = TextEditingController();//黄色のTextField用のコントローラ
final greenController = TextEditingController();//緑の•TextField用のコントローラ
var isLoaded = false;//データロード用関数で使うため、先に準備しておく
//データロード用関数準備
//ライフサイクルの一つinitStateを呼び出す関数
//アプリを初期化しload()関数を実行するための準備
//この関数をコメントアウトするとアプリが起動しなくなります(=初期化が正常に実行されない)
//@overrideは複数あってもエラーにはなりません。
@override
void initState() {
super.initState();
load();
}
//データロード用関数
Future<void> load() async {
final prefs1 = await SharedPreferences.getInstance();
redController.text = prefs1.getString('red');
yellowController.text = prefs1.getString('yellow');
greenController.text = prefs1.getString('green');
setState(() {
isLoaded = true;
});
}
//データ保存用関数
Future<void> save(key, text) async {
final prefs2 = await SharedPreferences.getInstance();
await prefs2.setString(key, text);
}
Widget build前の変数、関数。
サンプルコードの全体はこちらになります。
※この記事で記述する部分はWidget buildの前に記述しても後に記述しても動作します。
Widget buildの{}内に記述するとエラーになりますのでご注意ください。
[解説]
<class _AppMainState>
class _AppMainState extends State<AppMain> {
前の記事の最後で作成した_AppMainStateをclassとして定義します。
数珠つなぎをイメージするとわかりやすいかもしれません。(StatefulWidget->AppMain->_AppMainState)
<linkパッケージで指定したURLが閲覧できない時のエラーメッセージ用の記述>
//linkパッケージで指定したURLが閲覧できない時のエラーメッセージ用の記述
Future _showErrorSnackBar() async {
Scaffold.of(context).showSnackBar(
SnackBar(
content: Text('Oops... the URL couldn\'t be opened!'),
),
);
}
プログラムの最初に読み込んだlinkパッケージで指定したURLが存在しなかった時のためにエラーを出すための関数です。
関数内のFuture、asyncは非同期処理という
(参考リンク)
上記URLのsample内のコードと同じです。
非同期処理に関する参考リンク
Dartの文法に関するFuture、asyncの説明です。
<データ操作用のコントローラ>
//データ操作用のコントローラ
final redController = TextEditingController();//赤いTextField用のコントローラ
final yellowController = TextEditingController();//黄色のTextField用のコントローラ
final greenController = TextEditingController();//緑の•TextField用のコントローラ
var isLoaded = false;//データロード用関数で使うため、先に準備しておく
今回作成するアプリでは3つの記入領域(赤・黄・緑)を設けているため、色の英語名をそのまま変数名に利用しています。
先頭のfinalはconstより融通が効くのでflutterのコードでは多用されるようです。
(参考リンク)
変数宣言についての解説
公式のTextEditingControllerについての解説(英語)
ドキュメントの日本語訳
<データロード用関数準備>
//データロード用関数準備
//ライフサイクルの一つinitStateを呼び出す関数
//アプリを初期化しload()関数を実行するための準備
//この関数をコメントアウトするとアプリが起動しなくなります(=初期化が正常に実行されない)
//@overrideは複数あってもエラーにはなりません。
@override
void initState() {
super.initState();
load();
}
この関数の役目はアプリを初期化し、load()関数を実行するための関数です。
ルール上、super.initState()する必要があるため呼び出しています。
@overrideは複数回呼び出しても問題はありません。
(参考リンク)
Flutterのライフサイクルについての解説記事
<データロード用関数>
//データロード用関数
Future<void> load() async {
final prefs1 = await SharedPreferences.getInstance();
redController.text = prefs1.getString('red');
yellowController.text = prefs1.getString('yellow');
greenController.text = prefs1.getString('green');
setState(() {
isLoaded = true;
});
}
先述したFutere、async、finalを使用しての記述です。
setStateは状態の変更をアプリの描画に反映するための関数です。
(参考リンク)
shared-preferencesの使用方法解説記事2つ
Flutterで使用可能なデータベースの比較
SQFliteを使う場合の解説
AndroidとiOSのデータの扱い方の違いについて
setState()についての解説
<データ保存用関数>
//データ保存用関数
Future<void> save(key, text) async {
final prefs2 = await SharedPreferences.getInstance();
await prefs2.setString(key, text);
}
データロード用関数同様に記述します。
こちらはsetStringというメソッドを使っています。
[終わりに]
次回は画面の描画の部分であるWidget build以降を解説していきます。
(支援のお願い)
2014年8月下旬に天文学的な確率(50億分の1)で免疫に脳幹を攻撃されました。
多くは後遺症もなく社会復帰できるそうですが、私は意識できる生理機能のほぼ全てに後遺症を負っています。
その影響で就労することが困難です。
生活資金も底を尽きかけています。
よろしければご支援いただけないでしょうか。
noteのサポート機能、
Twitterでのマシュマロ(https://marshmallow-qa.com/ffishfd)
またはYggDoreで(https://9vox2.netlify.com/ )にチップをいただけますと幸いです。
この記事が気に入ったらサポートをしてみませんか?