Flutter Dribble clone - flutter

Question

can someone Please help me clone this ui I got it from Dribble and Im facing the problem with the box radius.
I tried using a stack but it doesnt show the container radius maybe i need to use a custom widget.
Please any help is needed i am stuck on this problem.
Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title:Text(DateTimeFormat.format(DateTime.now(),format: 'D M, Y')
,style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 26
),),
actions: [
IconButton(
icon: const Icon(Icons.filter_list_outlined),
tooltip: 'Filter By date',
onPressed: () {
},
),
],
elevation: 0,
backgroundColor: Color(0xff405cbf),
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 100,
color: Color(0xff405cbf),
child: const Padding(
padding: EdgeInsets.fromLTRB(0, 70, 0, 0),
child: Icon(Icons.maximize_outlined,size: 70,color: Colors.white60,),
)
),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20)
),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: Colors.grey.shade600,
spreadRadius: 1,
blurRadius: 15
)
]
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 30),
child: Text("History of Tips",style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.black
),),
),
GFCard(
color: Colors.white60,
boxFit: BoxFit.cover,
content: Column(
children: [
Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("date"),
SizedBox(width: 150,),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text("Odd"),
Divider(color: Colors.black,),
Text("Status")
],
)
],
),
],
)
)
],
),
),
),
],
),
),
);
I added in some box shadow and some different colors but still it's not quite right.

Answer 1

You need to add the appbar inside your body like this:
Scaffold(
key: _scaffoldKey,
backgroundColor: Color(0xff405cbf),
body: Stack(
children: [
AppBar(
title: Text(
DateTimeFormat.format(DateTime.now(), format: 'D M, Y'),
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 26),
),
actions: [
IconButton(
icon: const Icon(Icons.filter_list_outlined),
tooltip: 'Filter By date',
onPressed: () {},
),
],
elevation: 0,
backgroundColor: Color(0xff405cbf),
),
SingleChildScrollView(
child: Column(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 100,
color: Color(0xff405cbf),
child: const Padding(
padding: EdgeInsets.fromLTRB(0, 70, 0, 0),
child: Icon(
Icons.maximize_outlined,
size: 70,
color: Colors.white60,
),
)),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20)),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(40),
boxShadow: [
BoxShadow(
color: Colors.grey.shade600,
spreadRadius: 1,
blurRadius: 15)
]),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 30),
child: Text(
"History of Tips",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Colors.black),
),
),
GFCard(
color: Colors.white60,
boxFit: BoxFit.cover,
content: Column(
children: [
Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("date"),
SizedBox(
width: 150,
),
Column(
crossAxisAlignment:
CrossAxisAlignment.center,
children: [
Text("Odd"),
Divider(
color: Colors.black,
),
Text("Status")
],
)
],
),
],
))
],
),
),
),
],
),
),
],
),
)