【Flutter】shared_preferences 本地存储 ( 简介 | 安装 shared_preferences 插件 | 使用 shared_preferences 流程 )

简介: 【Flutter】shared_preferences 本地存储 ( 简介 | 安装 shared_preferences 插件 | 使用 shared_preferences 流程 )

文章目录

一、shared_preferences 本地存储插件简介

二、安装 shared_preferences 插件

三、使用 shared_preferences 流程

四、完整代码示例






一、shared_preferences 本地存储插件简介


shared_preferences 是 Flutter 提供的 本地数据存取 插件 ;


在不同的平台 , 基于不同的机制开发 , 如 Android 平台中基于 SharedPreferences 开发 , iOS 平台中基于 NSUserDefaults 开发 ;


访问本地文件是耗时操作 , 因此访问 shared_preferences 存储是一个 异步操作 ;






二、安装 shared_preferences 插件


安装 shared_preferences 插件 :


shared_preferences 插件地址 : https://pub.dev/packages/shared_preferences


按照 https://pub.dev/packages/shared_preferences/install 地址的安装教程进行安装 ;


首先 , 在 pubspec.yaml 配置文件中 , 导入插件包 :


dependencies:
  shared_preferences: ^2.0.7


然后 , 下载插件包 , 点击 Pub Get 按钮 , 下载插件包到本工程中 ;




最后 , 在 Dart 代码中导入如下代码 , 即可使用 shared_preferences ;


import 'package:shared_preferences/shared_preferences.dart';






三、使用 shared_preferences 流程


在完成了上述安装 shared_preferences 插件之后 , 才能开始使用 ;


首先 , 导入插件包 ;


import 'package:shared_preferences/shared_preferences.dart';


然后 , 获取 shared_preferences 实例 ;


final prefs = await SharedPreferences.getInstance();


最后 , 通过上述 shared_preferences 实例可以 设置 / 读取 存储的键值对数值 ;


/// 设置值
prefs.setInt('counter', counter);
/// 获取值 
final counter = prefs.getInt('counter') ?? 0;}


如果要删除数据 , 调用 shared_preferences 实例的 remove 方法 ;


prefs.remove('counter');



下图是 Flutter 的 SharedPreferences 类提供的所有方法 , 重点关注数据的访问方法 ;


image.png


数据存储示例 :


 

_setValue() async {
    /// 先获取 SharedPreferences 实例
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      textInfo = '保存字符串 " 小王 " 到 shared_preferences 完成';
    });
    /// 将数据保存到 SharedPreferences 中
    await prefs.setString("name", "小王");
  }


数据访问示例 :


 _getValue() async {

_getValue() async {
    /// 先获取 SharedPreferences 实例
    SharedPreferences prefs = await SharedPreferences.getInstance();
    /// 从 SharedPreferences 获取数据
    String? name = await prefs.getString("name");
    setState(() {
      textInfo = '从 shared_preferences 取出数据 " ${name} "';
    });
  }





四、完整代码示例


import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  String textInfo = "点击按钮保存数据到 shared_preferences 中";
  _setValue() async {
    /// 先获取 SharedPreferences 实例
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      textInfo = '保存字符串 " 小王 " 到 shared_preferences 完成';
    });
    /// 将数据保存到 SharedPreferences 中
    await prefs.setString("name", "小王");
  }
  _getValue() async {
    /// 先获取 SharedPreferences 实例
    SharedPreferences prefs = await SharedPreferences.getInstance();
    /// 从 SharedPreferences 获取数据
    String? name = await prefs.getString("name");
    setState(() {
      textInfo = '从 shared_preferences 取出数据 " ${name} "';
    });
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("shared_preferences 数据访问"),
        ),
        body: Column(
          children: [
            Text(textInfo),
            ElevatedButton(
              onPressed: (){
                _setValue();
              },
              child: Text("存储数据到 shared_preferences 中"),
            ),
            ElevatedButton(
              onPressed: (){
                _getValue();
              },
              child: Text("从 shared_preferences 中获取数据"),
            ),
          ],
        ),
      ),
    );
  }
}


执行结果 :

image.png


目录
相关文章
|
Dart Android开发
鸿蒙Flutter实战:05-使用第三方插件
在鸿蒙Flutter开发中,使用原生功能需借助插件。可自编原生ArkTS代码或采用第三方插件。自编代码通过PlatformView或MethodChannel实现;第三方插件需确保适配鸿蒙,否则须配置替代插件或自行开发。
601 1
鸿蒙Flutter实战:05-使用第三方插件
|
API Android开发 iOS开发
除了permission_handler插件,还有哪些方法可以实现Flutter动态申请权限?
除了permission_handler插件,还有哪些方法可以实现Flutter动态申请权限?
805 167
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
993 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
530 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
943 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
522 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
1514 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
687 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
479 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
Dart 前端开发 架构师
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
670 26