首页 > 解决方案 > 在热重新加载之前,我在轮播滑块上看不到我的图像

问题描述

大家好,我是 Flutter 的新手。我有一个问题,当我启动应用程序时,我无法在轮播中看到我的图像,但是当我热重载时,我可以看到它们。我认为,如果我设置 if/else 条件,它可能会起作用,但我做不到,有人可以帮助我吗?

这是代码;

import 'dart:convert';

import 'package:carousel_slider/carousel_slider.dart';
import 'package:feedme_start/widgets/Navigation_Drawer_Widget.dart';
import 'package:flutter/material.dart';
// ignore: import_of_legacy_library_into_null_safe
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:http/http.dart';

import 'model/AnaEkran_modeli.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  _MyAppState createState() => _MyAppState();
}

final imageList = [];

int ct = imageList.length;

class _MyAppState extends State<MyApp> {
  String cevap = "";

  late Apianaekran _apianaekran;
  late Result _result;

  get Index => null;

//"getapidata" adlı future methodda apilerle resimleri çekiyorum sonra imageListe ekliyorum
  Future<void> getapidata() async {
    String url =
        "https://www.mobilonsoft.com/fpsapi/default.aspx?op=application_initialization_customer&firmuid=feedmekktc&device_id=web_20210813180900001&device_platform=4&lang=en";
    Response responsee = await get(Uri.parse(url));

    if (responsee.statusCode == 200) {
      //statusCode 200 oldumu bağlantı siteyle doğru şekilde kuruldu demektir.
      Map cevapjson =
          jsonDecode(responsee.body); //cevap, json code daki body i alır.
      Apianaekran ekran = Apianaekran.fromJson(cevapjson);
      ct = ekran.result.sliderImages.length;
      print(ct);
      int i = 0;
      while (i < ct) {
        imageList.add(ekran.result.sliderImages[i].imageUrl);
        print(ekran.result.sliderImages[i].imageUrl);
        i++;
      }
    } else {
      print("bir sorun oluştu");
    }
    print("resimler başarıyla çekildi");
    print(imageList.length);
  }

  @override
  void initState() {
    getapidata();
  }

  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(
            elevation: 0,
            backgroundColor: Colors.red,
            title: Center(child: Text("FEED ME")),
            actions: <Widget>[
              IconButton(onPressed: () {}, icon: Icon(Icons.call))
            ],
          ),
          drawer: NavigationDrawerWidget(),
          backgroundColor: Colors.white,
          body: SingleChildScrollView(
            child: Column(
              children: [
                Container(
                    constraints: BoxConstraints.expand(height: 200),
                    child: CarouselSlider(
                        options: CarouselOptions(
                            enlargeCenterPage: true,
                            enableInfiniteScroll: true,
                            autoPlay: true),
                        items: imageList
                            .map((e) => ClipRRect(
                                  borderRadius: BorderRadius.circular(8),
                                  child: Stack(
                                    fit: StackFit.expand,
                                    children: <Widget>[
                                      Image.network(
                                        e,
                                        width: 1050,
                                        height: 350,
                                        fit: BoxFit.cover,
                                      )
                                    ],
                                  ),
                                ))
                            .toList())), //imageSlider(context),),
                /* Divider(,,
                  color: Colors.red,
                ),*/
                SizedBox(
                  height: 75,
                ),
                ElevatedButton.icon(
                  onPressed: () {
                    getapidata();
                  }, //api çekiminin denemesini bu tuşnan yaparım şimdilik
                  icon: Icon(Icons.add),
                  label: Text("Yeni Sipariş Ver"),
                  style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.red)),
                ),
                SizedBox(
                  height: 50,
                ),
                //  Text(_anaEkranJsonlar.statusCodeDescription),
                SizedBox(
                  height: 150,
                ),
                Row(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Expanded(
                      child: ElevatedButton.icon(
                        onPressed: () {},
                        icon: Icon(Icons.add),
                        label: Text("Canlı Destek"),
                        style: ButtonStyle(
                            backgroundColor:
                                MaterialStateProperty.all(Colors.red[900])),
                      ),
                    ),
                    SizedBox(
                      width: 5,
                    ),
                    Expanded(
                      child: ElevatedButton.icon(
                        onPressed: () {},
                        icon: Icon(Icons.sms),
                        label: Text("Fırsatlar"),
                        style: ButtonStyle(
                            backgroundColor:
                                MaterialStateProperty.all(Colors.red[900])),
                      ),
                    ),
                  ],
                ),
                SizedBox(
                  height: 30,
                ),
                Row(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Expanded(
                      child: ElevatedButton.icon(
                        onPressed: () {},
                        icon: Icon(Icons.exit_to_app),
                        label: Text("Giriş"),
                        style: ButtonStyle(
                            backgroundColor:
                                MaterialStateProperty.all(Colors.red[900])),
                      ),
                    ),
                    SizedBox(
                      width: 5,
                    ),
                    Expanded(
                      child: ElevatedButton.icon(
                        onPressed: () {},
                        icon: Icon(Icons.person_add),
                        label: Text("Kayıt Ol"),
                        style: ButtonStyle(
                            backgroundColor:
                                MaterialStateProperty.all(Colors.red[900])),
                      ),
                    ),
                  ],
                )
              ],
            ),
          )

          /*Swiper(itemCount: imageList.length,
        itemBuilder: (context, index) {
          return Image.network(imageList[index],/*errorBuilder:
           (BuildContext context, Object exception, StackTrace? stackTrace), {return const("resim yüklenemedi")},*/
          fit: BoxFit.cover,);
        },)*/
          ),
    );
  }
}

这是第一次开始的照片

这是在我热重载代码之后

它必须像第二张照片。有人能帮我吗 ?

标签: flutterdart

解决方案


getapidata加载所有图像后,您需要更新内部小部件的状态:

Future<void> getapidata() async {
  String url = "https://www.mobilonsoft.com/fpsapi/default.aspx?op=application_initialization_customer&firmuid=feedmekktc&device_id=web_20210813180900001&device_platform=4&lang=en";
  Response responsee = await get(Uri.parse(url));

  if (responsee.statusCode == 200) {
    // ...

    setState(() {});
  }
}

上述内容已经按预期工作,但您应该考虑使用FutureBuilder. 另外,你应该把

final imageList = [];
int ct = imageList.length;

在小部件的状态内,而不是在全局范围内。


推荐阅读