flutter_snake_navigationbar 0.2.0

  • Readme
  • Changelog
  • Example
  • Installing
  • new55

SnakeNavigationBar #

Pub

A new Flutter SnakeNavigationBar widget package.

Preview #

Usage #

To use this plugin, add flutter_snake_navigationbar as a dependency in your pubspec.yaml file.

Properties #

SnakeNavigationBar has a similar API to BottomNavigationBar and uses BottomNavigationBarItem to show items as well.

     Scaffold(
      bottomNavigationBar: SnakeNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.chat), title: Text('tickets')),
          BottomNavigationBarItem(icon: Icon(Icons.calendar_today), title: Text('calendar')),
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('home')),
          BottomNavigationBarItem(icon: Icon(Icons.mic), title: Text('microphone')),
          BottomNavigationBarItem(icon: Icon(Icons.search), title: Text('search'))
        ],
      ),
      final List<BottomNavigationBarItem> items;

      /// If [SnakeBarStyle.floating] this color is
      /// used as background color of shaped view.
      /// If [SnakeBarStyle.pinned] this color just
      /// a background color of [SnakeNavigationBar] view
      final Color backgroundColor;
    
      /// This color represents a SnakeView , 
      /// unselected icons and labels color
      final Color selectedTintColor;
    
      ///You can customize color for selected icon and label
      final Color selectedIconTintColor;
    
      /// Whether the labels are shown for the selected [BottomNavigationBarItem].
      final bool showSelectedLabels;
    
      /// Whether the labels are shown for the unselected [BottomNavigationBarItem].
      final bool showUnselectedLabels;
    
      /// The index into [items] for the current active [BottomNavigationBarItem].
      final int currentIndex;
    
      /// Defines the [SnakeView] shape and behavior of a [SnakeNavigationBar].
      ///
      /// Default is [SnakeShape.circle]
      final SnakeShape snakeShape;
    
      /// Defines the layout and behavior of a [SnakeNavigationBar].
      ///
      /// See documentation for [SnakeBarStyle] for information on the
      /// meaning of different styles.
      ///
      /// Default is [SnakeBarStyle.pinned]
      final SnakeBarStyle style;
    
      /// You can define custom [ShapeBorder] with padding and elevation to [SnakeNavigationBar]
      ///
      /// IMPORTANT You can use custom shape only with [SnakeBarStyle.floating]
      final ShapeBorder shape;
      final EdgeInsets padding;
      final double elevation;
    
      /// Called when one of the [items] is tapped.
      final ValueChanged<int> onTap;

!! IMPORTANT !! if you use [SnakeShape.circle] then [showSelectedLabels] parameter will be always [FALSE]

[0.1.0] - Initial Beta release.

[0.1.1] - Added SnakeView custom shaping.

[0.2.0] - Updated Readme.md.

example/README.md

flutter_snake_navigationbar_example #

class SnakeBottomBarExampleScreen extends StatefulWidget {
  @override
  _SnakeBottomBarExampleScreenState createState() => _SnakeBottomBarExampleScreenState();
}

class _SnakeBottomBarExampleScreenState extends State<SnakeBottomBarExampleScreen> {
  int _selectedItemPosition = 2;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('SnakeBottomBar Example')),
      bottomNavigationBar: SnakeNavigationBar(
        style: SnakeBarStyle.pinned,
        backgroundColor: Colors.deepPurpleAccent,
        currentIndex: _selectedItemPosition,
        onTap: (index) => setState(() => _selectedItemPosition = index),
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.chat), title: Text('tickets')),
          BottomNavigationBarItem(icon: Icon(Icons.calendar_today), title: Text('calendar')),
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('home')),
          BottomNavigationBarItem(icon: Icon(Icons.mic), title: Text('microphone')),
          BottomNavigationBarItem(icon: Icon(Icons.search), title: Text('search'))
        ],
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_snake_navigationbar: ^0.2.0

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:flutter_snake_navigationbar/flutter_snake_navigationbar.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
11
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]
55
Learn more about scoring.

We analyzed this package on Nov 15, 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/flutter_snake_navigationbar.dart.

Run flutter format to format lib/flutter_snake_navigationbar.dart.

Format lib/src/snake_bar_widget.dart.

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

Format lib/src/snake_item_tile.dart.

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

Format lib/src/snake_shape.dart.

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

Format lib/src/snake_view.dart.

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

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