Flutter本地存储插件stored的使用

Flutter本地存储插件stored的使用

stored 是一个用于从远程和本地源加载数据的Dart库。

问题：

• 现代软件需要数据表示形式灵活且始终可用。
• 用户期望他们的UI体验不会因新数据加载而受到影响（阻塞）。无论是社交、新闻还是企业对企业的应用，用户都希望在线和离线时都能获得无缝体验。
• 国际用户期望最小的数据下载量，因为大量下载的数据可能会导致巨额电话账单。

Store 是一个简化应用程序中数据获取、共享、存储和检索的类。Store 类似于仓储模式，并提供了一个基于dart:async构建的API，遵循单向数据流。

Store 在UI元素和数据操作之间提供了抽象层。

概述

Store 负责管理特定的数据请求。当你创建一个Store的实现时，你需要提供一个Fetcher，一个定义如何通过网络获取数据的函数。你还可以定义你的Store如何在内存和磁盘上缓存数据。由于Store返回的数据是一个Flow，线程处理变得非常简单！一旦构建好Store，它将处理围绕数据流的逻辑，允许你的视图使用最佳数据源，并确保最新的数据总是可用于离线使用。

Store 利用多重请求节流来防止对网络和磁盘缓存进行过多调用。通过使用Store，你可以消除向网络发送相同请求的可能性，同时添加两层缓存（内存和磁盘），并且能够将磁盘作为事实来源，在不经过Store的情况下直接修改磁盘（与可以提供可观察源的数据库如hive、sqflite或Realm一起使用效果最佳）。

示例代码

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stored Demo')),
        body: Center(child: MyStoreWidget()),
      ),
    );
  }
}

class MyStoreWidget extends StatefulWidget {
  [@override](/user/override)
  _MyStoreWidgetState createState() => _MyStoreWidgetState();
}

class _MyStoreWidgetState extends State<MyStoreWidget> {
  // 初始化Store实例
  final store = Store<int>(
    fetcher: () async {
      // 模拟网络请求
      await Future.delayed(Duration(seconds: 2));
      return 42;
    },
    inMemoryCache: true,
    onDiskCache: true,
  );

  [@override](/user/override)
  void initState() {
    super.initState();
    // 订阅Store的数据变化
    store.flow.listen((data) {
      print('Received data: $data');
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: () {
            // 触发数据获取
            store.fetch();
          },
          child: Text('Fetch Data'),
        ),
        SizedBox(height: 20),
        Text('Data: ${store.data}'),
      ],
    );
  }
}

代码解释

1. 导入库:

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

2. 初始化应用:

   void main() {
     runApp(MyApp());
   }
   

3. 创建应用界面:

   class MyApp extends StatelessWidget {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return MaterialApp(
         home: Scaffold(
           appBar: AppBar(title: Text('Stored Demo')),
           body: Center(child: MyStoreWidget()),
         ),
       );
     }
   }
   

4. 创建Store实例:

   class _MyStoreWidgetState extends State<MyStoreWidget> {
     final store = Store<int>(
       fetcher: () async {
         await Future.delayed(Duration(seconds: 2));
         return 42;
       },
       inMemoryCache: true,
       onDiskCache: true,
     );
   

5. 订阅Store的数据变化:

   [@override](/user/override)
   void initState() {
     super.initState();
     store.flow.listen((data) {
       print('Received data: $data');
     });
   }
   

6. 触发数据获取:

   ElevatedButton(
     onPressed: () {
       store.fetch();
     },
     child: Text('Fetch Data'),
   )
   

7. 展示数据:

   Text('Data: ${store.data}')