在flutter中調用api后小部件沒有重建

Question

觀看此視頻以正確理解問題。

當我構建項目時，小部件沒有顯示，但是當我重新保存項目時，小部件正在顯示。 我在下面給出我的代碼。

• main.dart :-

（這是保存到每個頁面的路由的主文件）

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 :-

（這是應用程序的第一頁，其中包含所有團隊數據的小部件列表。單擊團隊的小部件后，它將轉到第二頁）

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,
        ));
  }
}

• 第二個.dart :-

（這是應用程序的第二頁，其中包含從 http 調用接收的所有播放器詳細信息小部件。它從 http 接收數據，但小部件未顯示。小部件僅在重新保存項目后顯示。在 setState() 之后，它不會重新構建這頁紙。）

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（模型類）：-

  （這是團隊數據的模型類）

   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（模型類）：-

（這是玩家詳細數據的模型類）

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;
  }
}

Answer 1

當您想為將來獲取某些東西時，請使用FutureBuilder 。

  @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!');
        },
      ),
    );
  }

如果它解決了您的問題，請告訴我。

Answer 2

我認為你只需要調用setState((){}); 在getTeamList()結束時