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

Flutter – How Do I Vertical Align Widgets Within A ListView Builder

I noticed that the ListView.builder doesn’t support the mainAxisAlignment to vertically align widgets. I am trying to align the avatar image on my ListTile to the top. It is currently aligning in the middle. Here is my code:

body: ListView.builder(
    itemCount: 30,
    itemBuilder: (context, index) {
        return ListTile(
            titleAlignment: ,
            leading: ClipRRect(
                  borderRadius: BorderRadius.circular(22.0),
                  child: Image.asset(
                    'lib/images/pic1.jpg',
                     width: 44.0,
                    height: 44.0,
                      fit: BoxFit.fill,
                  ),
            ),
            title: Text('Capton Jack @xproject'),
            subtitle: Text('This is a whooping 76 KM road and no foolish soul is doing before n after like obidient ipob did over 3 KM road by Alex Otti over Aguiyi Ironsi Road in Abia.'),
        );
    }

  ),

UI Screenshot

Tags:

2

Answers


  1. 0

    You can set titleAlignment: ListTileTitleAlignment.top which vertically aligns the leading and trailing widgets of the ListTile to top.

    for more info ListTileTitleAlignment

    Login or Signup to reply.
  2. 0

    Instead using ListTile use column like below,

    Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Row(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        ClipRRect(
                          borderRadius: BorderRadius.circular(22.0),
                          child: Image.asset(
                            'images/a.jpg',
                            width: 44.0,
                            height: 44.0,
                            fit: BoxFit.fill,
                          ),
                        ),
                        SizedBox(
                          width: 10,
                        ),
                        Expanded(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text('Capton Jack @xproject'),
                              Text('This is a whooping 76 KM road and no foolish soul is doing before n after like obidient ipob did over 3 KM road by Alex Otti over Aguiyi Ironsi Road in Abia.'),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                 
                ],
              )
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search