Fetch Data From database and show on listView.builder? - flutter

Question

I want to fetch data from the Database and want to show all the records of some columns by using listView.builder in flutter code .How I can do this ??
I want to fetch data from the Database and want to show all the records of some columns by using listView.builder in flutter code .How I can do this ??
static Future<List> getData() async {
final db = await SQLHelper.db();
var data= (await db.rawQuery('select column1,column2,column3,column4 From table'));
return data.toList();
}
import 'package:flutter/material.dart';
import 'package:test_02/dbHelper.dart';
class showOutlets extends StatefulWidget {
#override
State<showOutlets> createState() => showOutletsState();
}
class showOutletsState extends State<showOutlets> {
num age = -1;
String birthDate = "";
var data ;
List<dynamic> list = [SQLHelper.getOutletsData()];
bool _isLoading = false;
void _showFullRecord() async {
data = await SQLHelper.getOutletsData( );
setState(() {
data =data;
_isLoading = false;
});
}
static var boldStyle= const TextStyle(
fontWeight: FontWeight.bold,
);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('User Data' ),
),
body: _isLoading? const Center(
child: CircularProgressIndicator(),
)
: ListView.builder(
itemCount: list.length,
itemBuilder: (context, index ) => Card(
color: Colors.orangeAccent,
// color: Colors.orange[200],
margin: const EdgeInsets.all(15),
child: Column(
children: [
const Text("USER INFORMATION ",
style: TextStyle(
fontSize: 20.0,
),),
// Text('NAME:${data}'), // how can I show the data on the screen
],
),
)
)
);
}

Answer 1

Create state variable future,
late final future = YourDBClass.getData();
Now use FutureBuilder
FutureBuilder(
future: future,
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(...loaded data on snapshot.dat..a);
}
if (snapshot.hasError) return Text("error");
return CircularProgressIndicator();
},
),
More about FutureBuilder

Answer 2

I didn't understand what you really want. but here is an example of how you can get data from database and show them on the screen.
import 'package:flutter/material.dart';
void main() {
runApp(showOutlets());
}
class showOutlets extends StatefulWidget {
#override
State<showOutlets> createState() => showOutletsState();
}
class showOutletsState extends State<showOutlets> {
num age = -1;
String birthDate = "";
bool _isLoading = true;
List<dynamic> dataList;
_getData() async {
dataList = await getDataFromDatabase(); // get data here
_isLoading = false;
}
#override
void initState() {
_getData();
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('User Data'),
),
body: _isLoading
? const Center(
child: CircularProgressIndicator(),
)
: ListView.builder(
itemCount: dataList.length,
itemBuilder: (context, index) => Card(
// Design your card.
color: Colors.orangeAccent,
margin: const EdgeInsets.all(15),
child: Column(
children: [
const Text(
"USER INFORMATION ",
style: TextStyle(
fontSize: 20.0,
),
),
],
),
),
),
);
}
}