shaped bottom bar #

A new bottom bar in Flutter! a shaped bottom bar.

Choose your shape (circle, square, hexagon...) and let us do the work.

• Installation
• Widgets introduction
• Example

Installing #

Add this line to pubspec

dependencies:
    shaped_bottom_bar: ^0.0.1

Widgets #

ShapedBottomBar This the main widget that will create the bottom bar. With just two required parameters you get a full bottom bar.

required parameters

• onItemChanged function that trigger every time you switch between items
• listItems list of type ShapedItemObject that will be rendered in the bottom bar

this will create a simple bottom bar without any shape with just a different color for the selected item

Other parameters

• shape variable of type ShapeType enum contains all available shapes, by default it's set to None
• shapeColor the color of the shape once it selected, by default it's null
• selectedIconColor the selected icon color, by default it's white
• backgroundColor the background of the shaped bottom bar, by default it's blue
• selectedItemIndex the default selected item, by default it's the first one (index 0)

ShapedBottomBarItem the widget that will be used in the listItems parameters in the ShapedBottomBar widget This widget contains just four parameters.

required parameters

• icon variable of type IconData it represent the icon that the item will get

Other parameters

• text the item text, by default it's an empty text.
• themeColor color that will be set to the icon. by default it's black
• renderWithText by default it's false, this will indicate whether the widget will render the text or not.

Example #

this will generate a normale bottom bar without any shape.

ShapedBottomBar(
 	backgroundColor: Colors.grey,
    listItems: [
       ShapedItemObject(iconData: Icons.settings, title: "Settings"),
       ShapedItemObject(iconData: Icons.account_balance_outlined, title: "Account"),
       ShapedItemObject(iconData: Icons.verified_user_rounded, title: "User"),
       ShapedItemObject(iconData: Icons.login, title: "Logout"),
      ],
   onItemChanged: (position) {
     setState(() {
        this.selectedItem = position;
     });
  },
  selectedIconColor: Colors.white
)

And the example below will generate a bottom bar with an hexagon shape

ShapedBottomBar(
	backgroundColor:  Colors.grey,
	iconsColor:  Colors.white,
	listItems: [
		ShapedItemObject(iconData:  Icons.settings, title:  "Settings"),
		ShapedItemObject(iconData:  Icons.account_balance_outlined, title:  "Account"),
		ShapedItemObject(iconData:  Icons.verified_user_rounded, title:  "User"),
		ShapedItemObject(iconData:  Icons.login, title:  "Logout"),
	],
	onItemChanged: (position) {
		setState(() {
			this.selectedItem = position;
		});
	},
	shapeColor:  Colors.pink,
	selectedIconColor:  Colors.white,
	shape:  ShapeType.HEXAGONE
)

Happy to get your issues and feedback on the project repository in the link below: Link to repository