How to restore data in Listview - sqlite

Question

My goal is restoring data from sql database to Listview. Firstly, I started with creating database and model class. Secondly I realized that I have to use FutureBuilder. But I can't understood, how to use this stuff in my case. In addition I have known, that have to use GlobalKey.
This is my code. In this version of my code, Alert dialog doesn't work
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:path/path.dart';
import 'dart:ui';
import 'package:samuraigym/program_training_handler.dart';
import 'package:samuraigym/my_icons_icons.dart' as custicon;
import 'package:sqflite/sqflite.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:async';
import 'dart:io' as io;
import 'package:fluttertoast/fluttertoast.dart';
class MeasurementsScreen extends StatefulWidget {
#override
_MeasurementsScreenState createState() => _MeasurementsScreenState();
}
class _MeasurementsScreenState extends State<MeasurementsScreen> {
List<ListItem> listItems;
final scaffoldKey = new GlobalKey<ScaffoldState>();
final formKey = new GlobalKey<FormState>();
String typeOfMuscle;
String numberOfMuscle;
var nameItem = ["Рост","Вес","Шея","Плечевой пояс","Грудь","Бицепс",
"Предплечье","Запястье","Живот","Бедро","Голень","Лодыжка"];
#override
void initState() {
super.initState();
initListItems();
}
void initListItems() {
listItems = [
new ListItem(
detail: nameItem[0],
index: 0,
data: " "),
new ListItem(
detail: nameItem[1],
index: 1,
data: " "),
new ListItem(
detail: nameItem[2],
index: 2,
data: " "),
new ListItem(
detail: nameItem[3],
index: 3,
data: " "),
new ListItem(
detail: nameItem[4],
index: 4,
data: " "),
new ListItem(
detail: nameItem[5],
index: 5,
data: " "),
new ListItem(
detail: nameItem[6],
index: 6,
data: " "),
new ListItem(
detail: nameItem[7],
index: 7,
data: " "),
new ListItem(
detail: nameItem[8],
index: 8,
data: " "),
new ListItem(
detail: nameItem[9],
index: 9,
data: " "),
new ListItem(
detail: nameItem[10],
index: 10,
data: " "),
new ListItem(
detail: nameItem[11],
index: 11,
data: " ")
];
}
void sumbitContact(int index, String numberOfMuscle) {
if(this.formKey.currentState.validate())
formKey.currentState.save();
else
return null;
var measurementsDatabaseModel = MeasurementsDatabaseModel();
measurementsDatabaseModel.numberOfMuscle = numberOfMuscle;
measurementsDatabaseModel.typeOfMuscle = index as String;
var dbHelper = DatabaseHelperForMeasurements();
dbHelper.addNewMeasurementsDatabaseModel(measurementsDatabaseModel);
Fluttertoast.showToast(msg: 'Contact was saved',
toastLength: Toast.LENGTH_SHORT);
}
#override
Widget build(BuildContext context) {
return new Scaffold(
key: scaffoldKey,
backgroundColor: Color(0xff2b2b2b),
appBar: AppBar(
backgroundColor: Colors.lightGreen[400],
title: Text(
'Замеры',
style: new TextStyle(
color: Colors.white
),),
leading: IconButton(
icon:Icon(Icons.arrow_back),
color: Colors.white ,
onPressed:() => Navigator.of(context).pop(),
),
),
body: FutureBuilder<List<MeasurementsDatabaseModel>>(
future: getMeasurementsDatabaseModelFromDB(),
builder: (context, snapshot){
if(snapshot.data != null && snapshot.hasData){
return ListView.builder(
physics: BouncingScrollPhysics(),
itemCount: listItems.length,
itemBuilder: (BuildContext ctxt, int index) => listItems[index],
);
} else {
return ListView.builder(
physics: BouncingScrollPhysics(),
itemCount: listItems.length,
itemBuilder: (BuildContext ctxt, int index) => listItems[index],
);
}
}
)
);
}
}
Future<List<MeasurementsDatabaseModel>> getMeasurementsDatabaseModelFromDB() async {
var dbHelper = DatabaseHelperForMeasurements();
Future<List<MeasurementsDatabaseModel>> contacts = dbHelper.getMeasurementsDatabaseModel();
return contacts;
}
class ListItem extends StatefulWidget {
String detail;
int index;
String data;
_MeasurementsScreenState measurementsScreen;
ListItem({Key key, this.detail, this.index, this.data}) : super(key: key);
#override
_ListItem createState() => _ListItem(measurementsScreen);
}
class _ListItem extends State<ListItem> {
bool isAppear = false;
final _MeasurementsScreenState measurementsScreen;
DatabaseHelperForMeasurements db = DatabaseHelperForMeasurements();
_ListItem(this.measurementsScreen);
MeasurementsDatabaseModel measurementsDatabaseModel = new MeasurementsDatabaseModel();
String typeOfMuscle;
String numberOfMuscle;
String lastSelectedValue;
var name = ["Рост","Вес","Шея","Плечевой пояс","Грудь","Бицепс",
"Предплечье","Запястье","Живот","Бедро","Голень","Лодыжка"];
var indication = ["Ваш рост","Ваш вес","Ваша шея","Ваш плечевой пояс","Ваша грудь","Ваш бицепс",
"Ваше предплечье","Ваше запястье","Ваш живот","Ваше бедро","Ваша голень","Ваша лодыжка"];
var prefix = ["см: ","кг: ","см: ","см: ","см: ","см: ","см: ","см: ","см: ","см: ","см: ","см: "];
var prefixAlert = ["см","кг","см","см","см","см","см","см","см","см","см","см"];
TextEditingController customcintroller;
Future<String> createAlertDialog(BuildContext context, int indexAl) async{
customcintroller = TextEditingController();
String returnVal = await showDialog(
context: context, builder: (context){
return AlertDialog(
title: Text(name[indexAl]),
content: TextFormField(
textDirection: TextDirection.ltr,
controller: customcintroller,
style: TextStyle(
color: Colors.lightGreen[400],
fontSize: 18.5),
decoration: InputDecoration(
contentPadding: EdgeInsets.only(bottom: 4.0),
labelText: indication[indexAl],
suffixText: prefixAlert[widget.index],
alignLabelWithHint: false,
),
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.done,
onSaved: (val) => this.numberOfMuscle = val,
),
actions: <Widget>[
FlatButton(
child: const Text('ОТМЕНА'),
onPressed: () {
Navigator.of(context).pop();
},
),
FlatButton(
child: const Text('ОК'),
onPressed: () {
setState(() {
widget.data = customcintroller.text.toString();
isAppear = !isAppear;
measurementsScreen.sumbitContact(widget.index, widget.data);
getMeasurementsDatabaseModelFromDB();
Navigator.of(context).pop();
});
},
),
],
);
});
return returnVal;
}
#override
Widget build(BuildContext context) {
return Container(
child: GestureDetector(
onTap: () {
createAlertDialog(context, widget.index);
},
child: Container(
color: Color(0xff2b2b2b),
height: 55.0,
margin: const EdgeInsets.symmetric(
vertical: 1.0,
),
child: new Stack(
children: <Widget>[
new Container(
child: new SizedBox.expand(
child: Container(
alignment: Alignment.center,
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
// Padding(
// padding: const EdgeInsets.all(8.0),
// child: Icon(
// custicon.MyIcons.bathroom_scale,
// color: Colors.lightGreen[400],
// size: 40.0)),
Padding(
padding: const EdgeInsets.all(16.0),
child: new Text(
widget.detail,
style:
new TextStyle(fontSize: 16.0, color: Colors.white),
),
),
Container(
alignment: Alignment.centerRight,
child: isAppear ? Padding(
padding: EdgeInsets.all(8.0),
child: Container(
decoration: ShapeDecoration(
color: Colors.lightGreen[400],
shape: RoundedRectangleBorder(
side: BorderSide(width: 1.0, style: BorderStyle.solid, color: Colors.white),
borderRadius: BorderRadius.all(Radius.circular(5.0)),
),
),
child: Padding(
padding: EdgeInsets.all(4.0),
child: new Text(
prefix[widget.index] + widget.data,
style: new TextStyle(
fontSize: 16.0,
color: Colors.white
),
)))) : SizedBox(),
)
],
),
),
),
),
],
),
)));
}
}
class MeasurementsDatabaseModel{
int id;
String typeOfMuscle;
String numberOfMuscle;
MeasurementsDatabaseModel();
}
class DatabaseHelperForMeasurements{
static Database db_instance;
final String TABLE_NAME = "Measurements";
Future<Database> get db async{
if(db_instance == null)
db_instance = await initDB();
return db_instance;
}
initDB() async {
io.Directory documentsDirectory = await getApplicationDocumentsDirectory();
String path = join(documentsDirectory.path,"Measurements_db.db");
var db = await openDatabase(path,version: 1, onCreate: onCreateFunc);
return db;
}
void onCreateFunc(Database db, int version) async{
await db.execute('CREATE TABLE $TABLE_NAME(id INTEGER PRIMARY KEY AUTOINCREMENT, typeOfMuscle TEXT, numberOfMuscle TEXT);');
}
Future<List<MeasurementsDatabaseModel>> getMeasurementsDatabaseModel() async{
var db_connection = await db;
List<Map> list = await db_connection.rawQuery('SELECT * FROM $TABLE_NAME');
List<MeasurementsDatabaseModel> modelList = new List();
for(int i = 0; i < list.length; i++){
MeasurementsDatabaseModel measurementsDatabaseModel = new MeasurementsDatabaseModel();
measurementsDatabaseModel.id = list[i]['id'];
measurementsDatabaseModel.typeOfMuscle = list[i]['typeOfMuscle'];
measurementsDatabaseModel.numberOfMuscle = list[i]['numberOfMuscle'];
modelList.add(measurementsDatabaseModel);
}
return modelList;
}
void addNewMeasurementsDatabaseModel(MeasurementsDatabaseModel measurementsDatabaseModel) async {
var db_connection = await db;
String query =
'INSERT INTO $TABLE_NAME(name,phone) VALUES( \'${measurementsDatabaseModel.typeOfMuscle}\',\'${measurementsDatabaseModel.numberOfMuscle}\')';
await db_connection.transaction((transition) async{
return await transition.rawInsert(query);
});
}
void updateMeasurementsDatabaseModel(MeasurementsDatabaseModel measurementsDatabaseModel) async {
var db_connection = await db;
String query =
'UPDATE $TABLE_NAME SET name =\'${measurementsDatabaseModel.typeOfMuscle}\',phone =\'${measurementsDatabaseModel.typeOfMuscle}\' WHERE id =${measurementsDatabaseModel.id}';
await db_connection.transaction((transition) async{
return await transition.rawQuery(query);
});
}
void deleteMeasurementsDatabaseModel(MeasurementsDatabaseModel measurementsDatabaseModel) async {
var db_connection = await db;
String query = 'DELETE FROM $TABLE_NAME WHERE id = ${measurementsDatabaseModel.id}';
await db_connection.transaction((transition) async{
return await transition.rawQuery(query);
});
}
}
This is gif, where I want to save data. How can you see, there is container with text near right part of screen. There I want to save data, which I put in AlertDialog.

