How to achieve this kind of format ? i am really confused how to do in flutter?
This is the result what i have acheived so far enter image description here.
and
This is what i actually looking for enter image description here , where i can add as many values as i want , but in card view format.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
shrinkWrap: true,
itemBuilder: (BuildContext context,int index) => Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.symmetric(horizontal: 10.0,vertical: 5.0),
child: Card(
elevation: 5.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(0.0),
),
child: Container(
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.symmetric(horizontal: 10.0,vertical: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
width: 55.0,
height: 55.0,
child: CircleAvatar(
backgroundColor: Colors.green,
foregroundColor: Colors.red,
backgroundImage: NetworkImage("https://thechive.com/wp-content/uploads/2018/09/4a0dd2313a49cba8381ee0ba33008514.jpg?quality=85&strip=info&w=650"),
),
),
SizedBox(width: 10.0,),
customGroupText("abc", "10/10/2010"),
],
),
Container(
alignment: Alignment.center,
padding: EdgeInsets.symmetric(horizontal: 10.0,vertical: 10.0),
child: FlatButton(
onPressed: (){},
color: Colors.amber,
shape: RoundedRectangleBorder (
borderRadius: BorderRadius.circular(20.0),
),
child: Text(
"Join Now", style: TextStyle(color: Colors.white),
),
),
),
],
),
),
),
)
),
);
}
}
And this is the class where i will made my constructor .
class customGroupText extends StatelessWidget {
String names;
String datess;
customGroupText(this.names,this.datess);
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
names,
style: TextStyle(color: Colors.black, fontSize: 18.0, fontWeight: FontWeight.bold)),
Text(
datess,
style: TextStyle(color: Colors.grey,)),
],
);
}
}
That is easily can be done by tile
Card(
child: ListTile(
leading: Icon(Icons.android),
title: Text('My title'),
subtitle: Text('my sub title'),
trailing: IconButton(
icon: Icon(Icons.print),
onPressed: () {},
),
),
);
BTW thanks for marking answers to your questions as answered!!!!