How to make Flutter ListView with border radius like a picture

Question

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.

Answer 1

Instead of Container you should have used Card and wrapped it with Padding widget.

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,
              ),
            ),
          ],
        ),
      ),
    );
  }
}