Question 125634 in Android Studio Question posted in
The official documentation can be found here.

Android Studio – i am using an ImageSlideshow in my flutter app but i need to add some icons on the slide. something like the image below?

    Center(
            child: Container(
              height: height * 0.3,
              width: width * 0.8,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
              ),
              child: ImageSlideshow(
                indicatorColor: HexColor('#FFA300'),
                onPageChanged: (value) {},
                autoPlayInterval: 3000,
                isLoop: true,
                children: [
                  Image.asset(
                    'assets/images/sample1.png',
                    fit: BoxFit.cover,
                  ),
                  Image.asset(
                    'assets/images/sample2.png',
                    fit: BoxFit.cover,
                  ),
                  Image.asset(
                    'assets/images/board3.jpeg',
                    fit: BoxFit.cover,
                  ),
                ],
              ),
            ),
          ),
  1. this is code for the ImageSlideshow widget. I need assistance please?
  2. the normal way was use a container in a container but this one seems off
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I wrapped the ImageSlideshow widget with a Stack widget and used a Row in a Container then used alignment property to assign the position of the Row

    Stack(
                children: [
                  ImageSlideshow(
                  indicatorColor: HexColor('#FFA300'),
                  onPageChanged: (value) {},
                  autoPlayInterval: 3000,
                  isLoop: true,
                  children: [
                    Image.asset(
                      'assets/images/sample1.png',
                      fit: BoxFit.cover,
                    ),
                    Image.asset(
                      'assets/images/sample2.png',
                      fit: BoxFit.cover,
                    ),
                    Image.asset(
                      'assets/images/board3.jpeg',
                      fit: BoxFit.cover,
                    ),
                  ],
                ),
                  Container(
                    padding: EdgeInsets.only(top: 20, left: 10, right: 10),
                    alignment: Alignment.topCenter,
                    child: Row(
                      children: [
                        Icon(Icons.arrow_back_ios),
                        SizedBox(width: width * 0.5,),
                        Icon(Icons.ios_share),
                        Icon(Icons.favorite_border),
                      ],
                    ),
                  ),
                ]
              )

    this should solve it


  2. 0

    I can’t see an image in your question, but taking a look at your code and assuming you’re using the flutter_image_slideshow package on pub.dev. You can display the images and an icon as part of one ‘slide’ using a Stack widget.

    Here’s an example where the first slide has the Icon on top of the image, but the others don’t demonstrating that the ImageSlideshow accepts any widgets as children.

    return Center(
  child: Container(
    height: height * 0.3,
    width: width * 0.8,
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(10),
    ),
    child: ImageSlideshow(
      indicatorColor: HexColor('#FFA300'),
      onPageChanged: (value) {},
      autoPlayInterval: 3000,
      isLoop: true,
      children: [
        Stack(children: [
          Image.asset(
            'assets/images/sample1.png',
            fit: BoxFit.cover,
          ),
          const Icon(Icons.star)
        ]),
        Image.asset(
          'assets/images/sample2.png',
          fit: BoxFit.cover,
        ),
        Image.asset(
          'assets/images/board3.jpeg',
          fit: BoxFit.cover,
        ),
      ],
    ),
  ),
);

    Hope that helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search