flutterlisttileflutter-list-tile

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.


Solution

  • 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