CODEWITHSUNDEEP
androidflutterflutter-layoutflutter-listview
CybeX
CybeX

Reputation: 2406

Using Align inside of ListView to align Widgets left/right

My application shows profile of users. A feature I wish to add is to allow "like"ing of profiles by users. For this, I am using a Listview to show all profile content.

The problem is when adding a LikeButton, it gets centered, which is expected. I want to move it to the (top) right.

Align appears like a more viable and elegant solution that doing something like this (see below) but I cannot get Align it to work (it remains centered).

ListView(
  children: [
    Row(
      mainAxisAlignment: MainAxisAlignment.end,
      children: [LikeButton()],
    ),
    // rest of profile information

Using a Container with width: double.infinity doesn't work with Align either - it remains centered.

Container(
  width: double.infinity,
  child: Align(
    alignment: Alignment.topRight,
    child: LikeButton(),
  ),
)

Is using a Row my only option or is there a better way?

Upvotes: 0

Views: 606

Answers (2)

Abhinav kumar sintoo
Abhinav kumar sintoo

Reputation: 212

You can Stack the LikeButton() onto Container(child:Row()) and position it to top right by giving values to topRight parameters.

Upvotes: 0

Sajad Abdollahi
Sajad Abdollahi

Reputation: 1741

Since LikeButton is a Row or Column it self, You can't Align it like that,

You can use its properties to align it

ListView(
        children: [
            LikeButton(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.start,
            )
          ],
)

or just wrap it inside a SizedBox and align that box

Container(
          width: double.infinity,
          height: 500,
          alignment: Alignment.topRight,
          child: SizedBox(
                width: 100,
                height: 100,
                child: LikeButton()),
)
  • Row takes the size of its children so your first code won't align it vertically
  • You didn't give height in you're Container code so Aligning it by topRight would be meaningless

Upvotes: 2

Related Questions