android - Flutter - 让应用在设备离线时显示之前获取的数据
问题描述
我是 Flutter 的新手,需要一些帮助。我构建了一个随机笑话生成器应用程序,它从 API 读取数据并在每次按下按钮时显示一个新笑话。我想让应用程序在设备离线时显示以前获取的数据。我尝试在线搜索,但没有发现使用 Flutter 可以做到这一点。
class _HomePageState extends State<HomePage> {
List data;
Future<Jokes> post;
String url="https://official-joke-api.appspot.com/random_joke";
var response;
Future<Jokes> getData() async {
response =
await http.get(url, headers: {"Accept": "application/json"});
if (response.statusCode == 200) {
return Jokes.fromJson(json.decode(response.body));
} else {
throw Exception('Failed to load post');
}
}
changeApi()
{
setState(() {
if (response.statusCode == 200) {
return Jokes.fromJson(json.decode(response.body));
} else {
throw Exception('Failed to load post');
}
});
}
@override
void initState()
{
super.initState();
this.getData();
}
@override
Widget build(BuildContext context) {
final key = new GlobalKey<ScaffoldState>();
// TODO: implement build
return Scaffold(
key: key,
backgroundColor: Colors.amberAccent,
body: new Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new FutureBuilder<Jokes>(
future:
getData(),
builder: (context, snapshot) {
if (snapshot.hasData) {
//checks if the response returns valid data
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new GestureDetector(
child: new Text(
snapshot.data.setup ,
style: TextStyle(fontFamily: "Rock Salt"),
),
onLongPress: ()
{
Clipboard.setData(new ClipboardData(text: snapshot.data.setup, ));
key.currentState.showSnackBar(
new SnackBar(content: new Text("Copied to Clipboard"),));
},
),
/
SizedBox(
height: 10.0,
),
new GestureDetector(
child: new Text(
" - ${snapshot.data.punchline}",
style: TextStyle(fontFamily: "Roboto"),
),
onLongPress: ()
{
Clipboard.setData(new ClipboardData(text: snapshot.data.punchline));
key.currentState.showSnackBar(
new SnackBar(content: new Text("Copied to Clipboard"),));
},
),
],
),
);
} else if (snapshot.hasError) {
//checks if the response throws an error
return Text("${snapshot.error}");
}
return CircularProgressIndicator();
},
),
SizedBox(
height: 25.0,
),
new RaisedButton(
onPressed: changeApi,
color: Colors.pinkAccent,
child: Text("Press for a new joke", style: TextStyle(color: Colors.white,)),
)
],
),
),
);
}
}
class Jokes {
final String setup;
final String punchline;
Jokes({this.setup, this.punchline});
factory Jokes.fromJson(Map<String, dynamic> json) {
return Jokes(setup: json['setup'], punchline: json['punchline']);
}
}
这是我的完整代码:代码
解决方案
有一些关于缓存的视频,一个来自Flutter 团队,一个来自 tensor Programming channel。
您可以使用连接插件来检查设备是否离线。如果设备离线,显示来自shared_preferences或sqflite的数据,如果它在线,获取新数据(当然更新你的缓存)。
推荐阅读
- x86 - 英特尔内部函数在字符串中查找匹配字符的位置?
- c++ - 增加递归深度
- stm32 - 停止在 cubeIDE 中使用 HAL
- android - WebView + 服务 Android
- c++ - 交叉编译 Halide 时,链接器给出未定义符号错误
- java - 如何比较类是否有很多字段值?
- python - 使用 PostgreSQL 通过 flask_sqlalchemy 存储从新闻网站抓取的数据
- javascript - 如何根据其相对位置检测鼠标位置
- javascript - 我一直在努力做到这一点,以便如果用户滚动他们将使用 jquery 滚动到特定位置
- javascript - (JavaScript) 为什么我的 if/else 代码不起作用?