flutter - 在热重新加载之前,我在轮播滑块上看不到我的图像
问题描述
大家好,我是 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,);
},)*/
),
);
}
}
它必须像第二张照片。有人能帮我吗 ?
解决方案
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;
在小部件的状态内,而不是在全局范围内。