时间戳

首页 > 解决方案 > 在颤振中热重载后显示restcountries api

api - 在颤振中热重载后显示restcountries api

问题描述

我在 rest-country API 中使用颤振构建国家名称和标志的应用程序。

当我构建应用程序时不会向我显示来自 API 的数据。

但是当我保存或热重载数据时显示。

我使用 initState() 但仍然没有帮助。

我在列表中插入所有国家的名称和标志，并在 ListView.builder 中显示它们。

构建后

保存或热重载后

主要的

List<String> countriesName = [];
List<String> countriesFlag = [];
NetWork netWork = NetWork();
class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    setState(() {
      getNetwork();
    });
    super.initState();
  }
  Future getNetwork() async {
    countriesName = await netWork.getAllCountries();
    countriesFlag = await netWork.getAllCountriesFlag();
  }
              child: ListView.builder(
                itemCount: countriesName.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    title: Text(
                      '${countriesName[index]}',
                      style: TextStyle(
                        fontSize: 25,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    subtitle: Hero(
                      tag: 'flag $index',
                      child: SvgPicture.network(
                        '${countriesFlag[index]}', //'https://restcountries.eu/data/gtm.svg'
                        width: 30,
                        height: 120,
                        fit: BoxFit.fitWidth,
                      ),
                    ),
                    onTap: () {
                      setState(() {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                              builder: (context) => CountryDetail(
                                    countriesFlag: countriesFlag,
                                    countriesName: countriesName,
                                    index: index,
                                    netWork: netWork,
                                  )),
                        );

网络

final urlall = 'https://restcountries.eu/rest/v2/all';
class NetWork {
  Future getAllCountries() async {
    try {
      var response = await http.get(urlall);
      if (response.statusCode == 200) {
        var jasonData = jsonDecode(response.body);
        List<String> countriesName = [];
        for (var country in jasonData) {
          countriesName.add(country['name']);
        }
        return countriesName;
      }
    } catch (e) {
      print('e => $e');
    }
  }
  Future getAllCountriesFlag() async {
    try {
      var response = await http.get(urlall);
      if (response.statusCode == 200) {
        var jasonData = jsonDecode(response.body);
        List<String> countriesFlag = [];
        for (var flag in jasonData) {
          countriesFlag.add(flag['flag']);
        }
        return countriesFlag;
      }
    } catch (e) {
      print('e => $e');
  }
  }
}

- - - -解决方案 - - - -

我找到了解决方案。

  Future getNetwork() async {
    countriesName = await netWork.getAllCountries();
    countriesFlag = await netWork.getAllCountriesFlag();
    setState(() {});  // added line
  }

标签： apiflutter

解决方案

我还没有测试过，但我在颤振中调用 API 的方式类似于：

List<String> countriesName = [];
List<String> countriesFlag = [];

NetWork netWork = NetWork();
class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();
    getNetwork();
  }
  Future getNetwork() async {
    setState(() {
      countriesName = await netWork.getAllCountries();
      countriesFlag = await netWork.getAllCountriesFlag();
    });
  }
  // Build UI code here

然后，您应该检查 countriesName 和 countriesFlag 的值是否为空，然后在 API 返回响应时显示数据。

希望这对您有所帮助。

推荐阅读