How do I Reverse RoundBottom in Appbar Flutter

Question

I tried to use the Radius.Circular method and I input a minus value, but it doesn't seems to work at all.

Is there a method to do it?

Screenshot

Answer 1

Oh, flutter does use constraints to restrict the AppBar height, in this case the constraint is hardcoded to 56 according to material design guidelines. To make your AppBar like that the only thing that occurs to me is to have your Scaffold's Body like this

body:Container(
      color: Colors.lightBlue,
      child: Container(
        color: Colors.white,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(100), topRight: Radius.circular(100))),
        child: Center(
          child: Text('Zero'),
        ),
      ),
    )

We are making the background the same color as the appBar to make that effect. You could also use Stack to achieve the same effect.

Answer 2

You can do this. Make Scaffold background color same as AppBar background color, set elevation to 0 in AppBar and in body use container with border radius.

@override
Widget build(BuildContext context) {
return Scaffold(
    backgroundColor: Colors.black,
    appBar: AppBar(
      title: Text(
        'Home',
        style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white),
      ),
      elevation: 0,
      automaticallyImplyLeading: false,
      backgroundColor: Colors.black,
      brightness: Brightness.dark,
    ),
    body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
                topLeft: Radius.circular(24),
                topRight: Radius.circular(24)),
            color: Colors.white),
        child: Container()));
}