Shaped Bottom Bar in Flutter

Published in

Geek Culture

3 min readJun 5, 2021

In this article we will take a tour in the new Flutter package shaped_bottom_bar and create examples that implement a variety of shapes already defined in the package.

Introduction

In order to create a navigation bottom bar is really simple in Flutter but to implement a more advanced ones you need more skills and more time.

This is the main idea behind this package, shaped_bottom_bar is trying to ease the implementation of an advanced designed navigation bottom bar, by giving us a variety of shapes and its behavior is simple : the selected item will get the shape type given as a parameter.

In this article I will give you more details about this package and its widgets and how we can implement simple and beautifully designed bottom bars.

Widgets

— ShapedBottomBar

As explained here this widget is the main class that creates the bottom shaped bar

Only two required parameters :

onItemChanged is the function that will be called when navigating between items
listItems List of objects of type `ShapedItemObject` used as children in the bottom bar.

Other important attributes:

shape: by default it’s set to ShapeType.NONE so by default the shaped bottom bar is rendered without any custom shape, use this attribute to set your shape possible attributes:

shapeColor: is required when shape is not ShapeType.NONE otherwise you will get this error:

so the minimum attributes to set your beautiful shaped bottom bar are:

onItemChanged
listItems
shape
shapeColor

you can use other parameters to customize more like:` iconsColor`, `textColor`, `selectedIconColor`and `backgroundColor`.

— ShapedItemObject

Use this widget to create the listItems that will be present in the ShapedBottomBar widget.

only one required parameter:

iconData: the item icon.

also you can add a title to the item, by default the item will be rendered witout text.

Installation

like all flutter packages to add shaped bottom bar to your project, add this line in pubsepec.yaml file under `dependencies`:

|shaped_bottom_bar: ^0.0.1

Examples

In this section I will present to you multiple examples using shaped_bottom_bar with different parameters

Example #1

This code above will give us the result below:

Example #2

Example #3

Example #4

Example #5

Those are just a few examples we can build using shaped_bottom_bar package, of course you can customize more and more.

Conclusion

In the end let me remind you this is the first version of the shaped_bottom_bar widget I hope you use it in your future projects.

As we saw it’s simple to implement and simple to customize it.

Of course it’s an open source project you can contribute to it on this repository https://github.com/koukibadr/Shaped-Bottom-Bar

Happy to get your feedback and get your pull requests.

Happy coding!