circle_bottom_navigation 1.0.3

  • Readme
  • Changelog
  • Example
  • Installing
  • new79

Circle Bottom Navigation #

Getting Started #

Add the plugin:

dependencies:
  ...
  circle_bottom_navigation: ^1.0.3

Minimum Usage #

bottomNavigationBar: CircleBottomNavigation(
  initialSelection: currentPage,
  tabs: [
    TabData(icon: Icons.home),
    TabData(icon: Icons.history),
    TabData(icon: Icons.search),
    TabData(icon: Icons.alarm),
  ],
  onTabChangedListener: (index) {
    setState(() {
      currentPage = index;
    });
  },
)

Attributes #

Required #

initialSelection -> The number of page you want to start/navigate, receive a int
tabs -> List of TabData objects
onTabChangedListener -> Function to handle a tap on a tab, receives int position

Optional #

circleColor -> Defaults to null, derives from Theme
activeIconColor -> Defaults to null, derives from Theme
inactiveIconColor -> Defaults to null, derives from Theme
textColor -> Defaults to null, derives from Theme
barBackgroundColor -> Defaults to null, derives from Theme
circleSize -> Defaults to 60, size of intern circle
barHeight -> Defaults to 60, height of bar
arcHeight -> Defaults to 70, height of external circle arc
arcWidth -> Defaults to 90, width of external circle arc
circleOutline -> Defaults to 10
shadowAllowance -> Defaults to 20, size of shadow
key -> Defaults to null

TabData #

Required #

icon -> Icon to be used for the TabData

Optional #

title -> String to be used for the tab
onClick -> Function to be used when the circle itself is clicked, on an active tab
iconSize -> Size of icon displayed active and not active
fontSize -> Size of font in case of title has informed
fontWeight -> Weight of font in case of title has informed

Example #

There is a example project in the example folder. Check it out.

Showcase #

If you use this package in a live app, let me know and I'll add your app here. ;)

Contributing #

Found a bug? Please, submit a PR!

[1.0.3] - Fix pub.dev errors.

  • Fixed some errors found on pub.dev

[1.0.2] - Readme.

  • Fixed readme consistance
  • analysis_options updated

[1.0.1] - Dart Analysis.

  • Included dart analysis

[1.0.0] - Changes to TabData and release.

  • Now is possible to set title optionally
  • It's possible to set icon size optionally
  • You can set font properties too (font size and font weight)

[0.1.1] - Fix for alignment.

  • Alignment of tab box has fixed

[0.1.0] - Beta Release.

  • Beta release

example/main.dart

import 'package:circle_bottom_navigation/circle_bottom_navigation.dart';
import 'package:circle_bottom_navigation/widgets/tab_data.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.deepPurple,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int currentPage = 0;
  GlobalKey bottomNavigationKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(
          child: Text(
            'Circle Bottom Navigation Example',
          ),
        ),
      ),
      body: Container(
        decoration: BoxDecoration(
          color: Colors.white,
        ),
        child: Center(
          child: Text(
            'Test Circle Navigation'
          ),
        ),
      ),
      bottomNavigationBar: CircleBottomNavigation(
        barHeight: 70,
        circleSize: 65,
        initialSelection: currentPage,
        inactiveIconColor: Colors.grey,
        textColor: Colors.black,
        tabs: [
          TabData(
            icon: Icons.home,
            iconSize: 35,
            title: 'Home',
            fontSize: 19,
            fontWeight: FontWeight.bold,
          ),
          TabData(
            icon: Icons.history,
            iconSize: 35,
            title: 'History',
            fontSize: 19,
            fontWeight: FontWeight.bold,
          ),
          TabData(
            icon: Icons.search,
            iconSize: 35,
            title: 'Search',
            fontSize: 19,
            fontWeight: FontWeight.bold,
          ),
          TabData(
            icon: Icons.alarm,
            iconSize: 35,
            title: 'Alarm',
            fontSize: 19,
            fontWeight: FontWeight.bold,
          ),
        ],
        onTabChangedListener: (index) {
          setState(() {
            currentPage = index;
          });
        },
      ),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  circle_bottom_navigation: ^1.0.3

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

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

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
analyzer ^0.38.2 0.38.5
flutter 0.0.0
vector_math ^2.0.8 2.0.8
Transitive dependencies
args 1.5.2
async 2.4.0
charcode 1.1.2
collection 1.14.11 1.14.12
convert 2.1.1
crypto 2.1.3
csslib 0.16.1
front_end 0.1.27
glob 1.1.7
html 0.14.0+3
kernel 0.3.27
meta 1.1.7
package_config 1.1.0
path 1.6.4
pedantic 1.8.0+1
pub_semver 1.4.2
sky_engine 0.0.99
source_span 1.5.5
string_scanner 1.0.5
term_glyph 1.1.0
typed_data 1.1.6
watcher 0.9.7+12
yaml 2.2.0
Dev dependencies
flutter_test