CODEWITHSUNDEEP
flutter
Golam Wasy Arnob
Golam Wasy Arnob

Reputation: 117

Data is showing only after I hot reload or refresh in flutter

In my database I have a user table where username, some marks are stored. I want to view that data in a table when user go to a particular page. So, when I go to that page at first the data(username and marks) doesn't show. But if I hot reload or use a button to refresh then the data shows properly. My question is how can I do that without hot reload or using a refresh button. Here is my code:

import 'package:flutter/material.dart';
import 'package:flutter_app/database/db_helper.dart';
import 'package:flutter_app/database/user.dart';

class ViewResult extends StatefulWidget {
 @override
 _ViewResult createState() => _ViewResult();
}

GlobalKey<ScaffoldState> scaffoldKey = new GlobalKey();

class _ViewResult extends State<ViewResult> {
 String tempEmail;
 bool check = true;

 var dbHelper;
 var data = List<User>();

 @override
 void initState() {
   setState(() {
     dbHelper = DBHelper();
     resultData();
   });
   super.initState();
 }

 void resultData() {
     dbHelper.getUser().then((users) {
       for (User temp in users) {
         if (temp.type == "student") data.add(temp);
       }
     });
 }

 @override
 Widget build(BuildContext context) {
   return Scaffold(
     appBar: AppBar(
       centerTitle: true,
       title: Text("Result"),
     ),
     body: DataTable(
       columnSpacing: 22,
       columns: [
         DataColumn(label: Text("Username")),
         DataColumn(label: Text("Beginner")),
         DataColumn(label: Text("Intermediate")),
         DataColumn(label: Text("Advanced")),
       ],
       rows: data
           .map((user) => DataRow(cells: [
                 DataCell(Text(user.email)),
                 DataCell(Text(user.beginnerMark.toString())),
                 DataCell(Text(user.intermediateMark.toString())),
                 DataCell(Text(user.advancedMark.toString())),
               ]))
           .toList(),
     ),
     backgroundColor: Color.fromRGBO(130, 178, 220, 1),
   );
 }
}

Upvotes: 7

Views: 7401

Answers (3)

Petro
Petro

Reputation: 3652

TLDR: Call setState() from inside then() if not, it will be executed before everything completes and have no effect at all. 

getUser().then((response) {
   //Your stuff

   setState(() {}); //refresh
  });

Upvotes: 6

DrFrancky
DrFrancky

Reputation: 1

You need setState(() {});. Add it near the end of resultData function:

void resultData() {
  dbHelper.getUser().then((users) {
     for (User temp in users) {
       if (temp.type == "student") data.add(temp);
     }
   setState(() {});
  });

}

See setState for more information.

Upvotes: -2

Dimitri Lavren&#252;k
Dimitri Lavren&#252;k

Reputation: 4879

You have to use setState after you have loaded the data and your resultData functions is working with then, that is executed after the initial setState in the initState is finished.

@override
void initState() {
  // super.initState(); should be at the start of the method
  super.initState();
  dbHelper = DBHelper();
  resultData();
}

void resultData() {
  dbHelper.getUser().then((users) {
    for (User temp in users) {
      if (temp.type == "student") data.add(temp);
    }
    // since you have already added the results to data
    // setState can have an empty function body
    setState(() {});
  });
}

I prefer working with async/await instead of then so my solutions would be as follows:

Future<void> resultData() async {
  List<User> users = await dbHelper.getUser();
  setState(() {
    data = users.where((user) => user.type == "student");
  });
}

Upvotes: 1

Related Questions