This is repository for Spin Circle Bottom Navigation Bar Package for Flutter

Overview

Spin Circle Bottom Bar

An easy to implement Spin Circle Bottom Navigation Bar for Flutter Applications.

Current Features

  • Initial Release for Spin Circle Bottom Bar
  • Customizable Tab Icon and Text for both Active and Inactive State
  • Customize colors for Spin Circle
  • Customize Bottom Bar and Spin Circle Item Count

Demo

Usage

To Use, simply add SpinCircleBottomBarHolder to your Scaffold's body, as follows:

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(
          title: Text("RetroPortal Studio"),
          backgroundColor: Colors.deepOrangeAccent,
        ),
        //Adding SpinCircleBottomBarHolder to body of Scaffold
        body: SpinCircleBottomBarHolder(
          bottomNavigationBar: SCBottomBarDetails(
              circleColors: [Colors.white, Colors.orange, Colors.redAccent],
              iconTheme: IconThemeData(color: Colors.black45),
              activeIconTheme: IconThemeData(color: Colors.orange),
              backgroundColor: Colors.white,
              titleStyle: TextStyle(color: Colors.black45,fontSize: 12),
              activeTitleStyle: TextStyle(color: Colors.black,fontSize: 12,fontWeight: FontWeight.bold),
              actionButtonDetails: SCActionButtonDetails(
                  color: Colors.redAccent,
                  icon: Icon(
                    Icons.expand_less,
                    color: Colors.white,
                  ),
                  elevation: 2),
              elevation: 2.0,
              items: [
                // Suggested count : 4
                SCBottomBarItem(icon: Icons.verified_user, title: "User", onPressed: () {}),
                SCBottomBarItem(icon: Icons.supervised_user_circle, title: "Details", onPressed: () {}),
                SCBottomBarItem(icon: Icons.notifications, title: "Notifications", onPressed: () {}),
                SCBottomBarItem(icon: Icons.details, title: "New Data", onPressed: () {}),
              ],
              circleItems: [
                //Suggested Count: 3
                SCItem(icon: Icon(Icons.add), onPressed: () {}),
                SCItem(icon: Icon(Icons.print), onPressed: () {}),
                SCItem(icon: Icon(Icons.map), onPressed: () {}),
              ],
              bnbHeight: 80 // Suggested Height 80
          ),
          child: Container(
            color: Colors.orangeAccent.withAlpha(55),
            child: Center(child: Text("Isn't this Awesome!"),),
          ),
        ),
      ),
    );
  }
}

Roadmap

Plans to add more customizations.

License

MIT

You might also like...

Animation nav bar - Flutter Animated Navigation Bar

Animation nav bar - Flutter Animated Navigation Bar

Flutter Animated Navigation Bar Getting Started This project is a starting point

Dec 30, 2022

A new Flutter package for circle list.

A new Flutter package for circle list.

circle_list A new Flutter package for Circle List. Add dependency dependencies: circle_list: ^1.0.2 Super simple to use import 'package:flutter/mat

Dec 15, 2022

Expandable bottom app bar widget for Flutter SDK

Expandable bottom app bar widget for Flutter SDK

Expandable bottom app bar widget for Flutter SDK

Dec 28, 2022

Notched Bottom Tab Bar Example using Flutter Framework

Notched Bottom Tab Bar Example using Flutter Framework

bottom_tab_bar Notched Bottom Tab Bar Example using Flutter Framework Getting Started Flutter tutorial explaining how to create a notched shaped botto

Dec 6, 2022

Doctor Consultation App in Flutter containing splash screen on boarding screen Routing state management Dash board Bottom navigation Decorated Drawer and Doctors Screen in the last.

Doctor Consultation App in Flutter containing splash screen on boarding screen  Routing  state management Dash board Bottom navigation Decorated Drawer and Doctors Screen in the last.

Online doctor Consultation App UI in Flutter Doctor Consultation App UI in Flutter Visit Website Features State Management Navigation Bar Responsive D

Jan 1, 2023

Selectable Circle where colors can be customized and a child widget can be defined

Selectable Circle where colors can be customized and a child widget can be defined

