minimalistic_bottom_navigation 0.0.2

  • Readme
  • Changelog
  • Installing
  • 62

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 #

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 to 80.
  • backgroundColor Color: The background color of the navigation bar. Defaults to Colors.white.
  • foregroundColor Color: Color of the font. Defaults to Color(0xff4a4a4a).
  • iconOpacity double: The opacity of the color of the icons, should be between 0 and 1. Defaults to 0.5.
  • elevation double: The elevation of the navigation bar. Defaults to 2.
  • 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

Changelog #

[0.0.2] - 24/09 - 2019

  • Added working example.

[0.0.1] - 24/09 - 2019

  • Initial release.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  minimalistic_bottom_navigation: ^0.0.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:minimalistic_bottom_navigation/minimalistic_bottom_navigation.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
31
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
82
Overall:
Weighted score of the above. [more]
62
Learn more about scoring.

We analyzed this package on Nov 11, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.6.0
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.6

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/minimalistic_bottom_navigation.dart.

Run flutter format to format lib/minimalistic_bottom_navigation.dart.

Format lib/src/minimalistic_bottom_bar_item.dart.

Run flutter format to format lib/src/minimalistic_bottom_bar_item.dart.

Maintenance suggestions

Package is pre-v0.1 release. (-10 points)

While nothing is inherently wrong with versions of 0.0.*, it might mean that the author is still experimenting with the general direction of the API.

The package description is too short. (-8 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Maintain an example.

None of the files in the package's example/ directory matches known example patterns.

Common filename patterns include main.dart, example.dart, and minimalistic_bottom_navigation.dart. Packages with multiple examples should provide example/README.md.

For more information see the pub package layout conventions.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test