2

So, I want to create this small wedge-like shaped in the center of the bottom of my app bar.

Here's the image, I have highlighted the part.

Thanks Guys, any kind of help is appreciated.

A . L. I
  • 191
  • 1
  • 7

3 Answers3

2

AppBar in Flutter has a shape argument in its constructor - you should leverage it. It receives ShapeBorder and all its descendants. In your case, I would suggest going with ContinuousRectangleBorder. Extend it and override its Path getOuterPath(Rect rect, {TextDirection textDirection}) method. In this method drawing lines and curves from point to point you should draw your AppBar shape manually. Here is an approximate example of how it should look like.

Pavlo Ostasha
  • 14,527
  • 11
  • 35
  • Hey, This actually solves my problem but please could you explain this part `Path getOuterPath(Rect rect, {TextDirection textDirection})` What does this mean? Like what is its significance? – A . L. I Feb 18 '21 at 16:22
  • Hm.. it is a method of the class that defines the other path of a shape. In the default implementation it draws rectangular shape. To override this behaviour you should override this method as its result must not be rectangular anymore. The flutter framework somewhere in its depth will call it and apply its result to an AppBar. It is a simple overriding of a method. – Pavlo Ostasha Feb 19 '21 at 00:09
0

You can build your own AppBar Widget with whatever design you want. Just create a widget that implements PreferredSizeWidget.

This will force you to implement Size get preferredSize method. Here you just need to returns a Size, which represents your AppBar height.

siega
  • 2,508
  • 1
  • 19
  • 22
0

You can do appBar: AppBar(title: Text('Map'), shape: ContinuousRectangleBorder(borderRadius: BorderRadius.circular(100)),), this will give border to the appBar

Aaditya Jagdale
  • 11
  • 2