How to create an AppBar with a bottom coloured border in Flutter?
You can use the AppBar's shape
property to achieve this:
AppBar(
shape: Border(
bottom: BorderSide(
color: Colors.orange,
width: 4
)
),
elevation: 4,
/* ... */
)
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);
}
Maybe something like this
AppBar(
bottom: PreferredSize(
child: Container(
color: Colors.orange,
height: 4.0,
),
preferredSize: Size.fromHeight(4.0)),
)