title: How to show a progress Dialog before data loading in flutter?
body: <p>In my Flutter project, I am doing API calls to fetch data by GET request. After parsing the <strong>JSON object</strong> from the response, I just show the value in the <strong>Text</strong> widget. While the data takes time to load, in the meantime my Text widgets show null.</p>
  <p>For the API calling section I have the following code-</p>
  <pre><code>class Webservice {
    Future&lt;T&gt; load&lt;T&gt;(Resource&lt;T&gt; resource) async {
      var jwt = await LocalStore().getJWT();
      print(jwt);
  
      final response = await http.get(resource.url,
          headers: {
            'Content-Type': 'application/json',
            'token': '${Constants.TOKEN}',
            'jwt': '$jwt',
          }
      );
      if(response.statusCode == 200) {
        print('${response.body}');
        return resource.parse(response);
      } else {
        throw Exception('Failed to load data!');
      }
    }
  }
  </code></pre>
  <p>I made a <strong>Model class</strong> for JSON parsing-</p>
  <pre><code>class Category {
    int catNote;
    int catTodo;
    int catRem;
    int catTag;
    int catUrgent;
    int catWork;
    int catOffice;
    int catPersonal;
    
    Category(
        {this.catNote,
          this.catTodo,
          this.catRem,
          this.catTag,
          this.catUrgent,
          this.catWork,
          this.catOffice,
          this.catPersonal});
  
    Category.fromJson(Map&lt;String, dynamic&gt; json) {
      catNote = json['cat_note'];
      catTodo = json['cat_todo'];
      catRem = json['cat_rem'];
      catTag = json['cat_tag'];
      catUrgent = json['cat_urgent'];
      catWork = json['cat_work'];
      catOffice = json['cat_office'];
      catPersonal = json['cat_personal'];
    }
  
    Map&lt;String, dynamic&gt; toJson() {
      final Map&lt;String, dynamic&gt; data = new Map&lt;String, dynamic&gt;();
      data['cat_note'] = this.catNote;
      data['cat_todo'] = this.catTodo;
      data['cat_rem'] = this.catRem;
      data['cat_tag'] = this.catTag;
      data['cat_urgent'] = this.catUrgent;
      data['cat_work'] = this.catWork;
      data['cat_office'] = this.catOffice;
      data['cat_personal'] = this.catPersonal;
      return data;
    }
  
    static Resource&lt;Category&gt; get allCategory {
      return Resource(
          url: '${Constants.BASE_URL}category',
          parse: (response) {
            print('my result ${response.body}');
            final result = json.decode(response.body);
  
            Category category = Category.fromJson(result) ;
            return category;
  
          }
      );
  
    }
  
  }
  </code></pre>
  <p>Now, in my main class, I have created one function like below-</p>
  <pre><code>  void _getAllCategories() {
      Webservice().load(Category.allCategory).then((newsArticles) =&gt; {
          setState(() =&gt; {
        _category = newsArticles
      })
    });
   }
  </code></pre>
  <p>After that, I have called the function inside the initState function and saved the value in the _category object.</p>
  <p>Then inside the  <strong>Widget build(BuildContext context)</strong> function for Text widget I have used the value from <strong>_category</strong> object like below using a ternary operator to check whether the object is null or not. If it's null then it should show 0 and if it is not null then should show the original value-</p>
  <pre><code>child: _category ==null?
                  Text('0',
                  style: TextStyle(
                      fontSize: 30,
                      fontWeight: FontWeight.bold
                  ),
                  ):
                  Text('${_category.catToDo}',
                    style: TextStyle(
                        fontSize: 30,
                        fontWeight: FontWeight.bold
                    ),
                  )
  </code></pre>
  <p>But it is still showing null whiling taking few second for data loading and shows output like below-</p>
  <p><a href="https://i.stack.imgur.com/sorGg.png" rel="noreferrer"><img src="https://i.stack.imgur.com/sorGg.png" alt="enter image description here" /></a></p>
  <p>So, I need a solution to show a progress dialog or just show the default value as 0 while the data takes time to load. It would be very nice if someone helps me out with this code.</p>