Flutter中使用shared_preferences本地存储

越陌度阡

发布于 2021-01-29 10:39:04

1.6K00

代码可运行

文章被收录于专栏：大前端（横向跨端 & 纵向全栈）大前端（横向跨端 & 纵向全栈）

运行总次数：0

代码可运行

1. 安装插件

配置 shared_preferences 插件。

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  date_format: ^1.0.6
  flutter_cupertino_date_picker: ^1.0.26+2 
  flutter_swiper: ^1.1.6
  fluttertoast: ^7.1.6
  http: ^0.12.2
  dio: ^3.0.10
  flutter_html: ^1.1.0
  flutter_inappwebview: ^4.0.0+4
  device_info: ^1.0.0
  amap_location: ^0.2.0
  image_picker: ^0.6.7+21
  video_player: ^1.0.1
  chewie: ^0.12.2
  connectivity: ^2.0.2

  #本地存储
  shared_preferences: ^0.5.12+4

在pubspec.yaml中配置保存后，在VS Code环境中会自动下载依赖包。

如果无法正常下载，执行 flutter pub get 。

2. 引入依赖

在需要用到的该插件的文件中引入插件包。

import 'package:shared_preferences/shared_preferences.dart';

3. 封装插件

// lib/common/Storage.dart
import 'package:shared_preferences/shared_preferences.dart';

class Storage{
    // 设置数据的方法
    static Future<void> setString(key,value) async{
        SharedPreferences sp = await SharedPreferences.getInstance();
        sp.setString(key, value);

        // 设置其它数据类型的方法
        // sp.setBool(key, value);
        // sp.setDouble(key, value);
        // sp.setInt(key, value);
        // sp.setStringList(key, value);
    }
    // 获取数据的方法
    static Future<String> getString(key) async{
        SharedPreferences sp = await SharedPreferences.getInstance();
        return sp.getString(key);
    }

    // 移除数据的方法
    static Future<void> removeString(key) async{
        SharedPreferences sp = await SharedPreferences.getInstance();
        sp.remove(key);
    }

    // 移除所有的键值对
    static Future<void> clearAll() async{
        SharedPreferences sp = await SharedPreferences.getInstance();
        sp.clear();
    }

}

4. 引入插件并使用

import 'package:flutter/material.dart';

// 引入封装的数据请求方法
import '../common/Storage.dart';

class StoragePage extends StatefulWidget {
    StoragePage({Key key}) : super(key: key);
    @override
    _StoragePageState createState() => _StoragePageState();
}

class _StoragePageState extends State<StoragePage> {

    String _username;
    // 获取数据
    getData() async{
        String username = await Storage.getString("username");
        setState(() {
            this._username=username;
        });
    }
    // 设置数据
    setData() async{
        await Storage.setString("username", "张三");
    }
    // 移除数据
    removeData() async{
        await Storage.removeString("username");
        setState(() {
            this._username=null;
        });
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text("本地存储"),
            ),
            body: Center(
                child: Column(mainAxisAlignment: MainAxisAlignment.center,children: [
                    RaisedButton(
                        child: Text('设置数据'),
                        onPressed: setData,
                    ),

                    SizedBox(height: 10),

                    RaisedButton(
                        child: Text('获取数据'),
                        onPressed:getData,
                    ),
 
                    SizedBox(height: 10),

                    RaisedButton(
                        child: Text('清除数据'),
                        onPressed:removeData,
                    ),
                    
                    SizedBox(height: 10),

                    RaisedButton(
                        child: this._username != null?Text(_username):Text("无名姓"),
                        onPressed: (){

                        },
                    ),      
                ]),
            ),
        );
    }
}

效果图如下：