ScrollableReordableNavbar for Flutter

Overview

ScrollableReordableNavbar for Flutter

A flutter plugin for create bottom nav bar that can be scrolled when there are than 5 nav items to display. It also let user swipe items position and item can be deleted from the navbar.

Installing:

In your pubspec.yaml

dependencies:
  scrollable_reorderable_navbar: ^0.0.1
import 'package:scrollable_reorderable_navbar/scrollable_reorderable_navbar.dart';


Basic Usage:

    ScrollableReorderableNavBar(
      onItemTap: (arg) {
        setState(() {
          _selectedIndex = arg;
        });
      },
      onReorder: (oldIndex, newIndex) {
        final currItem = _items[_selectedIndex];
        if (oldIndex < newIndex) newIndex -= 1;
          final newItems = [..._items], item = newItems.removeAt(oldIndex);
          newItems.insert(newIndex, item);
        setState(() {
          _items = newItems;
          _selectedIndex = _items.indexOf(currItem);
        });
      },
    items: _items,
    selectedIndex: _selectedIndex,
    onDelete: (index) => setState(() => _items.removeAt(index)),
    deleteIndicationWidget: Container(
      padding: const EdgeInsets.only(bottom: 100),
      child: Align(
        alignment: Alignment.bottomCenter,
        child: Wrap(
          alignment: WrapAlignment.center,
          crossAxisAlignment: WrapCrossAlignment.center,
          direction: Axis.vertical,
          children: [
            Text("Tap on nav item to delete it.",
              style: Theme.of(context).textTheme.bodyText1,
              textAlign: TextAlign.center),
            TextButton(onPressed: () {}, child: const Text("DONE"))
          ],
        ),
      ),
    ),
  )


Custom usage

There are options that let you custom the navbar:\

Properties Description
List items Items composing the navbar, every items should have different names
int selectedIndex The index of the selected NavBarItem
ValueChanged onItemTap Which behaviour should have after the user tap on a NavBarItem
ReorderCallback onReorder Which behaviour should have after user swap 2 NavBarItem
Widget deleteIndicationWidget The Widget displayed on top of the delete overlay to show user that he can tap on NavBarItem to delete them
ValueChanged onDelete Which behaviour should have after user delete a NavBarItem
ReorderItemProxyDecorator? proxyDecorator How the widget should look like on a reorder operation
Color backgroundColor Background color of the navbar
Duration duration Duration of the animations
BoxDecoration? decoration Decoration of the entire navbar. You should use either backgroundColor or this one

Additional information

Don't hesitate to suggest any features or fix that will improve the package!

You might also like...

A Flutter package for easily implementing Material Design navigation transitions.

A Flutter package for easily implementing Material Design navigation transitions.

Morpheus A Flutter package for easily implementing Material Design navigation transitions. Examples Parent-child transition You can use MorpheusPageRo

Jan 7, 2023

A backend server that makes it possible to program with Flutter syntax and reuse existing code

A backend server that makes it possible to program with Flutter syntax and reuse existing code

Get Server GetServer allows you to write backend applications with Flutter. Everything here is familiar, from the widgets, to the setState, initState

Jan 5, 2023

Customized 🚀 Bottom Navigation Bar Using Flutter 🐦

 Customized 🚀 Bottom Navigation Bar Using Flutter 🐦

Customized 🚀 Bottom Navigation Bar Using Flutter 🐦

Dec 7, 2022

Flutter custom BottomBar Navigation Widget

Flutter custom BottomBar Navigation Widget

bottom_bar_with_sheet 💥 Non-standard way to use more space of screens in your application 💥 😳 Custom bottom Sheet under Bottom Navigation Bar 😳 😩

Dec 23, 2022

Transparent Android system navigation bar with Flutter and FlexColorScheme package.

Transparent Android system navigation bar with Flutter and FlexColorScheme package.

Sysnavbar with FlexColorScheme Transparent Android system navigation bar with Flutter and FlexColorScheme. FlexColorScheme V4 Notice If you are using

Oct 21, 2022

A Flutter package for easy implementation of curved navigation bar

A Flutter package for easy implementation of curved navigation bar

curved_navigation_bar pub package A Flutter package for easy implementation of curved navigation bar. Add dependency dependencies: curved_navigation

Dec 9, 2022

Simple but powerfull Flutter navigation with riverpod and Navigator 2.0

Simple but powerfull Flutter navigation with riverpod and Navigator 2.0

Riverpod navigation If you are interested in the motivation why the package was created and a detailed description of what problems it solves, read th

Dec 13, 2022

Flutter Responsive Game of Thrones Flutter App Flutter Responsive Game of Thrones Flutter App

got_2019 A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Jun 9, 2022

Flutter RxDart Explained - The Flutter Way Flutter RxDart Explained - The Flutter Way

rx_demo A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Oct 13, 2021

🆙🚀 Flutter application upgrade/ Flutter App Upgrade /Flutter App Update/Flutter Update / download Plug-in

🆙🚀  Flutter application upgrade/ Flutter App Upgrade /Flutter App Update/Flutter Update / download Plug-in

🆙🚀 Flutter application upgrade/ Flutter App Upgrade /Flutter App Update/Flutter Update / download Plug-in (with notice bar progress), supports full upgrade, hot update and incremental upgrade

