如何实现这种格式?我真的很困惑怎么做?
这是我到目前为止所取得的结果,请在此处输入图像描述。
和
这就是我真正寻找的在此处输入图像描述 ,我可以在其中添加任意数量的值,但以卡片视图格式。
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),
),
),
),
],
),
),
),
)
),
);
}
}
这是我将制作我的构造函数的类。
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,)),
],
);
}
}