Curved Container with rounded button on top in Flutter - flutter

Question

I'm trying to create a Container with a curve on the middle top and put a Round Button inside the curve. It should look similar to the Curved Navigation Bar package from Flutter, however, just without the animation.
I've tried to work with Stack and Positioned, however, Flutter doesn't convert it how I imagine it to be.
class CurvedContainerWithButtonAtTopCenter extends StatelessWidget{
#override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: Container(
height: 200.0,
child: Stack(
children: <Widget>[
Positioned(
top: 30.0,
right: 0.0,
left: 0.0,
child: Container(
height: 170.0,
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 20.0, vertical:
40.0),
color: Colors.blue,
)),
Container(
height: 60.0,
width: 60.0,
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle),
alignment: FractionalOffset.center,
child: Container(
margin: EdgeInsets.all(10.0),
child: FloatingActionButton(),
)
)
],
)
)
);
}
}
I would expect the Container to take the full width and be positioned a little bit lower. The Circle should be in the Center at the Top Border of the Container. The Circle should also contain a FloatingActionButton.

Answer 1

I hope you've found the answer by now, but just in case... bellow you can find a potential solution:
build function
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Text('Hello'),
),
bottomNavigationBar: _navigationDrawer,
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.orange,
child: Icon(Icons.add),
onPressed: () {}),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked);
}
getter for bottom navigation
Widget get _navigationDrawer {
return Container(
height: 80.0,
child: BottomAppBar(
shape: CircularNotchedRectangle(),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.home),
onPressed: () {},
),
Padding(
padding: const EdgeInsets.only(right: 50),
child: IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
),
Padding(
padding: const EdgeInsets.only(left: 50),
child: IconButton(
icon: Icon(Icons.note_add),
onPressed: () {},
),
),
IconButton(
icon: Icon(Icons.portrait),
onPressed: () {},
),
],
)),
);
}
And the result
Hope this helps :) Happy coding !!!