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.
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,
),