Flutter-保存用户数据
我目前正在创建一个跟踪通用加密数据的应用程序，与此数据一起，我们还发布了针对加密爱好者的新闻报道。该新闻文章数据的各个方面都以字符串形式存储，从图片网址到发布日期-下面的完整列表。
我正在寻找一种将这些数据保存到用户设备的方法。在理想情况下，我只是将这些数据保存在JSON数组中，但是除了不知道如何执行此操作之外，我不确定这是否是保存此数据以供以后显示的最有效方法。
如果您认为JSON是保存此数据的最佳方法，那么我只需要知道如何正确地将数据管理到一系列不同的已保存文章中，以及如何将其正确导入到我的Dart代码中。
该代码的示例很好，我希望在新的一年之前发布此应用，因此我需要获得的所有帮助。非常感谢。
这是我希望从this source保存/显示的上述数据：
- 来源-
source - 作者-
author - 说明-
description - 发布日期-
publishedAt - 文章标题-
title - 文章网址-
url - 文章图片-
urlToImage
编辑：尝试修改Shadowsheep的答案以适合索引模型
每个新闻小部件都是一个新的inkwell，它允许构建一个新的scaffold。从这个scaffold中可以看到保存文章的选项。保存时，代码当前仅使用title，description，URL和Image URL更改以下字符串的值。
-
_sTitle -
_sDescription -
_sURL -
_sURLtoImage
我真的希望有一种方法，如Shadowsheep所述，将数据库保存到用户的设备中。这意味着即使用户关闭和打开应用程序，保存的文章仍将在设备上保留。
以下代码是显示新闻数据的确切用例。
CarouselSlider(
items: [1,2,3,4,5,6,7,8,9,10].map((index) {
return Builder(
builder: (BuildContext context) {
return Padding(
padding: EdgeInsets.only(
top: 5.0,
bottom: 20.0,
),
child: InkWell(
borderRadius: BorderRadius.only(
topLeft: const Radius.circular(15.0),
topRight: const Radius.circular(15.0),
),
onTap: () {
print('Opened article scaffold: "' + articles[index].title + "\"");
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
backgroundColor: const Color(0xFF273A48),
elevation: 0.0,
title: Container(
width: _width*0.90,
height: 30,
padding: const EdgeInsets.only(
bottom: 5,
top: 5,
left: 10,
right: 10,
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
alignment: Alignment.center,
child: AutoSizeText(
'Published ' + DateFormat.yMMMd().format(DateTime.parse(articles[index].publishedAt)) + ", "+ DateFormat.jm().format(DateTime.parse(articles[index].publishedAt)),
overflow: TextOverflow.ellipsis,
maxLines: 1,
minFontSize: 5,
maxFontSize: 20,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontFamily: 'Poppins',
),
),
),
),
body: Center(
child: Scaffold(
resizeToAvoidBottomPadding: false,
body: Center(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
const Color(0xFF273A48),
Colors.blueGrey
],
),
),
padding: const EdgeInsets.only(
top: 20,
left: 10,
right: 10,
bottom: 50
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
FutureBuilder<Null>(future: _launched, builder: _launchStatus),
AutoSizeText(
articles[index].title,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
maxFontSize: 30,
minFontSize: 15,
maxLines: 3,
style: TextStyle(
color: Colors.white,
fontFamily: 'Poppins',
),
),
Divider(
color: Colors.transparent,
height: 15.0,
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15.0),
color: Colors.transparent,
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(70),
blurRadius: 50.0,
)
],
image: DecorationImage(
image: NetworkImage(articles[index].urlToImage),
fit: BoxFit.fitHeight,
),
),
height: 220,
width: 317.5,
),
Divider(
color: Colors.transparent,
height: 15.0,
),
],
),
Container(
padding: const EdgeInsets.only(
left: 20,
right: 20
),
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
child: AutoSizeText(
articles[index].description,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
maxFontSize: 30,
minFontSize: 10,
maxLines: 10,
style: TextStyle(
color: Colors.white,
fontFamily: 'Poppins',
),
),
width: _width*0.90,
height: _height*0.20,
),
Container(
padding: const EdgeInsets.all(4.0),
decoration: BoxDecoration(
color: const Color(0xFF273A48),
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
IconButton(
icon: Icon(
Icons.favorite_border,
color: Colors.red
),
iconSize: 35.0,
onPressed: () {
_sTitle = articles[index].title;
_sDescription = articles[index].description;
_sURL = articles[index].url;
_sURLtoImage = articles[index].urlToImage;
Navigator.push(
context,
MaterialPageRoute(builder: (context) => _favoritesScreen())
);
}
),
IconButton(
icon: Icon(
Icons.mobile_screen_share,
color: Colors.white,
),
iconSize: 35.0,
onPressed: () {
Share.share(
articles[index].title + "\n\nCheck out this article at:\n" + articles[index].url + "\n\nLearn more with Cryp - Tick Exchange",
);
}
),
IconButton(
icon: Icon(Icons.launch, color: Colors.lightBlueAccent),
iconSize: 32.5,
onPressed: () => setState(() { _launched = _launchInWebViewOrVC(articles[index].url);}),
),
],
),
),
],
),
),
),
),
),
)
)
);
},
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: const Color(0xFF273A48),
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(70),
offset: const Offset(5.0, 5.0),
blurRadius: 12.5,
)
],
image: DecorationImage(
alignment: Alignment.topCenter,
image: NetworkImage(articles[index].urlToImage),
fit: BoxFit.cover,
),
),
height: _height*0.35,
width: _width*0.725,
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.bottomCenter,
child: Stack(
alignment: Alignment.bottomRight,
children: <Widget>[
Container(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
decoration: BoxDecoration(
color: const Color(0xFF273A48),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0)
),
),
height: 60.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Flexible(
child: Container(
width: _width*0.725,
child: Text(
articles[index].title,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
maxLines: 2,
style: TextStyle(
color: Colors.white,
fontFamily: 'Poppins',
),
),
),
),
Text(
'Published ' + DateFormat.yMMMd().format(DateTime.parse(articles[index].publishedAt)) + ", "+ DateFormat.jm().format(DateTime.parse(articles[index].publishedAt)),
overflow: TextOverflow.ellipsis,
maxLines: 1,
style: TextStyle(
color: Colors.blueGrey,
fontSize: 10.0,
fontFamily: 'Poppins',
),
),
],
)
),
Container(
width: 25.0,
height: 20.0,
alignment: Alignment.center,
child: Text(
"$index",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.blueGrey,
fontSize: 10.0,
fontFamily: "Poppins"
),
)
),
],
),
)
],
),
),
),
);
},
);
}).toList(),
height: 400,
autoPlay: true,
)
1 个答案:
答案 0 :(得分：4)
如果您想以持久性的方式在Dart代码中保存数据并能够在Android和iOS上使用它，我建议您使用 sqlite插件，如下所示：
https://github.com/tekartik/sqflite
否则，如果您只需要保存一堆数据，请使用 shared_preferences 插件
https://github.com/flutter/plugins/tree/master/packages/shared_preferences
这两个插件都支持Android和iOS
您正在请求很多代码^ _ ^（不是）。
因此，首先您需要通过HTTP调用获取json。为此，请使用http flutter package：
const request = "https://newsapi.org/v2/top-headlines?sources=crypto-coins-news&apiKey=d40a757cfb2e4dd99fc511a0cbf59098";
http.Response response = await http.get(request);
debugPrint("Response: " + response.body);
用异步方法将其包装起来：
void _jsonAndSqlite() async {
...
}
在response变量中，您有 full JSON 。
现在您需要序列化，我建议您使用此really good reading。
我为此答案选择了 Manaul JSON Decoding
手动JSON解码是指在 飞镖：转换。它涉及将原始JSON字符串传递给 json.decode（）方法，然后在 映射方法返回。它没有外部 依赖项或特定的设置过程，这对于快速 概念证明。
var myBigJSONObject = json.decode(response.body);
var status = myBigJSONObject['status'];
var totalResults = myBigJSONObject['totalResults'];
var myArticles = myBigJSONObject['articles'];
debugPrint("articles: " + myArticles.toString());
现在我们有文章将尝试通过Sqflite包将它们保存在Sqlite DB上
var myFirstArticle = myArticles[0];
var author = myFirstArticle['author'];
var title = myFirstArticle['title'];
// Get a location using getDatabasesPath
var databasesPath = await getDatabasesPath();
String path = join(databasesPath, 'test.db');
// Delete the database
await deleteDatabase(path);
// open the database
Database database = await openDatabase(path, version: 1,
onCreate: (Database db, int version) async {
// When creating the db, create the table
await db.execute(
'CREATE TABLE Article (id INTEGER PRIMARY KEY, author TEXT, title TEXT)');
});
// Insert some records in a transaction
await database.transaction((txn) async {
int id1 = await txn.rawInsert(
'INSERT INTO Article(author, title) VALUES("$author", "$title")');
debugPrint('inserted1: $id1');
});
就是这样！有趣的学习和编码。阅读我为您发布的有关JSON序列化的文章，并尝试使用我的代码，并尝试添加其他一些最佳实践，它们可能更适合您的需求。这只是一个可以玩的快速游乐场。
所以我最终使用了这种方法：
[...]
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';
[...]
void _jsonAndSqlite() async {
const request =
"https://newsapi.org/v2/top-headlines?sources=crypto-coins-news&apiKey=d40a757cfb2e4dd99fc511a0cbf59098";
http.Response response = await http.get(request);
debugPrint("Response: " + response.body);
var myBigJSONObject = json.decode(response.body);
var status = myBigJSONObject['status'];
var totalResults = myBigJSONObject['totalResults'];
var myArticles = myBigJSONObject['articles'];
debugPrint("articles: " + myArticles.toString());
var myFirstArticle = myArticles[0];
var author = myFirstArticle['author'];
var title = myFirstArticle['title'];
// Get a location using getDatabasesPath
var databasesPath = await getDatabasesPath();
String path = join(databasesPath, 'test.db');
// Delete the database
await deleteDatabase(path);
// open the database
Database database = await openDatabase(path, version: 1,
onCreate: (Database db, int version) async {
// When creating the db, create the table
await db.execute(
'CREATE TABLE Article (id INTEGER PRIMARY KEY, author TEXT, title TEXT)');
});
// Insert some records in a transaction
await database.transaction((txn) async {
int id1 = await txn.rawInsert(
'INSERT INTO Article(author, title) VALUES("$author", "$title")');
debugPrint('inserted1: $id1');
});
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？