How to create an AppBar with a bottom coloured border in Flutter?

Question

I would like to create an App Bar like this which has a bottom border as well a tint of shadow which can be done using elevation. Could someone provide a sample code snippet to achieve this

Answer 1

Maybe something like this

AppBar(
   bottom: PreferredSize(
      child: Container(
         color: Colors.orange,
         height: 4.0,
      ),
      preferredSize: Size.fromHeight(4.0)),
   )

Answer 2

You can use the AppBar's shape property to achieve this:

AppBar(
  shape: Border(
    bottom: BorderSide(
      color: Colors.orange,
      width: 4
    )
  ),
  elevation: 4,
  /* ... */
)

Answer 3

Ideally you should make your own appbar if you want a truly customizable design. Example:

class MyAppbar extends StatelessWidget implements PreferredSizeWidget {
  final Widget title;

  const MyAppbar({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Material(
      elevation: 26.0,
      color: Colors.white,
      child: Container(
        padding: const EdgeInsets.all(10.0),
        alignment: Alignment.centerLeft,
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(
              color: Colors.deepOrange,
              width: 3.0,
              style: BorderStyle.solid,
            ),
          ),
        ),
        child: title,
      ),
    );
  }

  final Size preferredSize = const Size.fromHeight(kToolbarHeight);
}

Answer 4

Now a shadowColor Property is available in AppBar which you can use easily like this:

AppBar( shadowColor : Colors.blue )