How can i wrap a gridview into a container with curved edges in Flutter - flutter-layout

Question

i'm a beginner in flutter and still trying to figure my way around. So i'm trying to build this app(i attached the image below), but I'm finding it difficult to get the gridview into a container and curve the edges of the container or include a border. I tried using Flexible instead to wrap the gridview, but i can't curve the edges with that or put a border.
import 'package:general_quizz/models/first_screen_data.dart';
import 'package:general_quizz/widgets/sectionBoxed.dart';
class Sections extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('quizz app'),
),
body: Column(
children: [
Container(
width: double.infinity,
height: 200,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.redAccent,
),
child: Text('Quizz app')),
Container(
decoration: BoxDecoration(
color:Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
),
),
Flexible(
child: GridView(
children: DUMMY_CATEGORIES
.map(
(catData) => SectionBoxed(
catData.title,
catData.color,
catData.id,
),
)
.toList(),
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200,
childAspectRatio: 3 / 2,
crossAxisSpacing: 20,
mainAxisSpacing: 20,
),
),
),
],
),
);
}
}```
This is what I'm trying to recreate. [this][1]
[I'm trying to recreate this][2]
[1]: https://i.stack.imgur.com/GSl11.jpg
[2]: ![]https://i.stack.imgur.com/3fWCz.jpg

Answer 1

you have to use Container widget like this:
Container(
child:...,
height:200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
)),
);