[英]How to make Flutter ListView with border radius like a picture
Hi I am making a project but I need to customize listview box like in picture which I included.嗨,我正在制作一个项目,但我需要像我包含的图片一样自定义列表视图框。 I tried many options but I could not do that.
我尝试了很多选择,但我做不到。
class Butgerlist extends StatelessWidget {
@override
Widget build(BuildContext context) {
final title = 'Grid List';
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: GridView.count(
crossAxisCount: 2,
children: <Widget>[
Container(
child: const Center(
child: (Text("box1")),
),
color: Colors.red,
),
Container(
child: Text("box2"),
color: Colors.yellow,
),
Container(
child: Text("box3"),
color: Colors.orange,
),
Container(
child: Text("box4"),
color: Colors.blue,
),
],
),
),
);
}
}
I want to make my listview like this.我想让我的列表视图像这样。 If you have any suggestions please let me know.
如果您有任何建议,请让我知道。 thank you.
谢谢你。
Instead of Container
you should have used Card
and wrapped it with Padding
widget.您应该使用
Card
而不是Container
并用Padding
小部件包装它。
This should work for you:这应该适合你:
class MyApp extends StatelessWidget {
static const title = 'Title';
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
final border = RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
);
final padding = const EdgeInsets.all(4.0);
return MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: GridView.count(
crossAxisCount: 2,
children: <Widget>[
Padding(
padding: padding,
child: Card(
shape: border,
color: Colors.red,
child: const Center(child: (Text("box1"))),
),
),
Padding(
padding: padding,
child: Card(
shape: border,
child: Text("box2"),
color: Colors.yellow,
),
),
Padding(
padding: padding,
child: Card(
shape: border,
child: Text("box3"),
color: Colors.orange,
),
),
Padding(
padding: padding,
child: Card(
shape: border,
child: Text("box4"),
color: Colors.blue,
),
),
],
),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.