在 flutter

如何解决在 flutter

Watch this video to understand the problem properly.

当我构建项目时，小部件没有显示，但是当我重新保存项目时，小部件正在显示。我在下面给出我的代码。

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,Text(
                      'City : ${TeamData.fromJson(v).city}',Text(
                      'Conference : ${TeamData.fromJson(v).conference}',Text(
                      'Division : ${TeamData.fromJson(v).division}',)
                  ],)),));
        });
      }
    }
  }

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

（这是应用程序的第二页，其中包含从 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),'/third',arguments: {'data': playerData});
                },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}',color: Colors.blue),child: Text(
                        'Position : ${playerData.position}',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'),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.name);

  TeamData.fromJson(Map<String,dynamic> json)
      : id = json['id'],name = json['name'];

  Map<String,dynamic> toJson() {
    final 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;
  }
}

解决方法

当您想为将来获取某些东西时，请使用 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!');
        },);
  }

如果它解决了您的问题，请告诉我。

我认为您只需要在 setState((){}); 的末尾调用 getTeamList()

如何解决在 flutter

解决方法

相关推荐