widgets are not rebuilding after api call in flutter

Question

Watch this video to understand the problem properly.

When I build the project, the widgets are not showing, but when I re-save the project, the widgets are showing. I'm giving my code below.

main.dart :-

(this is the main file which holds routes to each and every page)

import 'package:flutter/material.dart';
import 'package:player_profile/first.dart';
import 'package:player_profile/second.dart';
import 'package:player_profile/third.dart';

void main() {
  runApp(MaterialApp(
    initialRoute: '/first',
    routes: {
      '/first': (context) => First(),
      '/second': (context) => Second(),
      '/third': (context) => Third()
    },
  ));
}

first.dart :-

(this is the first page of the app which contains a list of widgets of all team data. after clicking on a widget of team it'll go to the second page)

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:player_profile/teamData.dart';
import 'dart:convert' as convert;

class First extends StatefulWidget {
  @override
  _FirstState createState() => _FirstState();
}

class _FirstState extends State<First> {
  List<Widget> teamList = [];

  void getTeamList() async {
    var url = Uri.parse('https://www.balldontlie.io/api/v1/teams');
    http.Response response = await http.get(url);
    if (response.statusCode == 200) {
      var jsonData = convert.jsonDecode(response.body) as Map<String, dynamic>;

      if (jsonData['data'] != null) {
        jsonData['data'].forEach((v) {
          // teamData.add(new TeamData.fromJson(v));
          teamList.add(Padding(
            padding: const EdgeInsets.all(8.0),
            // ignore: deprecated_member_use
            child: RaisedButton(
                onPressed: () {
                  Navigator.pushNamed(context, '/second');
                },
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Text(
                      'Name : ${TeamData.fromJson(v).name}',
                      style: TextStyle(
                        color: Colors.red,
                        fontSize: 15.0,
                      ),
                    ),
                    Text(
                      'Abbreviation : ${TeamData.fromJson(v).abbreviation}',
                      style: TextStyle(
                        color: Colors.blue,
                        fontSize: 15.0,
                      ),
                    ),
                    Text(
                      'City : ${TeamData.fromJson(v).city}',
                      style: TextStyle(
                        color: Colors.blue,
                        fontSize: 15.0,
                      ),
                    ),
                    Text(
                      'Conference : ${TeamData.fromJson(v).conference}',
                      style: TextStyle(
                        color: Colors.blue,
                        fontSize: 15.0,
                      ),
                    ),
                    Text(
                      'Division : ${TeamData.fromJson(v).division}',
                      style: TextStyle(
                        color: Colors.blue,
                        fontSize: 15.0,
                      ),
                    )
                  ],
                )),
          ));
        });
      }
    }
  }

  @override
  void initState() {
    super.initState();
    getTeamList();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          title: Text('Team'),
        ),
        body: GridView.count(
          crossAxisCount: 2,
          children: teamList,
        ));
  }
}

second.dart :-

