Search code examples
fluttercarousel

Flutter : Carousel slider not showing?

eg: details about the questions ...................................................................................................................................................................................I've implemented CarouselSlider to make a banner in home page image not showing. Below I've mentioned the Home page class. please check.

Home page :-

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;

class HomePage extends StatelessWidget {

  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 {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => SearchServiceProvider(),
                ),
              );
            },
            icon: Icon(Icons.search),
          ),
        ]),
        body: Column(mainAxisAlignment: MainAxisAlignment.start, children: [
          FutureBuilder<BannerModel>(
         //   future: fetchAlbum(),
            builder: (context, snapshot) {

              if (snapshot.hasData) {

                print(snapshot.data);

                final List<String> imageList = [
                  "https://newbharatbiz.in/admin/upload/banner/1521791467.png",
                  'https://newbharatbiz.in/admin/upload/banner/1542696267.png',
                  'https://newbharatbiz.in/admin/upload/banner/1542696279.png',
                  'https://newbharatbiz.in/admin/upload/banner/1542696388.png'
                ];

                Container(
                  child: CarouselSlider(
                    options: CarouselOptions(
                      height: 180.0,
                      enlargeCenterPage: true,
                      autoPlay: true,
                      aspectRatio: 16 / 9,
                      autoPlayCurve: Curves.fastOutSlowIn,
                      enableInfiniteScroll: true,
                      autoPlayAnimationDuration: Duration(milliseconds: 800),
                      viewportFraction: 0.8,
                    ),
                    items: imageList
                        .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);
  }
}
Solution

  • I Think Your code is correct, just try to declare your list outside the Widget. hope its help to you.

    Your List:

      final List<String> imageList = [
    "https://newbharatbiz.in/admin/upload/banner/1521791467.png",
    'https://newbharatbiz.in/admin/upload/banner/1542696267.png',
    'https://newbharatbiz.in/admin/upload/banner/1542696279.png',
    'https://newbharatbiz.in/admin/upload/banner/1542696388.png'
  ];

    Your Widget

      @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: CarouselSlider(
          options: CarouselOptions(
            height: 180.0,
            enlargeCenterPage: true,
            autoPlay: true,
            aspectRatio: 16 / 9,
            autoPlayCurve: Curves.fastOutSlowIn,
            enableInfiniteScroll: true,
            autoPlayAnimationDuration: Duration(milliseconds: 800),
            viewportFraction: 0.8,
          ),
          items: imageList
              .map(
                (item) => Container(
                  child: Center(
                    child: Image.network(
                      item,
                      fit: BoxFit.cover,
                      width: 1000,
                    ),
                  ),
                ),
              )
              .toList(),
        ),
      ),
    );
  }

    Your Result Screen-> image