Flutterでメモアプリを作る(4)Widget build前

9kai

前回の記事からかなり期間があきましたが、メモアプリの実装記事です。
今回は前回の最後に生成された_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/ )にチップをいただけますと幸いです。

この記事が気に入ったらサポートをしてみませんか？