eg: details about the questions ......................................................I've implemented CarouselSlider to make a banner in home page. I've debug from my mobile data is coming correct but image not showing. Below I've mentioned the model class and home page please find and check.
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:newbharatbiz/Screens/VendorRegistrationPage.dart';
import 'dart:convert';
import '../Utils/NavDrawer.dart';
import 'package:carousel_slider/carousel_slider.dart';
import '../Model Class/banner_model.dart';
import 'SearchServiceProvider.dart';
var paddingBottom = 48.0;
var androidDeviceInfo;
var identifier;
var token = "debendra";
var token1;
final String bannerAPI = "https://newbharatbiz.in/mobile_api/v4/all_banner.php";
class HomePage extends StatelessWidget {
Future<BannerModel> fetchAlbum() async {
final response = await http.get(Uri.parse(bannerAPI));
if (response.statusCode == 200) {
// If the server did return a 200 OK response,
// then parse the JSON.
return BannerModel.fromJson(jsonDecode(response.body));
} else {
// If the server did not return a 200 OK response,
// then throw an exception.
throw Exception('Failed to load album');
}
}
late DateTime currentBackPressTime;
List<String> imagesList = [];
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.deepOrangeAccent,
child: Icon(Icons.add),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => VendorRegistrationPage(),
),
);
},
),
drawer: NavDrawer(),
appBar:
AppBar(title: Text('New Bharat Biz'), centerTitle: true, actions: [
IconButton(
onPressed: () async {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SearchServiceProvider(),
),
);
},
icon: Icon(Icons.search),
),
]),
body: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
FutureBuilder<BannerModel>(
future: fetchAlbum(),
builder: (BuildContext context, snapshot) {
if (snapshot.hasData) {
print((snapshot.data));
snapshot.data?.banner.forEach((e) {
imagesList.add(snapshot.data!.imgPath + e.image);
});
Container(
child: CarouselSlider(
options: CarouselOptions(
height: 330,
aspectRatio: 16 / 9,
viewportFraction: 0.8,
initialPage: 0,
enableInfiniteScroll: true,
reverse: false,
autoPlay: true,
autoPlayInterval: Duration(seconds: 3),
autoPlayAnimationDuration: Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: true,
),
items: imagesList
.map(
(item) => Container(
child: Center(
child: Image.network(item,
fit: BoxFit.cover, width: 1000)),
),
)
.toList(),
),
);
}
// By default, show a loading spinner.
return Center(
child: SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator(
strokeWidth: 2,
valueColor: AlwaysStoppedAnimation(Colors.blue),
),
),
);
},
)
]));
}
Future<bool> onWillPop() {
DateTime now = DateTime.now();
if (currentBackPressTime == null ||
now.difference(currentBackPressTime) > Duration(seconds: 2)) {
currentBackPressTime = now;
return Future.value(false);
}
return Future.value(true);
}
}
future builders require return type widget but you forget to add the return keyword in your slider widget just add the return keyword and it will work.
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
var paddingBottom = 48.0;
var androidDeviceInfo;
var identifier;
var token = "debendra";
var token1;
final String bannerAPI = "https://newbharatbiz.in/mobile_api/v4/all_banner.php";
class HomePages extends StatelessWidget {
Future<BannerModel> fetchAlbum() async {
final response = await http.get(Uri.parse(bannerAPI));
if (response.statusCode == 200) {
// If the server did return a 200 OK response,
// then parse the JSON.
return BannerModel.fromJson(jsonDecode(response.body));
} else {
// If the server did not return a 200 OK response,
// then throw an exception.
throw Exception('Failed to load album');
}
}
late DateTime currentBackPressTime;
List<String> imagesList = [];
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
FutureBuilder<BannerModel>(
future: fetchAlbum(),
builder: (BuildContext context, snapshot) {
if (snapshot.hasData) {
print((snapshot.data));
snapshot.data?.banner.forEach((e) {
imagesList.add(snapshot.data!.imgPath + e.image);
print(imagesList.length);
});
return CarouselSlider( //add return keyword here
options: CarouselOptions(
height: 330,
aspectRatio: 16 / 9,
viewportFraction: 0.8,
initialPage: 0,
enableInfiniteScroll: true,
reverse: false,
autoPlay: true,
autoPlayInterval: const Duration(seconds: 3),
autoPlayAnimationDuration: const Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: true,
),
items: imagesList
.map(
(item) => Center(
child: Image.network(item,
fit: BoxFit.cover, width: 1000)),
)
.toList(),
);
}
return const Center(
child: SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator(
strokeWidth: 2,
valueColor: AlwaysStoppedAnimation(Colors.blue),
),
),
);
}
// By default, show a loading spinner.
)
]));
}
}
BannerModel bannerModelFromJson(String str) =>
BannerModel.fromJson(json.decode(str));
String bannerModelToJson(BannerModel data) => json.encode(data.toJson());
class BannerModel {
BannerModel({
required this.status,
required this.imgPath,
required this.banner,
});
int status;
String imgPath;
List<Banner> banner;
factory BannerModel.fromJson(Map<String, dynamic> json) => BannerModel(
status: json["status"],
imgPath: json["img_path"],
banner:
List<Banner>.from(json["Banner"].map((x) => Banner.fromJson(x))),
);
Map<String, dynamic> toJson() => {
"status": status,
"img_path": imgPath,
"Banner": List<dynamic>.from(banner.map((x) => x.toJson())),
};
}
class Banner {
Banner({
required this.id,
required this.type,
required this.parentId,
required this.title,
required this.caption,
required this.image,
required this.link,
required this.status,
required this.sliderOrder,
required this.entryTime,
});
String id;
String type;
String parentId;
String title;
String caption;
String image;
String link;
String status;
String sliderOrder;
DateTime entryTime;
factory Banner.fromJson(Map<String, dynamic> json) => Banner(
id: json["id"],
type: json["type"],
parentId: json["parent_id"],
title: json["title"],
caption: json["caption"],
image: json["image"],
link: json["link"],
status: json["status"],
sliderOrder: json["slider_order"],
entryTime: DateTime.parse(json["entry_time"]),
);
Map<String, dynamic> toJson() => {
"id": id,
"type": type,
"parent_id": parentId,
"title": title,
"caption": caption,
"image": image,
"link": link,
"status": status,
"slider_order": sliderOrder,
"entry_time": entryTime.toIso8601String(),
};
}