CODEWITHSUNDEEP
flutterdartcarousel
alex
alex

Reputation: 25

images not taking full width in carousel

i created a carousel containing three different images. the problem is these images are not taking the full length of my current screen. i have tried setting the width in the image and even setting the aspect ratio and viewport in carousel options but the outcome is still the same. help would be very much appreciated. here is the code.

 final List<Widget> _images = [
    Stack(
      children: [
        Image.asset('assets/images/image 10.png'),
        Padding(
          padding: const EdgeInsets.only(left: 55.0, top: 230),
          child: Text(
            'Luxury \n   Fashion \n &Accessories'.toUpperCase(),
            style: TextStyle(
                fontFamily: 'Bodoni',
                fontSize: 40,
                fontWeight: FontWeight.w500,
                color: Colors.grey.shade700
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 400.0),
          child: Center(
            child:SvgPicture.asset('assets/iconImages/Button.svg'),
          ),
        ),
      ],
    ),
    Image.asset('assets/images/leeloo.jpeg', width: double.infinity,),
    Image.asset('assets/images/ayaka.jpeg', width: double.infinity,),
  ];

  @override
  Widget build(BuildContext context) {
    return  DefaultTabController(
              length: 5,
              child: Column(
                children: [
                  Stack(
                    children: [
                      CarouselSlider.builder(
                        options: CarouselOptions(
                            viewportFraction: 1,
                            aspectRatio: 16/9,
                            height: MediaQuery.of(context).size.height*0.78,
                            autoPlay: false,
                            initialPage: 0,
                            enableInfiniteScroll: false,
                            enlargeCenterPage: true,
                            onPageChanged: (index, reason){
                              setState(() {
                                _activeIndex = index;
                              });
                            }
                        ),
                        itemCount: _images.length,
                        itemBuilder: (BuildContext context, int index, int realIndex) {
                          return GestureDetector(
                              onTap: (){
                                Navigator.of(context).pushNamedAndRemoveUntil(BlackScreen.routeName, (route) => false);
                              },
                              child: Align(
                                alignment: Alignment.bottomCenter,
                                    child:Container(
                                        child: _images[index]
                                    ),
                              ),
                          );
                        },
                      ),

enter image description here

enter image description here

enter image description here

Upvotes: 0

Views: 850

Answers (3)

harlanx
harlanx

Reputation: 301

Set the disableCenter parameter to true from the carousel_slider widget and set the item's fit to BoxFit.cover.

    return CarouselSlider.builder(
      key: const Key('MainPromos'),
      carouselController: _horizControl,
      itemCount: widget.mainItems.length,
      disableGesture: true,
      options: CarouselOptions(
        viewportFraction: 1.0,
        initialPage: 0,
        reverse: false,
        enableInfiniteScroll: true,
        scrollDirection: Axis.horizontal,
        disableCenter: true,
        autoPlay: true,
        autoPlayInterval: const Duration(seconds: 8),
        autoPlayAnimationDuration: const Duration(milliseconds: 300),
        autoPlayCurve: Curves.easeInOut,
        onPageChanged: (index, _) {
          setState(() {
            _horizIndex = index;
          });
        },
      ),
      itemBuilder: (_, index, heroIndex) {
        return InkWell(
          child: Image.asset(
            widget.mainItems[index].image,
            fit: BoxFit.cover,
          ),
          onTap: () {
            debugPrint('Navigating to ${widget.mainItems[index].url}');
          },
        );
      },
    );

Upvotes: 0

Tejaswini Dev
Tejaswini Dev

Reputation: 1469

Please try this

FittedBox(
  child: Image.asset('foo.png'),
  fit: BoxFit.fill,
)

Upvotes: 0

eamirho3ein
eamirho3ein

Reputation: 17900

Set fit to your image like this:

Image.asset('assets/images/leeloo.jpeg', width: double.infinity,fit: BoxFit.cover),

Upvotes: 3

Related Questions