Is there a screen problem with stack in flutter - flutter

Question

My problem is because
I have a image at the top of the screen and under the image is the rest of body scaffold, but that has a rounded corners
I used the Stack with positioned to appbar floating and transparent, the container below appbar, but I can't do the rounded corners of the container with this stack, this is what I'm doing
Scaffold(
body: Stack(
children: <Widget>[
SingleChildScrollView(
child: ...
)
Positioned(
top: 0.0,
left: 0.0,
right: 0.0,
child: AppBar(
...
),
),
],
),
)
After tried this, I could not do this container with rounded corners and I got this

Answer 1

You can use Stack and Position widget to achieve so.
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
home: MyHomePage(),
));
class MyHomePage extends StatefulWidget {
#override
MyHomePageState createState() => MyHomePageState();
}
class MyHomePageState extends State<MyHomePage> {
final upperbodypartheight = 230;
final double rounded = 30;
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/crown.png"),
fit: BoxFit.cover,
),
),
height: 230,
child: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
title: Text("title"),
),
),
Positioned(
bottom: 0,
child: Container(
height: MediaQuery.of(context).size.height -
upperbodypartheight +
rounded,
width: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(rounded),
topRight: Radius.circular(rounded))),
),
),
],
);
}
}