(this is the second page of the app which contains all the player details widgets received from http call. it receives data from http but widgets are not showing. widgets are showing only after resaving the project. after setState() it's not re-building the page.)

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert' as convert;
import 'package:player_profile/singlePlayer.dart';

class Second extends StatefulWidget {
  @override
  _SecondState createState() => _SecondState();
}

class _SecondState extends State<Second> {
  List<SinglePlayerData> playersList = [];
  List<Widget> showPlayers = [];

  getAllPlayers() async {
    var url = Uri.parse('https://www.balldontlie.io/api/v1/players');
    http.Response response = await http.get(url);
    if (response.statusCode == 200) {
      var jsonData = convert.jsonDecode(response.body) as Map<String, dynamic>;

      jsonData['data'].forEach((v) {
        SinglePlayerData playerData = SinglePlayerData(
            v['id'],
            v['first_name'],
            v['height_feet'],
            v['height_inches'],
            v['last_name'],
            v['position'],
            v['weight_pounds'],
            v['team']['id'],
            v['team']['abbreviation'],
            v['team']['city'],
            v['team']['conference'],
            v['team']['division'],
            v['team']['full_name'],
            v['team']['name']);
        playersList.add(playerData);
        setState(() {
          print('setState');
          showPlayers.add(Padding(
            padding: const EdgeInsets.all(8.0),
            // ignore: deprecated_member_use
            child: RaisedButton(
                onPressed: () {
                  Navigator.pushNamed(context, '/third',
                      arguments: {'data': playerData});
                },
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                        height: 75.0,
                        width: 75.0,
                        child: Image(image: AssetImage('images/player2.png'))),
                    Padding(
                      padding: const EdgeInsets.all(5.0),
                      child: Text(
                        'Name : ${playerData.firstName} ${playerData.lastName}',
                        style: TextStyle(fontSize: 15.0, color: Colors.red),
                      ),
                    ),
                    Text(
                      'Team : ${playerData.name}',
                      style: TextStyle(fontSize: 15.0, color: Colors.blue),
                    ),
                    Padding(
                      padding: const EdgeInsets.all(5.0),
                      child: Text(
                        'Position : ${playerData.position}',
                        style: TextStyle(fontSize: 15.0, color: Colors.purple),
                      ),
                    )
                  ],
                )),
          ));
        });
      });
      print(playersList[1].firstName);
    }
  }

  @override
  void initState() {
    print('initState');
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    print('build');
    getAllPlayers();
    return Scaffold(
        backgroundColor: Colors.black,
        appBar: AppBar(
          title: Text('Players'),
        ),
        body: GridView.count(
          crossAxisCount: 2,
          children: showPlayers,
        ));
  }
}

teamData.dart (Model class) :-

(this is the model class for team data)

 class TeamData {
   int? id;
   String? abbreviation;
   String? city;
   String? conference;
   String? division;
   String? fullName;
   String? name;

   TeamData(this.id, this.abbreviation, this.city, this.conference,
       this.division, this.fullName, this.name);

   TeamData.fromJson(Map<String, dynamic> json)
       : id = json['id'],
         abbreviation = json['abbreviation'],
         city = json['city'],
         conference = json['conference'],
         division = json['division'],
         fullName = json['full_name'],
         name = json['name'];

   Map<String, dynamic> toJson() {
     final Map<String, dynamic> data = new Map<String, dynamic>();
     data['id'] = this.id;
     data['abbreviation'] = this.abbreviation;
     data['city'] = this.city;
     data['conference'] = this.conference;
     data['division'] = this.division;
     data['full_name'] = this.fullName;
     data['name'] = this.name;
     return data;
   }
 }

singlePlayer.dart (Model class) :-

(this is the model class for players details data)

class TeamData {
  int? id;
  String? abbreviation;
  String? city;
  String? conference;
  String? division;
  String? fullName;
  String? name;

  TeamData(this.id, this.abbreviation, this.city, this.conference,
      this.division, this.fullName, this.name);

  TeamData.fromJson(Map<String, dynamic> json)
      : id = json['id'],
        abbreviation = json['abbreviation'],
        city = json['city'],
        conference = json['conference'],
        division = json['division'],
        fullName = json['full_name'],
        name = json['name'];

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['abbreviation'] = this.abbreviation;
    data['city'] = this.city;
    data['conference'] = this.conference;
    data['division'] = this.division;
    data['full_name'] = this.fullName;
    data['name'] = this.name;
    return data;
  }
}

Md. Yeasin Sheikh · Answer 1 · 2021-07-13T11:37:56.560

Use FutureBuilder when ever you wanna fetch something for future.


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.cyan,
      body: FutureBuilder<Transaction>(
        future: getAllPlayers(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting)
            return CircularProgressIndicator();
          if (snapshot.hasError)
            return Column(
              children: [
                Text(
                  snapshot.error.toString(),
                ),
              ],
            );
          if (snapshot.hasData) {
            var data = snapshot.data!;
            ///todo:: add you design model
            return GridView.count(
          crossAxisCount: 2,
          children: showPlayers,
        );
          }
          return Text('Something was wrong!');
        },
      ),
    );
  }

let me know if it solve your problem.

score 0 · Answer 2 · answered Jul 13 '21 at 12:33

0

I think you just need to call setState((){}); at the end of getTeamList()

answered Jul 13 '21 at 12:33

MindStudio

706
1
4
13

widgets are not rebuilding after api call in flutter

2 Answers2