CODEWITHSUNDEEP
androidimageflutterdartcarousel
Faizan Kamal
Faizan Kamal

Reputation: 2162

How to adjust images size with respect to mobile size while using "CarouselSlider" and put button text on that image in flutter?

I'm trying to create intro walkthrough slider for my app but I am unable to do things right. Using carousel_slider provided by pub.dev. I am not able to fill image to entire mobile screen. It leave some empty space on both left and right side.

Using Carousel Pro I can't place button or text on the sliding images. I spend hours on some a small issue but wasn't able to achieve what I want.

Here is the code

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';


void main() {
  runApp(MaterialApp(
    home: MyApp(), // Making initializing home sceen
  ));
}

List<String> imgList = [
  "lib/assets/images/sunset.jpg",
  "lib/assets/images/sample3.jpg",
  "lib/assets/images/sample2.jpg",
  "lib/assets/images/sunshine.jpg",
  "lib/assets/images/leaf.png",


];
int current = 0;

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // var _userName = TextEditingController();

  @override
  Widget build(BuildContext context) {
    Container(
              child: ImageCarousel(),
            );
}


class ImageCarousel extends StatefulWidget {
  @override
  _ImageCarouselState createState() => _ImageCarouselState();
}

class _ImageCarouselState extends State<ImageCarousel> {
  @override
  Widget build(BuildContext context) {

// >>>>>>>>>>>>  C A R O U S E L    S L I D E R    C O D E

    return CarouselSlider(
      height: double.infinity,
      initialPage: 0,
      enableInfiniteScroll: false,
      onPageChanged: (index) {
        setState(() {
          current = index;
        });
      },
      items: imgList.map((imgUrl) {
        return Builder(
          builder: (BuildContext context) {
            return Container(
              //width: MediaQuery.of(context).size.width,
              width: double.infinity,
              margin: EdgeInsets.symmetric(horizontal: 1),
              decoration: BoxDecoration(
                color: Colors.green,
              ),
              child: Image(
                image: AssetImage(
                  imgUrl,
                ),
                fit: BoxFit.cover,
              ),
            );
          },
        );
      }).toList(),
    );
  }
}

Below are the screen shots for more clarification

Screenshot 1 Screenshot 2

Using Carousel_Pro provided by pub.dev, how can I put text or buttons over image.

class ImageCarousel extends StatefulWidget {
  @override
  _ImageCarouselState createState() => _ImageCarouselState();
}

class _ImageCarouselState extends State<ImageCarousel> {
  @override
  Widget build(BuildContext context) {
    return Carousel(
          images: [
          AssetImage("lib/assets/images/sample2.jpg"),
          AssetImage("lib/assets/images/sample3.jpg"),
        ]
    );

Screenshot 3 Screenshot 4

Btw I have install all packages and images in pubspec.yaml.

Upvotes: 0

Views: 665

Answers (1)

Adelina
Adelina

Reputation: 11891

For carousel_slider to fill whole page set: viewportFraction: 1.0

To put stuff on top of the image create stack:

CarouselSlider(
          height: double.infinity,
          viewportFraction: 1.0,
          initialPage: 0,
          enableInfiniteScroll: false,
          items: imgList.map((imgUrl) {
            return Stack(
              children: <Widget>[
                Image(
                  height: double.infinity,
                  image: NetworkImage(
                    imgUrl,
                  ),
                  fit: BoxFit.cover,
                ),
                Text("TEST")
              ],
            );
          }).toList(),
        ))

Upvotes: 1

Related Questions