flutter - 在 Flutter 中存储缓存
问题描述
我有一个用于获取 gmys 并将结果加载到颤振应用程序的 api。我希望颤振应用程序加载数据并存储在缓存中。当用户访问该页面时,flutter 应用程序应该检查是否有互联网连接,如果有,应该从在线 api 加载数据,如果没有互联网连接,则应该从缓存 json 文件中加载。
目前,该应用程序仅在有互联网时才从在线 api 获取。贝娄是我的代码:
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
class GymList extends StatelessWidget {
final String apiUrl ="apitogetgyms";
Future<List<dynamic>> fetchGyms() async {
var result = await http.get(apiUrl);
return json.decode(result.body)['gyms'];
}
String _name(dynamic gyms) {
return gyms['name'];
}
String _location(dynamic gyms) {
return gyms['location'];
}
String _phone(dynamic gyms) {
return gyms['phone'];
}
String _email(dynamic gyms) {
return gyms['email'];
}
String _img(dynamic gyms){
return gyms['img'];
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Gyms List'),
),
body: Container(
child: FutureBuilder<List<dynamic>>(
future: fetchGyms(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.hasData) {
//print(_name(snapshot.data[]));
return ListView.builder(
padding: EdgeInsets.all(8),
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
return Card(
child: Column(
children: <Widget>[
ListTile(
leading: CircleAvatar(
radius: 30,
backgroundImage:
NetworkImage(snapshot.data[index]['img'])),
title: Text(_name(snapshot.data[index])),
subtitle: Text(_location(snapshot.data[index])),
trailing: Text(_email(snapshot.data[index])),
)
],
),
);
});
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
} else {
return Center(child: CircularProgressIndicator());
}
},
),
),
);
}
}
解决方案
您可以通过使用 2 个包shared_preferences和connectivity来实现此结果。
使用连接,您可以检查您的连接状态并知道您是否可以访问互联网。
import 'package:connectivity/connectivity.dart';
final connectivityResult = await (Connectivity().checkConnectivity());
if (connectivityResult == ConnectivityResult.none) {
// I am not connected.
} else {
// I am connected to internet.
}
然后使用 shared_preferences 您可以轻松保存 JSON 并在未连接到 Internet 时加载它。
import 'dart:convert';
import 'package:shared_preferences/shared_preferences.dart';
final jsonKey = 'json_key'; // Key used to save and get your data from SharedPreferences.
final prefs = await SharedPreferences.getInstance();
// Save your JSON as a String by encoding it.
await prefs.setString(jsonKey, jsonEncode(myJsonData));
// Get your JSON from SharedPreferences and decode it.
final json = jsonDecode(prefs.getString(jsonKey));
例子
import 'package:connectivity/connectivity.dart';
import 'dart:convert';
import 'package:shared_preferences/shared_preferences.dart';
Future<List<dynamic>> fetchGyms() async {
final jsonKey = 'json_key';
final prefs = await SharedPreferences.getInstance();
final connectivityResult = await (Connectivity().checkConnectivity());
if (connectivityResult == ConnectivityResult.none) {
final json = jsonDecode(prefs.getString(jsonKey));
return json['gyms'];
} else {
final result = await http.get(apiUrl);
await prefs.setString(jsonKey, jsonEncode(result.body.toString()));
return jsonDecode(result.body)['gyms'];
}
}
推荐阅读
- c++ - 传递 unique_ptr 的 C++ 向量
不通过所有权 - winrt-async - 如何修复 WinRT 中 IDL 文件的“参数化接口的参数无效”错误?
- javascript - 如何在 Angular 6 中键入输入字段时自动为手机号码输入字段添加“-”
- docusignapi - 如何在嵌入式发送视图上使用自动锚标记功能
- c# - SharpSnmp:从模拟器代理获取 OID 或 MIB
- python - Python中的HTML编辑
- php - VS Code 可以检测 PHP 中不存在的函数吗?
- python - 使用 pyinstaller 编译的 tkinter 程序不会加载图像
- node.js - 在响应 res.json() 中获取空数组;在 nodejs 代码中
- sql - nvarchar 只需要包含英文或格鲁吉亚字母