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

Flutter – How to add the lines on the List tile

enter image description here

How do I add the three lines on the list tile in flutter?

I imagined using a stack, like so to get the desired effect

Card
⬇️
Stack
⬇️
[Card with three lines, ListTile]

Is there a better way to achieve this, please recommend.

Tags:

2

Answers


  1. 0

    You Can use row in trailing and in this row set this 3 lines ui.

    Login or Signup to reply.
  2. 0

    Try below code hope its help to you.

    ListTile(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          leading: Container(
            width: 100,
            height: 50,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
            ),
            child: Image.network(
              'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6h5npvyqmIacYPracR7Icw2NKdUsWJabZDwfQ928iaQ&s',
            ),
          ),
          title: Text('Longston Josef'),
          trailing: Container(
            margin: EdgeInsets.only(left: 20),
            width: 100,
            child: Row(
              children: [
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 2),
                  width: 10,
                  color: Colors.white.withOpacity(.5),
                ),
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 2),
                  width: 10,
                  color: Colors.white.withOpacity(.5),
                ),
                Container(
                  margin: EdgeInsets.symmetric(horizontal: 2),
                  width: 10,
                  color: Colors.white.withOpacity(.5),
                ),
                Spacer(),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text('522'),
                    Text('Steps'),
                  ],
                )
              ],
            ),
          ),
          tileColor: Colors.green.shade400,
          horizontalTitleGap: 1,
          //contentPadding: EdgeInsets.zero,
        ),

    Result: image

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

Back To Top
Search