Flutter：轮播图片不显示？

Question

例如：关于问题的详细信息................................................ .....................我已经实现了 CarouselSlider 在主页上制作横幅。我已经从我的移动数据进行调试，但图像没有显示。下面我提到了型号class和主页，请查找并查看。

主页：

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

Answer 1

未来的构建器需要 return 输入 widget，但您忘记在滑块小部件中添加 return 关键字，只需添加 return 关键字即可。

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

Answer 2

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

Flutter：轮播图片不显示？

Flutter : Carousel image not showing?

carousel

flutter

主页：