minimalistic_bottom_navigation 0.0.2 minimalistic_bottom_navigation: ^0.0.2 copied to clipboard
Minimalistic bottom navigation for flutter projects.
minimalistic_bottom_navigation #
Minimalistic bottom navigation bar for Flutter projects. Based on my Dribbble design.
I created this design because I find the standard bottom navigation too boring. There is a lot of cool designs available to use, but most of them relies on icons instead of text. An icon without explanatory text can be confusing to some users, which is why I tried to come up with a design that combines beauty and user experience.
For the best result when using the Minimalistic Bottom Navigation, please use the following style guide:
- The text of the items should be roughly the same length. This is necessary because each item has the same amount of horizontal space on the screen. Fewer items can take bigger differences in length.
- Icons should be solid and have a similar color to the background. This makes the icon visible but not taking too much attention. The opacity property can be used to unite the icon color with the background.
Demo #
Installation #
In the dependencies:
section of your pubspec.yaml
, add the following line:
minimalistic_bottom_navigation: <latest_version>
Usage #
import 'package:minimalistic_bottom_navigation/minimalistic_bottom_navigation.dart';
class _MyHomePageState extends State<MyHomePage> {
int currentIndex = 0;
List<Color> colors = List<Color>();
@override
void initState() {
super.initState();
colors.add(Colors.green);
colors.add(Colors.redAccent);
colors.add(Colors.orangeAccent);
}
void bottomNavigationTapped(int index) {
setState(() {
currentIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: AnimatedContainer(
duration: Duration(milliseconds: 500),
curve: Curves.ease,
color: colors[currentIndex],
),
),
bottomNavigationBar: MinimalisticBottomBar(
iconOpacity: 0.2,
elevation: 0,
currentIndex: currentIndex,
onIndexChanged: (index) {
bottomNavigationTapped(index);
},
items: <MinimalisticBottomBarItem>[
MinimalisticBottomBarItem(
text: 'Home',
icon: Icons.home,
color: colors[0],
),
MinimalisticBottomBarItem(
text: 'Music',
icon: Icons.headset,
color: colors[1],
),
MinimalisticBottomBarItem(
text: 'Settings',
icon: Icons.settings,
color: colors[2],
),
],
),
);
}
}
Properties #
- height
double
: Height of the navigation bar. Defaults to80
. - backgroundColor
Color
: The background color of the navigation bar. Defaults toColors.white
. - foregroundColor
Color
: Color of the font. Defaults toColor(0xff4a4a4a)
. - iconOpacity
double
: The opacity of the color of the icons, should be between0
and1
. Defaults to0.5
. - elevation
double
: The elevation of the navigation bar. Defaults to2
. - items
List<MinimalisticBottomBarItem>
: Items in the navigation bar. Must contain between 2 and 5 items (both inclusive). - currentIndex
int
: The current index of the navigation bar. - onIndexChanged
ValueChanged<int>
: Callback when an item is selected.
Example #
View the Flutter app in the example
directory to see a working example of how to use and implement the slider.
Contributors #
Gustav Friis-Hansen: https://github.com/Friiiis
Stefan Petrovic: https://github.com/StefPetro