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

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


Maybe something like this

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


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);}


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

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