[Day30]Flutter Netflix UI 使用shared_preferences

大家好，今天是最後一天，今天跟大家介绍shared_preferences，可以把一些简单的设定的东西存在里面

在pubspec.yaml新增shared_preferences: ^0.5.12+2

dependencies:
  shared_preferences: ^0.5.12+2

import，我是用在SelectUserPage这一页中

import 'package:shared_preferences/shared_preferences.dart';

每次使用SharedPreferences都是使用SharedPreferences.getInstance()

  Future<SharedPreferences> _prefs = SharedPreferences.getInstance();
  Future<List<User>> _users;

存入资料

 Future<void> mockNetworkData() async {
    print('future work');
    return Future.delayed(Duration(seconds: 4), () async {
      final SharedPreferences prefs = await _prefs;
      //假设云端传来的资料转化後的List是这样4位
      List<User> users = [
        User("Player1", "assets/icons/icon_user.jpg"),
        User("Player2", "assets/icons/icon_user.jpg"),
        User("Player3", "assets/icons/icon_user.jpg"),
        User("Player4", "assets/icons/icon_user.jpg"),
      ];
      //直接把整个List变成json
      String s = json.encode(users);

      setState(() {
      //存入资料使用setString(key,value)然後回传users
        _users = prefs.setString('users', s).then((bool success) {
          return users;
        });
      });
    });
  }

 @override
  void initState() {
    _users = _prefs.then((SharedPreferences prefs) {
    //取出字串资料使用getString
      String _string = prefs.getString('users') ?? '';
      List list = json.decode(_string);
      //取出的时候并非直接是User的资料格式，所以这边针对list里面每个item转化成User
      List<User> users = list.map((e) => User.fromJson(e)).toList();
      return users;
    });
    super.initState();
  }

在FutureBuilder中使用，future为_users

 FutureBuilder<List<User>>(
                  future: _users,
                  builder: (context, snapshot) {
                    print("snapshot: $snapshot");
                    if (snapshot.connectionState == ConnectionState.done) {
                      return GridView.count(
                        shrinkWrap: true,
                        crossAxisCount: 2,
                        crossAxisSpacing: 16.0,
                        mainAxisSpacing: 16.0,
                        childAspectRatio: 10 / 12,
                        children: List.generate(snapshot.data.length,
                            (index) => _buildUser(snapshot.data[index])),
                      );
                    }
                    return GridView.count(
                      shrinkWrap: true,
                      crossAxisCount: 2,
                      crossAxisSpacing: 16.0,
                      mainAxisSpacing: 16.0,
                      childAspectRatio: 10 / 12,
                      children: List.generate(4, (index) => _buildWaiting()),
                    );
                  }),

终於完成30天的挑战，这30天比较像是我的学习笔记，对我自己来说，这30天帮助我厘清很多观念，毕竟为了做出这个clone，很多地方都要再看一次资料。前半的篇章还算可以，後半开始发现很多地方不是很熟，也激励自己去补足自己不会的东西，希望这些学习经验也可以帮助到别人，欢迎大家多多指教，感谢！