Buscar categorias, pacotes e repositórios

Repositório GitHubAlexisDeslandes/scrollable_reorderable_navbar

navegação rolável e reordenável

Uma barra de navegação inferior que pode ser rolada quando há mais de 5 itens de navegação para exibir. Também permite que o usuário deslize os itens para reordenar e que os itens sejam excluídos da barra de navegação.

Capa do projeto navegação rolável e reordenável
Estrelas
5
Forks
0
Último push (UTC)
11 de fev. de 2023
Status do projeto
Ativo

README original

Texto original em inglês. Visite o GitHub para a versão atual.

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<NavBarItem> items Items composing the navbar, every items should have different names
int selectedIndex The index of the selected NavBarItem
ValueChanged<int> 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<int> 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!

Alexis Deslandes GitHub avatar
Autor no GitHub

Alexis Deslandes ↗

Building projects people love to use... hopefully

LinguagensDart

Pacotes publicados por este repositório

Dependências usadas

Lista de dependências 4 itens

  • flutter{"sdk":"flutter"}
  • flutter_testDesenvolvimento{"sdk":"flutter"}
  • flutter_lintsDesenvolvimento^1.0.4
  • mocktailDesenvolvimento^0.2.0

Como escolher um repositório para seu projeto?

Filtre pelo caso de uso, compare a atividade e confira o projeto original antes de adotá-lo.

  1. Busque por nome, autor ou descrição e filtre por tema.
  2. Compare estrelas, forks e envios recentes. Estrelas indicam interesse, mas não garantem qualidade.
  3. Confira o README, a licença e as issues no GitHub antes de usar o projeto.

Fontes e manutenção

“A repository is the most basic element of GitHub.”

GitHub Docs — About repositories ↗