How to design appbar with constant rounded bottom curve in flutter

Question

Trying to curve appbar with roubded curve but unable to implement. Appbar

For more reference please check attached image.:[https.//i.stack.imgur.com/I0xvT.png]

Answer 1

You Could try something like a BottomAppBar class and set the shape property to a CircularNotchedRectangle with the desired radius. Here's an example:

BottomAppBar(
  shape: CircularNotchedRectangle(),
  notchMargin: 4.0,
  child: Container(
    height: 50.0,
  ),
)

The notchMargin property determines the distance between the edge of the app bar and the start of the notch. You can adjust this value to control the size of the curve.

You can also customize the appearance of the app bar by setting its background color and adding buttons or other widgets to it. For example:

BottomAppBar(
  shape: CircularNotchedRectangle(),
  notchMargin: 4.0,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      IconButton(
        icon: Icon(Icons.menu),
        onPressed: () {},
      ),
      IconButton(
        icon: Icon(Icons.search),
        onPressed: () {},
      ),
    ],
  ),
)

Answer 2

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepOrangeAccent,
      body: Column(
        children: [
          SafeArea(
            bottom: false,
            child: Row(
              children: [
                IconButton(onPressed: () {}, icon: Icon(Icons.arrow_back_ios, color: Colors.white,)),
                Text('Document Details', style: TextStyle(
                  fontWeight: FontWeight.w500,
                  fontSize: 16,
                  color: Colors.white
                ),)
              ],
            ),
          ),
          Flexible(
              child: Container(
                height: MediaQuery.of(context).size.height,
                width: MediaQuery.of(context).size.width,
                decoration: BoxDecoration(
                  color: Colors.grey[200],
                  borderRadius: const BorderRadius.only(
                    topRight: Radius.circular(30.0),
                    topLeft: Radius.circular(30.0),
                  ),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withOpacity(0.5),
                      spreadRadius: 4,
                      blurRadius: 6,
                      offset: const Offset(0, 3), // changes position of shadow
                    ),
                  ],
                ),
                child: Column(
                  children: [
                    Text('Items'),
                    Text('Items'),
                    Text('Items')
                  ],
                ),
              )
          )
        ],
      ),
    );
  }
}

You do not need to use the appbar if it does not meet your needs. Just customise your widget however you like and use safearea to avoid mobile.network bars and battery bars. Play around with the home widget by adding padding and change icon to meet your need.