How to add rounded corners to flutter app bar?

Question

i'm trying to create an app bar in flutter that has two layers - one black-colored top and a blue-colored bottom. The bottom needs to have rounded top edges. I'm attaching a picture for reference. How do I do about that?

I'm currently using the AppBar class in Scaffold and I can make a simple AppBar like this:

AppBar(
      elevation: 0,
      backgroundColor: Color(0xFFB6E6FE),
      leading: CustomLeadingButtonClass(
        onPressed: () {},
        child: Icon(
          Icons.arrow_back_ios,
          color: Colors.black,
          size: 18,
        ),
      ),
    );

Yes, the app bar functionality (back button, log out button, etc) should appear on blue background, which blends with the scaffold background color. The black top is just for design. — siaabd001, Jul 16 '21 at 05:50

score 0 · Answer 1 · answered Jul 16 '21 at 06:02

class BlogApbar extends StatelessWidget implements PreferredSizeWidget {
 final double _pref = 140.0;

  Widget build(BuildContext context) {
    return Container( child: YOURCHILD, decoration: BoxDecoration(
borderRadius: BorderRadius.only()));
  }


  @override
  Size get preferredSize => Size.fromHeight(_pref);

}

You can make your own appbar custom by doing something like this.

How to add rounded corners to flutter app bar?

1 Answers1