shared_preferencesを使用してTextFieldのデータを保存したい

Flutterでアプリ開発をしています。
flutterのパッケージshared_preferencesでTextFieldに入力されたデータを一時保存したいのですが、記述が掴めず作業を進められずにいます。

参考サイトでは入力内容をリスト表示しているため、私が実現したいコードとは記述が異なっているためわからな意状態です。
TextFieldにshared_preferencesで保存した入力を直接反映する方法をご存知でしたらご教示いただけますと幸いです。

question.dart
1import 'package:flutter/material.dart';
2import 'package:shared_preferences/shared_preferences.dart';
3
4void main() => runApp(MyApp());
5
6class MyApp extends StatelessWidget {
7
8  @override
9  Widget build(BuildContext context) {
10    return MaterialApp(
11      title: 'tlmemo',
12      theme: ThemeData(
13      ),
14      home: AppMain(title: 'tlmemo'),
15    );
16  }
17}
18
19
20class AppMain extends StatefulWidget{
21
22  AppMain({Key key, this.title}) : super(key: key);
23  final String title;
24
25  @override
26  _AppMainState createState() => _AppMainState();
27}
28
29class _AppMainState extends State<AppMain> {
30
31  //データ保存用文字列データ*3
32  String red = '';
33  String yellow = '';
34  String green = '';
35
36  //データロード用関数*3(loadRed, loadYellow, loadGreen)
37
38  //データ保存用関数*3(saveRed, saveYellow, saveGreen)
39
40  @override
41  Widget build(BuildContext context) {
42    return Scaffold(
43      backgroundColor: Colors.white,
44      body: SingleChildScrollView(
45      child: Column(
46      children: <Widget>[
47      Text(''),
48      Text(''),
49      Text('tlmemo'),
50      Text(''),
51      //赤色の部分:緊急/ASAP
52      TextField(
53        minLines: 3,
54        maxLines: 3,
55        maxLength: 150,
56        maxLengthEnforced: true,
57        decoration: InputDecoration(
58          fillColor: Colors.red[200], filled: true,
59          border: OutlineInputBorder(),
60          hintText: '緊急/ASAP',
61        )
62      ),
63      
64      //黄色の部分:重要/Important
65      TextField(
66        minLines: 5,
67        maxLines: 5,
68        maxLength: 250,
69        maxLengthEnforced: true,
70        
71        decoration: InputDecoration(
72          fillColor: Colors.yellow[300], filled: true,
73          border: OutlineInputBorder(),
74          hintText: '重要/Important',
75        )
76      ),
77      
78      //緑色の部分:その他/Other
79      TextField(
80        minLines: 7,
81        maxLines: 7,
82        maxLength: 350,
83        maxLengthEnforced: true,
84        
85        decoration: InputDecoration(
86          fillColor: Colors.green[300], filled: true,
87          border: OutlineInputBorder(),
88          hintText: 'その他/Other',
89        )
90      ),
91      Text(''),
92      Text(''),
93  ],
94      ),
95      )
96    );
97  }
98}

(参照したサイト)
https://skooler.jp/tech/2019/07/01/7/

(環境情報)
OS:Mac
OSのバージョン:Cataline10.15.3
Flutter:1.9.1
Dart:2.5.0

行動規範の内容に同意します

回答1件

ベストアンサー

TextFieldに値を設定するにはTextEditingControllerを使います。

final controller = TextEditingController();
controller.text = 'xxx';
TextField(
  controller: controller,
);

TextFieldの値を保存する場合は、onChangedを使います。onChangedは変更されたら毎回実行されます。

TextField(
  onChanged: (text) {

  },
);

上記を利用して、動くコードを書いてみたので、参考にしてください（変更点は質問のコードと差分をとるとわかると思います）

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'tlmemo',
      theme: ThemeData(),
      home: AppMain(title: 'tlmemo'),
    );
  }
}

