i am using an ImageSlideshow in my flutter app but i need to add some icons on the slide. something-CodePudding

    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,
                  ),
                ],
              ),
            ),
          ),

this is code for the ImageSlideshow widget. I need assistance please?
the normal way was use a container in a container but this one seems off

CodePudding user response：

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.

CodePudding user response：

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