Question 214560 in Flutter Question posted in
The official Flutter documentation can be found here.

how to set the alignment of children of row to have the same height? flutter

I would like to ask what how do I align items in a row, I have this one working properly it’s just the alignment of the items under the Row Widget.

I want my UI to be something like this

enter image description here

and here is my current UI for it.

enter image description here

const Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    SizedBox(
                      child: CircleAvatar(
                        radius: 26.5,
                        backgroundColor: Color(0xFF6949FF),
                        child: CircleAvatar(
                          radius: 25,
                          backgroundImage: CachedNetworkImageProvider(
                              'https://images.unsplash.com/photo-1552058544-f2b08422138a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=699&q=80'),
                        ),
                      ),
                    ),
                    Flexible(
                      child: ListTile(
                        title: Text("John"),
                        subtitle: Text("55"),
                      ),
                    ),
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [Text("three dots")],
                    )
                  ],
                ),
Tags:

2

Answers


  1. 0 
    crossAxisAlignment: CrossAxisAlignment.center,

    but I would suggest you to use ListTile to achieve this UI:

    ListTile(
                leading: CircleAvatar(),
                title: Text("TITLE"),
                subtitle: Text("SUB TITLE"),
                trailing: Icon(Icons.settings),
              ),
    Login or Signup to reply.
  2. 0

    You’re confusing crossAxisAligment: from mainAxisAligment:

    Padding(
    padding: const EdgeInsets.symmetric(horizontal: 10), // A little space from LR sides.
    child: Row(
      mainAxisAlignment: MainAxisAlignment.start, // Change here. You could even remove this line since it's the default value.
      children: [
        SizedBox(
          child: CircleAvatar(
            radius: 26.5,
            backgroundColor: const Color(0xFF6949FF),
            child: CircleAvatar(
              radius: 25,
              backgroundImage: Image.asset(
                'assets/images/icons/tom.png',
              ).image,
            ),
          ),
        ),
        const Flexible(
          child: ListTile(
            title: Text('John'),
            subtitle: Text('55'),
          ),
        ),
        const Row(children: [Text('three dots')])
      ],
    ),
  )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search