Flutter 数据存储 SharedPreferences

Flutter 数据存储之SharedPreferences

咱们在作APP开发时, 常常会涉及到用户数据的存储(好比保存用户登陆token、用户的某些偏好设置等). 开发过Android的朋友应该知道有 SharedPreferences. 在 Flutter 中, 一样为咱们提供了十分类似的(甚至名字都同样)组件, 为咱们提供数据存储的能力.

本篇教程将用一个简单的小Demo, 让你彻底掌握 数据存储之SharedPreferences 的用法.

若图片展现异常, 请访问个人 官方博客

效果

有图有真相, 咱们先来看一下咱们最终的效果:

仓库地址

全部源码(含注释)均已上传至开源仓库:

• Github
• 码云

准备工做

开发环境

本博客的环境一览:

环境	版本号
Flutter	1.14.6 beta
Dart	2.8.0-dev.5.0
Android Studio	3.5.2

注意您的环境和文中的差别, 避免出现不兼容的状况哦!

需具有的条件

要顺利阅读本文, 假定您已经具有如下条件:

1. 一台电脑(能同时运行IDE、APP模拟器).
2. Android Studio 或 VSCode(或任何你喜欢的代码编辑器).
3. Flutter开发环境.
4. 您掌握了Flutter的开发基础(至少了解目录结构、Dart语言基本知识).

实战开始

建立Flutter项目

建立一个新的Flutter项目, 命名为my_shared_preferences_demo(您能够随意起名, 可是在下面也要替换名字为您本身的).

注意: Flutter项目名不要和引入的某个第三方库重名, 不然会报: A package may not list itself as a dependency

代码截图:

清理代码

由于咱们的项目过于简单, 暂时不须要进行测试. 删除./test目录:

避免冗余代码误导咱们, 替换./lib/main.dart为:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SharedPreferences Demo',
      home: MyHomePage(title: 'SharedPreferences Demo Page'),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[],
        ),
      ),
    );
  }
}

导入 SharedPreferences 第三方库

进入./pubspec.yaml, 添加依赖:

dependencies:
  shared_preferences: ^0.5.6+3

你也能够去官网查看 最新的shared_preferences

截图:

更新包, 在终端中输入(或者点击IDE的更新包的按钮):

flutter packages get

运行项目:

如今, 咱们能够正式进行数据存储的操做了!

建立数据读写工具类

实际项目中, 咱们定会屡次用到数据的读写, 因此封装一个工具类是比较明智的选择.

建立./lib/shared_preferences_util.dart

建立SharedPreferencesUtil类

class SharedPreferencesUtil {

}

由于后面要用到SharedPreferences, 因此导入shared_preferences:

import 'package:shared_preferences/shared_preferences.dart';

数据存储函数 saveData()

添加函数saveData():

/// 保存数据
  static saveData<T>(String key, T value) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();

    switch (T) {
      case String:
        prefs.setString(key, value as String);
        break;
      case int:
        prefs.setInt(key, value as int);
        break;
      case bool:
        prefs.setBool(key, value as bool);
        break;
      case double:
        prefs.setDouble(key, value as double);
        break;
    }
  }

在定义函数时, 名称后面多了一个" <T>", 这运用了泛型. 若对此有疑问, 请自行搜索"dart 泛型"的相关知识.

代码解析: 函数要求传入两个值, key以及value. key为咱们要存的值的"名字". 这个名字是惟一的, 后续咱们在读取数据的时候也须要传入与这个key. value就是它对应的值. 函数体内, 咱们先在首行引入一个SharedPreferences的实例, 便于后续使用. 使用switch分支, 用来判断传入的泛型类型. 判断完成后, 分别调用prefs.setXXX(key, value), 完成数据存储.

代码截图:

数据读取函数 getData()

有数据存储函数, 天然也应该有与之对应的数据读取函数, 咱们来写:

添加函数getData():