class AppMain extends StatefulWidget {
  AppMain({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _AppMainState createState() => _AppMainState();
}

class _AppMainState extends State<AppMain> {
  //データ編集用のコントローラ
  final redController = TextEditingController();
  final yellowController = TextEditingController();
  final greenController = TextEditingController();

  @override
  void initState() {
    super.initState();
    load();
  }

  //データロード用関数*3(loadRed, loadYellow, loadGreen)
  Future<void> load() async {
    final prefs = await SharedPreferences.getInstance();
    redController.text = prefs.getString('red');
    yellowController.text = prefs.getString('yellow');
    greenController.text = prefs.getString('green');
  }

  //データ保存用関数*3(saveRed, saveYellow, saveGreen)
  Future<void> save(key, text) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString(key, text);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Text(''),
              Text(''),
              Text('tlmemo'),
              Text(''),
              //赤色の部分:緊急/ASAP
              TextField(
                  controller: redController,
                  onChanged: (text) {
                    save('red', text);
                  },
                  minLines: 3,
                  maxLines: 3,
                  maxLength: 150,
                  maxLengthEnforced: true,
                  decoration: InputDecoration(
                    fillColor: Colors.red[200],
                    filled: true,
                    border: OutlineInputBorder(),
                    hintText: '緊急/ASAP',
                  )),

              //黄色の部分:重要/Important
              TextField(
                  controller: yellowController,
                  onChanged: (text) {
                    save('yellow', text);
                  },
                  minLines: 5,
                  maxLines: 5,
                  maxLength: 250,
                  maxLengthEnforced: true,
                  decoration: InputDecoration(
                    fillColor: Colors.yellow[300],
                    filled: true,
                    border: OutlineInputBorder(),
                    hintText: '重要/Important',
                  )),

              //緑色の部分:その他/Other
              TextField(
                  controller: greenController,
                  onChanged: (text) {
                    save('green', text);
                  },
                  minLines: 7,
                  maxLines: 7,
                  maxLength: 350,
                  maxLengthEnforced: true,
                  decoration: InputDecoration(
                    fillColor: Colors.green[300],
                    filled: true,
                    border: OutlineInputBorder(),
                    hintText: 'その他/Other',
                  )),
              Text(''),
              Text(''),
            ],
          ),
        ));
  }
}

おまけ

上記のコードだと、SharedPreferencesからデータがロードされる前に、画面が描画されて、入力欄がチラつくと思います。ロードの完了isLoadedまでVisibilityを使って非表示にする対応をしたコードも載せておきます。

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'tlmemo',
      theme: ThemeData(),
      home: AppMain(title: 'tlmemo'),
    );
  }
}

class AppMain extends StatefulWidget {
  AppMain({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _AppMainState createState() => _AppMainState();
}

class _AppMainState extends State<AppMain> {
  //データ編集用のコントローラ
  final redController = TextEditingController();
  final yellowController = TextEditingController();
  final greenController = TextEditingController();
  var isLoaded = false;

  @override
  void initState() {
    super.initState();
    load();
  }

  //データロード用関数*3(loadRed, loadYellow, loadGreen)
  Future<void> load() async {
    final prefs = await SharedPreferences.getInstance();
    redController.text = prefs.getString('red');
    yellowController.text = prefs.getString('yellow');
    greenController.text = prefs.getString('green');
    setState(() {
      isLoaded = true;
    });
  }

  //データ保存用関数*3(saveRed, saveYellow, saveGreen)
  Future<void> save(key, text) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString(key, text);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Visibility(
          visible: isLoaded,
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                Text(''),
                Text(''),
                Text('tlmemo'),
                Text(''),
                //赤色の部分:緊急/ASAP
                TextField(
                    controller: redController,
                    onChanged: (text) {
                      save('red', text);
                    },
                    minLines: 3,
                    maxLines: 3,
                    maxLength: 150,
                    maxLengthEnforced: true,
                    decoration: InputDecoration(
                      fillColor: Colors.red[200],
                      filled: true,
                      border: OutlineInputBorder(),
                      hintText: '緊急/ASAP',
                    )),

                //黄色の部分:重要/Important
                TextField(
                    controller: yellowController,
                    onChanged: (text) {
                      save('yellow', text);
                    },
                    minLines: 5,
                    maxLines: 5,
                    maxLength: 250,
                    maxLengthEnforced: true,
                    decoration: InputDecoration(
                      fillColor: Colors.yellow[300],
                      filled: true,
                      border: OutlineInputBorder(),
                      hintText: '重要/Important',
                    )),

                //緑色の部分:その他/Other
                TextField(
                    controller: greenController,
                    onChanged: (text) {
                      save('green', text);
                    },
                    minLines: 7,
                    maxLines: 7,
                    maxLength: 350,
                    maxLengthEnforced: true,
                    decoration: InputDecoration(
                      fillColor: Colors.green[300],
                      filled: true,
                      border: OutlineInputBorder(),
                      hintText: 'その他/Other',
                    )),
                Text(''),
                Text(''),
              ],
            ),
          ),
        ));
  }
}

投稿2020/02/29 06:27

編集2020/02/29 06:30