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

score 67 · Accepted Answer · edited Nov 12 '22 at 15:21

67

Maybe something like this

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

edited Nov 12 '22 at 15:21

Luca_54

529
4
16

answered Nov 20 '18 at 12:48

Andrii Turkovskyi

27,554
16
95
105

2

This requires creating a unnecessary container/widget Checkout this response - https://stackoverflow.com/a/67933424/8153955 This is much more cleaner, can directly be added to your app theme as well – Nikhil Bansal Jul 28 '22 at 06:00

score 48 · Answer 2 · edited Jan 01 '22 at 19:36

48

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

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

edited Jan 01 '22 at 19:36

tim-montague

16,217
5
62
51

answered Jun 11 '21 at 08:06

shennan

10,798
5
44
79

score 11 · Answer 3 · answered Nov 20 '18 at 12:52

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

score 1 · Answer 4 · answered Jan 20 '21 at 13:48

1

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

AppBar( shadowColor : Colors.blue )

answered Jan 20 '21 at 13:48

Kishan Somaiya

109
1
11

score 0 · Answer 5 · answered Sep 15 '20 at 07:50

If you just want to use a widget in bottom of the AppBar, This is how I did it:

appBar: AppBar(
        title: Text('Soroush!'),
        bottom: PreferredSize(
            child: Container(
              color: Colors.white,
              child: TextFormField(),
            ),
            preferredSize: Size.fromHeight(kToolbarHeight)),

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

5 Answers5