Dec 30, 2022

Flutter Installer is an installer for Flutter built with Flutter 💙😎✌

Flutter Installer is an installer for Flutter built with Flutter 💙😎✌

Flutter Installer Flutter Installer is an installer for Flutter built with Flutter 💙 😎 ✌ Flutter and the related logo are trademarks of Google LLC.

Dec 27, 2022

ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter

ABC of Flutter widgets. Intended for super beginners at Flutter. Play with 35+ examples in DartPad directly and get familiar with various basic widgets in Flutter

Basic Widgets Examples This is aimed for complete beginners in Flutter, to get them acquainted with the various basic widgets in Flutter. Run this pro

Jan 3, 2023

Minha primeira aplicação android utilizando Flutter feito no curso de Flutter da Cod3r Cursos Online. O foco dessa aplicação foi um contato inicial com o Flutter.

Minha primeira aplicação android utilizando Flutter feito no curso de Flutter da Cod3r Cursos Online. O foco dessa aplicação foi um contato inicial com o Flutter.

expenses Expenses é uma aplicação android simples feita em Flutter para controlar despesas pessoais. A aplicação consiste em: Listar transações feitas

Apr 19, 2022

Flutter Github Following Application, Using Flutter Provider and Flutter HTTP to get data from Github API.

Flutter Github Following Application, Using Flutter Provider and Flutter HTTP to get data from Github API.

Flutter Github Following Application Watch it on Youtube Previous Designs Checkout my Youtube channel Installation Please remember, after cloning this

Dec 23, 2022

Flutter RSS feed parsing - A demo application of flutter which parse RSS XML contents to the flutter application

Flutter RSS feed parsing - A demo application of flutter which parse RSS XML contents to the flutter application

Flutter RSS feed parsing demo This is demo application of flutter which shows ho

Nov 15, 2022

Flutter social button - A flutter package to create social media login buttons easily to any flutter app

Flutter social button - A flutter package to create social media login buttons easily to any flutter app

Flutter Social Button is a flutter package to create social media login buttons easily to any flutter app.

Dec 5, 2022

Flutter mapbox - This Flutter plugin allows to show embedded interactive and customizable vector maps inside a Flutter widget

Flutter mapbox - This Flutter plugin allows to show embedded interactive and customizable vector maps inside a Flutter widget

Flutter Mapbox GL Please note that this project is community driven and is not a

Jan 31, 2022

Code for Flutter Talk from Flutter Vikings 2022: Custom User Interactions in Flutter

Code for Flutter Talk from Flutter Vikings 2022: Custom User Interactions in Flutter

Custom User Interactions - Flutter Vikings 2022 A companion app for the Flutter Vikings 2022 talk - Custom User Interactions with Shortcuts, Intents,

Sep 16, 2022
Owner
AlexisDeslandes
AlexisDeslandes
Fluro is a Flutter routing library that adds flexible routing options like wildcards, named parameters and clear route definitions.

English | Português The brightest, hippest, coolest router for Flutter. Features Simple route navigation Function handlers (map to a function instead

Luke Pighetti 3.5k Jan 4, 2023
Elegant abstraction for complete deep linking navigation in Flutter

Flutter Deep Link Navigation Provides an elegant abstraction for complete deep linking navigation in Flutter. This package only provides deep linking

Dennis Krasnov 64 Dec 27, 2022
A simple and easy to learn declarative navigation framework for Flutter, based on Navigator 2.0.

A simple and easy to learn declarative navigation framework for Flutter, based on Navigator 2.0 (Router). If you love Flutter, you would love declarat

Zeno Nine 20 Jun 28, 2022
A Flutter implementation of a customizable navigation bar with animations.

A heavily customizable bottom navigation bar with some animation modifiers.

null 1 Jun 17, 2022
flutter bottom navigation bat project

bottom_navigation A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you starte

Danushan Ravendran 3 Sep 23, 2021
Fast code and awesome design-ui for flutter navigation bar

Flutter-awesome-bottom-navigation-bar ??‍?? Fast code and awesome design-ui for flutter navigation bar ?? Getting Started # First you need to add flas

Hmida 20 Nov 22, 2022
Flutter Navigation Best Practices including adapting navigation to platform and branding techniques for navigation surfaces.

Flutter Navigation Best Practices including adapting navigation to platform and branding techniques for navigation surfaces.

Fred Grott 5 Aug 22, 2022
Custom Bottom navigation bar on Flutter.

Intro Custom Bottom navigation bar on Flutter. The updated one Support : Null safety & Support 9 items on Tabs & Some Color, Size, Effects and font cu

Ihab Zaidi 2 Oct 8, 2021
A flutter navigation package

Create By Me(Agalaba Ifeanyi Precious) go Navigate Navigate Like a pro from one Screen to another Using go navigate. go_Navigate provide you the abili

Agalaba Ifeanyi Precious 2 Oct 11, 2021
Flutter Material Design Navigation Drawer Menu

navigation_drawer_menu Flutter Material Design Navigation Drawer Menu Navigation drawer is a common UI pattern for adaptive menus. The Material Design

Christian Findlay 9 Dec 12, 2022