/// 读取数据
  static Future<T> getData<T>(String key) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();

    T res;
    switch (T) {
      case String:
        res = prefs.getString(key) as T;
        break;
      case int:
        res = prefs.getInt(key) as T;
        break;
      case bool:
        res = prefs.getBool(key) as T;
        break;
      case double:
        res = prefs.getDouble(key) as T;
        break;
    }
    return res;
  }

代码解析: 与上面的 saveData()函数相似, 一样运用了泛型以及 switch. 不一样的是读取数据时调用的是 prefs.getXXX()

代码截图:

到这里, 咱们几乎已经完成了咱们的教程. 反应快的同窗应该已经能够直接使用了. 可是阿航的教程要保证其完整性, 让你们都会用, 而且理解为何这么用. 咱们来绘制APP界面, 更直观的测试!

绘制用于测试工具类的简单界面

回到./lib/main.dart, 咱们来增长几个按钮和输入框.

导入SharedPreferencesUtil

先导入SharedPreferencesUtil方便后续使用:

import 'package:my_shared_preferences_demo/shared_preferences_util.dart';

定义实例变量

在_MyHomePageState定义实例变量_savedValue和_currentInputValue, 用于记录存储及当前输入的值:

// 保存的值
  String _savedValue = "加载中..";

  // 当前输入的值
  String _currentInputValue;

初始化页面时加载数据.

定义initState(), 在初始化页面时读取已存的数据

@override
  void initState() {
    super.initState();
    SharedPreferencesUtil.getData<String>("myData").then((value) {
      setState(() {
        _savedValue = value;
      });
    });
  }

代码解析: 能够看到 initState()上有 @override, 由于 initState()为继承过来的函数. 函数内部先调用 super.initState(). 接下来就是经过此前定义的 SharedPreferencesUtil获取存储的数据. 由于 shared_preferences提供的函数是 async(异步)的, 因此须要经过 .then()来保证其获取到数据后再进行后续操做. 获取到value后, 存至_savedValue.

接下来就是绘制界面了, 在build->Scaffold->body:Center->child: Column->children中添加如下代码块:

// 用于显示数据的Text
            Text(
              _savedValue == null ? "无数据" : _savedValue,
              style: TextStyle(fontSize: 60, fontWeight: FontWeight.bold),
            ),
            // 用于修改数据的输入框
            TextField(
              onChanged: (value) {
                _currentInputValue = value;
              },
              // 仅为美观, 增长输入框的边框
              decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(10.0),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(15.0),
                  )),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                // 用于触发保存数据的按钮
                RaisedButton(
                  child: Text("保存"),
                  onPressed: () {
                    // 当点击按钮时, 调用存储数据的函数
                    SharedPreferencesUtil.saveData<String>(
                        "myData", _currentInputValue);

                    // 同时渲染当前显示的保存的值
                    setState(() {
                      _savedValue = _currentInputValue;
                    });
                  },
                ),
                RaisedButton(
                  child: Text("清空数据"),
                  onPressed: () {
                    // 当点击按钮时, 调用存储数据的函数
                    SharedPreferencesUtil.saveData<String>("myData", null);

                    // 同时渲染当前显示的保存的值
                    setState(() {
                      _savedValue = "无数据";
                    });
                  },
                )
              ],
            ),

代码解析: 这里虽然看起来代码多一点, 实质上只有1个输入框和2个按钮. 里面没有特别复杂的逻辑, 全部说明都在代码注释中, 可自行查看.

以上的代码截图:

大功告成

若你的代码没有问题, 运行项目, 效果应该是这样的:

经过以上的一些步骤, 咱们终于完成了 Flutter数据存储之SharedPreference, 是否是很简单?

仓库地址　

全部源码(含注释)均已上传至开源仓库:

• Github
• 码云

对文章如有任何问题、异议以及改进建议, 欢迎在下方进行评论. 做者将尽快回复! 若图片展现异常, 欢迎阅读官方博客.

更多更好的教程/博客/资讯, 欢迎访问个人官网: 阿航的技术小站.