'Flutter : Image not showing in CarouselSlider...?

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.

Model Class:-

    // To parse this JSON data, do
//
//     final bannerModel = bannerModelFromJson(jsonString);

import 'dart:convert';

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(),
  };
}

Home Page :-

    import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:newbharatbiz/VendorRegistrationPage.dart';
import 'dart:convert';
import 'NavDrawer.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'Model Class/banner_model.dart';

var paddingBottom = 48.0;
var androidDeviceInfo;
var identifier;
var token = "debendra";
var token1;

class HomePage extends StatelessWidget {
  final String bannerAPI =
      "https://newbharatbiz.in/mobile_api/v4/all_banner.php";

  Future<BannerModel> fetchAlbum() async {
    final response = await http.get(Uri.parse(bannerAPI));

    print(response.body);

    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;

  @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 {},
            icon: Icon(Icons.search),
          ),
        ]),
        body: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
          FutureBuilder<BannerModel>(
            future: fetchAlbum(),
            builder: (context,  snapshot) {
              if (snapshot.hasData) {
                List<String> imagesList = [];

                print(imagesList);

                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);
  }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source