Flutter/DartでBitfinexのレンディングアプリを作る(Part2 stateful/データの永続化)

---

Flutterの記事を整理し本にしました

• 本稿の記事を含む様々な記事を体系的に整理し本にまとめました
• 今後はこちらを最新化するため、最新情報はこちらをご確認ください
• 10万文字を超える超大作になっています(笑)

---

はじめに

• この記事は、初めてのスマホアプリを作るまでの軌跡を残したものです。
• この記事では、stateless/statefulとshared_preferencesを用いたデータの保存を紹介します

関連記事

画面の再描画

• Dartでは、画面の再描画を行うか行わないかで、使うクラスが異なります。
  • StatelessWidgetを継承するとbuildが一度しか呼ばれず、静的な(イミュータブルな?)ページになります
  • StatefulWidgetとStateクラスを用いると、buildが繰り返し呼ばれ画面が再描画される動的な(ミュータブルな画面)になります。
• 公式ドキュメントを読むと、statelessもstatefulもどちらも不変オブジェクトと書かれています
  • statelessは完全な不変オブジェクト
  • statefulはStateクラスのジェネリクスにStatefulのクラスを指定することで利用します
    • Stateクラスを継承したクラスのbuildが繰り返し呼ばれ、状態を保てます

stateless.dart

class Info extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("info"),
      ),
      body: Center(child: Text("使い方、更新情報など")),
    );
  }
}

stateful.dart

class Info extends StatefulWidget {
  @override
  _InfoState createState() => _InfoState();

  Widget build(BuildContext context) {
    return Info();
  }
}

class _InfoState extends State<Info> {
  String _value = "";
    return Scaffold(
      appBar: AppBar(
        title: Text("info"),
      ),
      body: Center(child: Text("使い方、更新情報など")),
    );
}

初期状態と状態の変え方

初期状態

• initStateメソッドが最初に呼び出されるので、ここを書き換えます

initState.dart

@Override 
void initState(){
  super.initState();
  //ここに独自の処理を入れる
}

状態の変更

• setStateメソッドで明示的に再描画させることができます

setState.dart

if (mounted) {
  setState(() {
    value = "変えたい値";
  });
}

• mountedをチェックしているのは、再描画のときに画面の構築が不完全な?な時がありエラーがでるので、ドキュメントにはmountedを調べてから書き換えるのを推奨としているためです。

データの保存

• 画面から入力された値を永続化するニーズはたくさんあると思います。
  • DBに入れるなども解決策がありますが、手軽なshared_preferencesを使う例を紹介

sharedpref.dart

SharedPreferences prefs = await SharedPreferences.getInstance();

prefs.setString("key",value); // 登録
prefs.getString("key") // 取得
prefs.remove("key") // 削除

• pubspec.yamlのdependenciesにshared_preferencesを記述するのをお忘れなく
  • アプリ内で共有されるので、別の画面からももちろん呼び出せます