Answer 1

Firstly, we are going to discuss its simplified implementation. At the MainScreen,
we won't connect it to SQLite. But later on, We can discuss more complex
implementation by calling SQLite queries.
Should we use FutureBuilder ?
In many tutorials spread accross internet, app screen can shows Loading indicator, and later on, it shows ListView and its ListTile after fetching to Database.
It works well if there are no further interaction with ListView later on.
As we using future, the builder will only triggered twice.
class MainScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: FutureBuilder(
future: queryDatabase(), // Calling Database
builder: (context, snapshot) {
if (snapshot.hasData) { // After Callback, it may triggers this Part
return ListView.builder(
itemBuilder: (_, index) {
return ListTile(
title: Text("$index"),
);
},
);
}
return Center( // First Triggering this Part
child: CircularProgressIndicator(),
);
},
),
);
}
}
The solution is Stateful Widget !
By using Stateful Widget, we can store our products, in variable. Therefore,
each time MainScreen's build method called, the app will display updated List.
class MainScreen extends StatefulWidget {
#override
_MainScreenState createState() => _MainScreenState();
}
class _MainScreenState extends State<MainScreen> {
List<Map<String, dynamic>> products = []; // Store Item, Here
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(...),
body: Container(
child: renderProducts(), // Render stored Item, here
),
);
}
We can see at the demo below, as we interact with buttons, the build method
always being re-called, and fortunately, we can have our Expected Screen
Identified Problems
class _ListItem extends State<ListItem> {
String typeOfMuscle;
String numberOfMuscle;
TextEditingController customcintroller;
...
AlertDialog(
title: Text(name[indexAl]),
content: TextFormField(
controller: customcintroller,
onSaved: (val) => this.numberOfMuscle = val,
),
);
),
the problem is, in onSaved method, the app will only update local variable that
resides on each of ListItem. Therefore, the app does not know that the new value
should be displayed.
How to make the widget rerenders ?
By using setState((){}) as the code below
class _ListItem extends State<ListItem> {
String typeOfMuscle;
String numberOfMuscle;
TextEditingController customcintroller;
...
void updateAndRerender(val){
this.numberOfMuscle = val;
setState((){});
}
AlertDialog(
title: Text(name[indexAl]),
content: TextFormField(
controller: customcintroller,
onSaved: (val) {
updateAndRerender(val);
},
),
);
),
Working Example-App Repo
you may look into this repository. Github