Home > Software engineering >  Flutter: how to Align to bottom of Stack in Listview.builder
Flutter: how to Align to bottom of Stack in Listview.builder

Time:05-17

I am trying to use a Stack() Widget within a Listview to display Widgets over an Image in each iteration of the Listview however I am running into an issue. Whenever I use Align() for any widgets they stay at the top and do not Align to the Bottom of the Container()

Each image is a different size so I can not define a definite size to apply to all.

The code below aligns alignedWidget() to the topLeft even though I coded it to Align to bottomLeft

     Padding(
        padding: const EdgeInsets.symmetric(horizontal: 40.0),
        child: ListView.builder(
            itemCount: widget.posts.length,
            itemBuilder: (context, index) {
            return listViewCard(images[index])
         }
       ),
     )


  Widget listViewCard(image) {
      return Padding(
        padding: const EdgeInsets.symmetric(vertical: 20.0),
              child: Stack(
                children: [
                      Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.all(Radius.circular(20.0)),
                        ),
                        child: ClipRRect(
                          borderRadius: BorderRadius.circular(18.0),
                          child: Image(image: NetworkImage(image), fit: BoxFit.fitWidth,  )
                        ),
                      ),
                      child: Align(
                      alignment: Alignment.bottomLeft,
                      child: Padding(
                        padding: const EdgeInsets.only(left: 8.0),
                        child: Row(
                          children: [
                            alignedWidget(),
                          ],
                        ),
                      )
                  ),
                ],
              ),
      );
  }
  }

CodePudding user response:

I'm not sure what exactly you're trying to accomplish. But to position widgets within a Stack, you can use a Positioned widget:

Stack(children: [
  Positioned(bottom: 0.0, left: 0.0, child: ...)
])
  • Related