Question 78192 in Flutter Question posted in
The official Flutter documentation can be found here.

How to design appbar with constant rounded bottom curve in flutter

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

For more reference please check the attached image.

appbar image

Tags:

2

Answers


  1. 0

    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: () {},
      ),
    ],
  ),
)
    Login or Signup to reply.
  2. 0 
    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.

    Preview

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search