Question 161575 in Photoshop Question posted in
The official user guide can be found here.

How can I get this UI in flutter using Photoshop?

I have been trying to generate a sort of Podium in leaderboards page, the idea is that the number one on the LeaderBoaards will have a circleAvatar with a crown on top, the other two should be a little bit down the first. One on the left, the other on the right, both with a slightly smaller CircleAvatar.

I have done it in a Row. And this is what it looks like

What it looks like

But this is what I want it to look like.

(edited in Photoshop)

What I am looking for

I don’t want to hardcode any numbers, like sizes of Containers or anything of the sort. I have tried different options, with Align, Spacer, using Stack, but so far I always find some problem to get to the final result. I wonder what is the best approach here to what I want to accomplish. Is there maybe another Widget that I am not considering for this task?

I made the #2 and #3 places smaller by using Transform.scale on the CustomWidget.

Tags:

2

Answers


  1. 0

    Row needs crossAxisAlignment:

    Row(
          crossAxisAlignment: CrossAxisAlignment.end, //add this line
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            CircleAvatar(radius: 50,),
            CircleAvatar(radius: 75,),
            CircleAvatar(radius: 50,),
          ],
        ),

    demo

    Login or Signup to reply.
  2. 0

    I think this solves your problem a screenshot from dart pad is attached

    Container(
    padding:EdgeInsets.only(top:15,bottom:5),
    color:Colors.redAccent,
    child:Row(
      crossAxisAlignment: CrossAxisAlignment.end, //add this line
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [
        CircleAvatar(radius: 40,),
        SizedBox(width:30),
        Padding(
          padding:EdgeInsets.only(bottom:10),
        child: CircleAvatar(radius: 75,),
        ),
         SizedBox(width:30),
        CircleAvatar(radius: 40,),
      ],
    )
    )

    enter image description here

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

Back To Top
Search