skip to Main Content

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

2

Answers


  1. Set fit to your image like this:

    Image.asset('assets/images/leeloo.jpeg', width: double.infinity,fit: BoxFit.cover),
    
    Login or Signup to reply.
  2. Please try this

    FittedBox(
      child: Image.asset('foo.png'),
      fit: BoxFit.fill,
    )
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search