selectable_circle A Flutter package for an Circle that can be Selected with animation. How to use SelectableCircle( width: 80.0, onSelected: (

Sep 29, 2021

A modified version of the existing checkbox with the shape of a circle instead of a rounded rectangle!

A modified version of the existing checkbox with the shape of a circle instead of a rounded rectangle!

Oct 24, 2022

Animation Examples: stepper Counter loading Ripple Circle Generator water Flow Animation Wave

AnimatioExamples(stepperCounter-loadingRippleCircleGenerator-waterFlowAnimationWave) A new Flutter project. Getting Started This project is a starting

Nov 1, 2022

A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

r_scan A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your iss

Nov 11, 2022
Comments
  • Null safety!

    Null safety!

    Hello!

    Some of my flutter projects depend on this package, So I migrated it to null-safety and I'm more than happy to share the migration and to have it merged into your package so that other developers can benefit as well!

    Have a good day :)

    opened by MuhammadEssam96 2
  • Can i use only spincircle action button?

    Can i use only spincircle action button?

    Hey i want use only spincircle action button on my bottomBar. This is my bottomBar and all I want is to use your spincircleButton instead of my green button. Can i do that?

    Screenshot_1613395595

    opened by barangungor 4
  • Suggestions

    Suggestions

    Very nice package. Thank you ❤️

    After playing around with it:

    Suggestion 1: Could it be possible to set only circleitem height (to have space for more circleitems clickable) without making the bottombar bigger also (using bnbHeight)... 😀

    Suggestion 2: Using the "circlebar" I really feel like spinning the circle to get more items. That would be an awesome feature 😀

    opened by PsychTechApS 0
Owner
Paras Jain
Mobile Application and Web Developer | @youtube Content Creator | Worship ReactJs | Flutter | Java | Dart | If anybody's gonna save us... it's us
Paras Jain
Custom bottom bar - A bottom tool bar that can be swiped left or right to expose more tools.

custom_bottom_bar A bottom tool bar that can be swiped left or right to expose more tools. usage Create your custom bottom bars with up to four custom

null 4 Jan 26, 2020
Flutter circle bottom bar by animation

Animation circle bottom bar Flutter circle bottom bar by animation how to use: 1. add dependencies to pubspec.yaml: circle_bottombar: ^1.1.1 2. create

Mehran Jafari 10 Oct 29, 2022
A custom bottom navigation bar with box animation for flutter

A custom bottom navigation bar with box animation. This is inspired from some of the earlier designs, but in a more simplified and yet exiting way. De

SHIVAM SONI 1 Jul 31, 2022
New trick on how to create your own custom icons in flutter with bottom bar navigation

Customized Bottom Navigation Bar in Flutter | Tech With Sam Customized Bottom Navigation Bar in Flutter - Watch on youtube ✌   App Preview App Screens

Samuel Adekunle 10 Oct 26, 2022
simple flutter bottom navigation bar widget

bmnav A very flexible Flutter implementation of the Bottom Navigation Bar. Get Started Add bmanv to your pubspec.yaml file: dependencies: bmnav: ^0.

Edwin 21 Oct 8, 2022
A 3D Bottom Navigation Bar in Flutter

flip_box_bar A 3D BottomNavigationBar inspired by Dribbble design by Dannniel [https://dribbble.com/shots/4811135-Tab-Bar-Cube-Interaction]. Demo Exam

Deven Joshi 258 Nov 19, 2022
Playful and customizable bottom navigation bar for Flutter

rolling_nav_bar A bottom nav bar with layout inspired by this design and with heavily customizable animations, colors, and shapes. Getting Started To

Craig Labenz 117 Dec 22, 2022
Custom Shaped Bottom Navigation Bar in Flutter

CustomShapedBottomBar Custom Shaped Bottom Navigation Bar in Flutter **Usage: ** Add CustomPaint Widget to use this Painter class like this: C

Shraddha Sojitra 5 May 6, 2022
Bottom navigation bar with sliding clip effect.

Sliding Clipped Nav Bar Design Credit Toolbar icons animation by Cuberto How to use? API reference barItems → List<BarItem> List of bar items that sho

Watery Desert 55 Dec 3, 2022
A fancy animated bottom navigation bar 💫.

Stacky_bottom_nav_bar A fancy animated bottom navigation bar. Preview Default Light Mode Default Dark Mode ⚠️ IMPORTANT: when adding this widget don’t

null 5 Oct 23, 2022