Блог

Я использую в rest-countries API для создания приложения с названием и флагом стран в flutter.

когда я создаю приложение, оно не показывает мне данные из 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
  }
  

Я не тестировал это, но способ, которым я вызываю API во flutter, был бы похож на этот:

 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
  

Затем вы должны проверить, равно ли значение null для countriesName и countriesFlag, а затем отобразить данные, когда API возвращает ответ.

Надеюсь, это вам каким-то образом поможет.