List Item UI design with flutter - flutter

Question

I am beginner for flutter.
I have one lock icon image, that need to display half within cell and half out of cell.
I want to create UI for ListItem.
I already write code as below, but it not work:
ListTile makeListTile() => ListTile(
contentPadding:
EdgeInsets.symmetric(horizontal: 10.0),
title: Text(
"Item Title",
style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold),
),
subtitle: Row(
children: <Widget>[
Expanded(
flex: 0,
child: Icon(Icons.settings, size: 20.0),),
Expanded(
flex: 4,
child: Padding(
padding: EdgeInsets.only(left: 10.0),
child: Text("120",
style: TextStyle(color: Colors.black54))),),
Expanded(
flex: 4,
child: Padding(
padding: EdgeInsets.only(left: 10.0),
child: Text("150",
style: TextStyle(color: Colors.black54))),
),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 5.0, right: 5.0),
child: Icon(Icons.add, size: 20,)),
),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 10.0, right: 10.0),
child: Text("1",
style: TextStyle(color: Colors.black54))),),
Expanded(
child: Padding(
padding: EdgeInsets.only(left: 5.0, right: 5.0),
child: Icon(Icons.add, size: 20,)),
)
],
),
trailing:
new Stack(
children:[
Icon(Icons.lock, size: 20.0)
]),
onTap: () {
},
);
Please help me.
Thanks.

Answer 1

I suggest you try first yourself, because it will help to learn a different way to build the UI. If it's urgent then here is the code. But again I suggest trying yourself first. Everything in the dummy you need to change according to your requirement.
Stack(
children: <Widget>[
Container(
margin: const EdgeInsets.all(15.0),
decoration: BoxDecoration(
shape: BoxShape.rectangle,
borderRadius: BorderRadius.circular(10.0),
border: Border.all(width: 2.0, color: Colors.yellow)),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(5.0),
child: Text(
'Item Name',
style: TextStyle(
color: Colors.yellow, fontSize: 14.0),
),
),
Padding(
padding: const EdgeInsets.all(5.0),
child: Icon(
Icons.close,
color: Colors.yellow,
size: 30.0,
),
)
],
),
Padding(
padding: const EdgeInsets.only(bottom: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Icon(
Icons.adjust,
color: Colors.yellow,
size: 20.0,
),
Text(
'Dummy Text',
style: TextStyle(
color: Colors.yellow, fontSize: 14.0),
)
],
),
Row(
children: <Widget>[
Icon(
Icons.add_circle_outline,
color: Colors.yellow,
size: 20.0,
),
Padding(padding: const EdgeInsets.all(2.0)),
Text(
'1',
style: TextStyle(
color: Colors.yellow, fontSize: 14.0),
),Padding(padding: const EdgeInsets.all(2.0)),
Icon(
Icons.remove_circle,
color: Colors.yellow,
size: 20.0,
),
Padding(padding: const EdgeInsets.all(5.0))
],
)
],
),
)
],
),
),
Align(
alignment: Alignment.centerRight,
child: Icon(
Icons.group,
size: 30.0,
color: Colors.yellow,
),
)
],
)
This is how its look like for now:

Answer 2

1 use stack widget
2 add card with hight wight
3 add right side icon
4 add column
5 add row inside column