custom_navigation_bar 0.2.4

  • Readme
  • Changelog
  • Example
  • Installing
  • new70

custom_navigation_bar #

A custom navigation bar with bubble click effect.

pub package License: MIT

Overview #

This project is inspired by this post from Dribbble and The Boring Flutter Development Show, Ep. 35

This package gives you a cute bubble effect when you click on the navigation bar.

Dribbble:

Implemented:

How to install #

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

dependencies:
  custom_navigation_bar: ^0.2.4

Documentation #

You can customize these attributes in the navigation bar.

AttributesTypeDescriptionDefault
scaleFactordoublescale factor for the icon scale animation.0.2
elevationdoubleThe z-coordinate of this CustomNavigationBar8.0
itemsListitem data in CustomNavigationBarrequired
selectedColorColor[Color] when [CustomNavigationBarItem] is selected[blueAccent]
unSelectedColorColor[Color] when [CustomNavigationBarItem] is not selected.grey[600]
onTapFunction(int)callback function when item tappednull
currentIndexintcurrent index of navigation bar.0
iconSizedoublesize of icon. also represent the max radius of bubble effect animation.24.0
backgroundColorColorBackground color of [CustomNavigationBar]Colors.white
strokeColorColorstroke colorblueAccent
bubbleCurveCurveanimation curve of bubble effectlinear
scaleCurveCurveanimation curve of scale effectlinear

And for customize icon in the navigation bar, just put the icons you want in the CustomNavigationBarItem like this.

CustomNavigationBar(
        ...
        items: [
          CustomNavigationBarItem(
            icon: Icons.home,
          ),
          CustomNavigationBarItem(
            icon: Icons.shopping_cart,
          ),
          CustomNavigationBarItem(
            icon: Icons.lightbulb_outline,
          ),
          CustomNavigationBarItem(
            icon: Icons.search,
          ),
          CustomNavigationBarItem(
            icon: Icons.account_circle,
          ),
        ],
        ...
      )

Example #

Check example app for more details.

Future Plans #

  • [x] Code format
  • [x] Make it more like native navigation bar in Flutter.
  • [ ] Better documentation
  • [ ] More customizations!!
  • [ ] Support Flame widget maybe?
    And more...

[0.2.4] - 2020-03-05. #

  • fix minor bugs.

[0.2.3] - 2020-03-05. #

  • fix documentation.

[0.2.1] - 2020-03-05. #

  • Change item aligment type.

[0.2.0] - 2020-03-05. #

  • Remove height property in CustomNavigationBar.
  • Custom scale factor for icon scale animation.
  • Add elevation property.

[0.1.1] - 2020-03-04. #

  • Add more descriptions.

[0.1.0] - 2020-03-04. #

  • Initial release.

example/lib/main.dart

// Copyright (c) 2020 Ricky Wen
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.

import 'package:flutter/material.dart';
import 'package:custom_navigation_bar/custom_navigation_bar.dart';
import 'package:flutter_icons/flutter_icons.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Navigation Bar Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: ListView(
          children: <Widget>[
            _buildOriginDesign(),
            _buildLightDesign(),
            _buildNoElevation(),
            _buildCustomIconDesign(),
          ],
        ),
      ),
    );
  }

  Widget _buildOriginDesign() {
    return Column(
      children: <Widget>[
        SizedBox(
          height: 8.0,
        ),
        Text('Dribbble'),
        SizedBox(
          height: 8.0,
        ),
        CustomNavigationBar(
          iconSize: 30.0,
          selectedColor: Colors.white,
          strokeColor: Colors.white,
          unSelectedColor: Color(0xff6c788a),
          backgroundColor: Color(0xff040307),
          items: [
            CustomNavigationBarItem(
              icon: Icons.home,
            ),
            CustomNavigationBarItem(
              icon: Icons.shopping_cart,
            ),
            CustomNavigationBarItem(
              icon: Icons.lightbulb_outline,
            ),
            CustomNavigationBarItem(
              icon: Icons.search,
            ),
            CustomNavigationBarItem(
              icon: Icons.account_circle,
            ),
          ],
          currentIndex: _currentIndex,
          onTap: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
        ),
        SizedBox(
          height: 8.0,
        ),
      ],
    );
  }

  Widget _buildLightDesign() {
    return Column(
      children: <Widget>[
        SizedBox(
          height: 8.0,
        ),
        Text('Light'),
        SizedBox(
          height: 8.0,
        ),
        CustomNavigationBar(
          iconSize: 30.0,
          selectedColor: Color(0xff040307),
          strokeColor: Color(0x90040307),
          unSelectedColor: Color(0xffacacac),
          backgroundColor: Colors.white,
          items: [
            CustomNavigationBarItem(
              icon: Icons.home,
            ),
            CustomNavigationBarItem(
              icon: Icons.shopping_cart,
            ),
            CustomNavigationBarItem(
              icon: Icons.lightbulb_outline,
            ),
            CustomNavigationBarItem(
              icon: Icons.search,
            ),
            CustomNavigationBarItem(
              icon: Icons.account_circle,
            ),
          ],
          currentIndex: _currentIndex,
          onTap: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
        ),
        SizedBox(
          height: 8.0,
        ),
      ],
    );
  }

  Widget _buildNoElevation() {
    return Column(
      children: <Widget>[
        SizedBox(
          height: 8.0,
        ),
        Text('No elevation'),
        SizedBox(
          height: 8.0,
        ),
        CustomNavigationBar(
          elevation: 0.0,
          iconSize: 30.0,
          selectedColor: Color(0xff625aff),
          strokeColor: Color(0xff625aff),
          unSelectedColor: Colors.white,
          backgroundColor: Color(0xffa9a5f2),
          items: [
            CustomNavigationBarItem(
              icon: Icons.home,
            ),
            CustomNavigationBarItem(
              icon: Icons.shopping_cart,
            ),
            CustomNavigationBarItem(
              icon: Icons.lightbulb_outline,
            ),
            CustomNavigationBarItem(
              icon: Icons.search,
            ),
            CustomNavigationBarItem(
              icon: Icons.account_circle,
            ),
          ],
          currentIndex: _currentIndex,
          onTap: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
        ),
        SizedBox(
          height: 8.0,
        ),
      ],
    );
  }

  Widget _buildCustomIconDesign() {
    return Column(
      children: <Widget>[
        SizedBox(
          height: 8.0,
        ),
        Text('Custom Icon from Ant Design'),
        SizedBox(
          height: 8.0,
        ),
        CustomNavigationBar(
          iconSize: 30.0,
          selectedColor: Color(0xff0c18fb),
          strokeColor: Colors.grey[200],
          unSelectedColor: Colors.grey[600],
          backgroundColor: Colors.white,
          items: [
            CustomNavigationBarItem(
              icon: AntDesign.getIconData('home'),
            ),
            CustomNavigationBarItem(
              icon: AntDesign.getIconData('shoppingcart'),
            ),
            CustomNavigationBarItem(
              icon: AntDesign.getIconData("cloudo"),
            ),
            CustomNavigationBarItem(
              icon: AntDesign.getIconData('search1'),
            ),
            CustomNavigationBarItem(
              icon: AntDesign.getIconData("user"),
            ),
          ],
          currentIndex: _currentIndex,
          onTap: (index) {
            setState(() {
              _currentIndex = index;
            });
          },
        ),
        SizedBox(
          height: 8.0,
        ),
      ],
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  custom_navigation_bar: ^0.2.4

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:custom_navigation_bar/custom_navigation_bar.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
39
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
70
Learn more about scoring.

We analyzed this package on Mar 26, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Dependencies

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