Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

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),
   );
 }
}
like image 484
David Aarian Avatar asked Dec 30 '19 19:12

David Aarian


People also ask

What happens when hot reload in Flutter?

Flutter's hot reload feature helps you quickly and easily experiment, build UIs, add features, and fix bugs. Hot reload works by injecting updated source code files into the running Dart Virtual Machine (VM).

How hot does Flutter reload work?

1. Hot Reload allows us to see the reflected change after bug fixes, building User interfaces and even adding certain features to the app without running your application afresh over and over again. Hot restart destroys the preserved State value and set them to their default.


2 Answers

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
  });
like image 190
Petro Avatar answered Oct 04 '22 19:10

Petro


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");
  });
}
like image 42
Dimitri L. Avatar answered Oct 04 '22 20:10

Dimitri L.