Curved Container with rounded button on top in 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.

score 3 · Answer 1 · answered Oct 08 '19 at 23:01

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 !!!

Curved Container with rounded button on top in Flutter

1 Answers1