Flutter - Sending SQL data to a ListView - database

Question

Using the flutter package sqflite I've managed to save data from a news source to a database, such as title, description and more.
Please take the time to look at this application created database file that follows my structure.
This is how I create the database, and how I save data to it from an online source.
var title = articles[index].title;
var description = articles[index].description;
var url = articles[index].url;
var urlToImage = articles[index].urlToImage;
var publishedAt = articles[index].publishedAt;
var databasesPath = await getDatabasesPath();
String path = join(databasesPath, 'saved_articles.db');
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, title TEXT, description TEXT, url TEXT, urltoimage TEXT, publishedat TEXT)');
});
print(database);
print(databasesPath);
// Insert some records in a transaction
await database.transaction((txn) async {
int id1 = await txn.rawInsert(
'INSERT INTO Article(title, description, url, urltoimage, publishedat) VALUES("$title", "$description", "$url", "$urlToImage", "$publishedAt")'
);
debugPrint('inserted1: $id1');
});
I'm looking for a method in which to send this data straight to an ordered ListView. The end goal for this being a favourites page which saves articles to the user's device for offline viewing.
This is how I'm retrieving specific data for converting into the bottom title list.
var databasesPath = await getDatabasesPath();
String path = join(databasesPath, 'saved_articles.db');
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, title TEXT, description TEXT, url TEXT, urltoimage TEXT, publishedat TEXT)');
});
List<Map> title = await database.rawQuery('SELECT title FROM Article');
List<Map> description = await database.rawQuery('SELECT description FROM Article');
List<Map> url = await database.rawQuery('SELECT url FROM Article');
This is what I'm using to send specific queries to list, but I'm not sure where to go from here in terms of creating a viable structure for sending this data to the desired ListView
List<Map> title = await database.rawQuery('SELECT title FROM Article');
Thanks

Answer 1

I'm not entirely sure I understand your question or issue, so please follow up if I'm missing something.
I'm looking for a method in which to send this data straight to an ordered ListView.
From this, I understand your question as you are just wondering what to do next in flutter?
If so, I would recommend taking a look at: https://pub.dartlang.org/packages/jaguar_serializer
Then here's what I would do
Create an Article model, following jaguar's readme OR just make a manual function to convert a map to an instance of Article.
import 'package:jaguar_serializer/jaguar_serializer.dart';
part 'article.jser.dart';
class Article {
string title;
string description;
string url;
etc...
}
etc..
Run the cli tool
Create a query to get a List of all articles, such as (ordering in sql is faster)
'SELECT title, description, url FROM Article ORDER BY title'
Map that to a list of articles (again take a look at jaguar readme for creatont a JsonRepo.
List<Article> articles = jsonRepo.decodeList<Complete>(response.body);
Then you can just pass in your articles to the ListView in flutter.
ListView.builder(
padding: EdgeInsets.all(8.0),
itemExtent: 20.0,
itemBuilder: (BuildContext context, int index) {
return Text('entry ${articles[index].title}');
},
)