Buscar pacotes, repositórios e categorias de apps

ducafecatGuia do ecossistema Flutter
Capa de dot_curved_bottom_nav
Detalhes do pacotev0.0.2

dot_curved_bottom_nav

Forma curva animada deslumbrante ao redor da barra de navegação de indicador. Cor ajustável, cor de fundo, curva de animação e duração da animação.

AndroidiOSWebmacOSWindowsLinux
pub.dev Documentação da API Código-fonte
Downloads em 30 dias
169
Curtidas
51
Pontos Pub
150

Instalar pacote

flutter pub add dot_curved_bottom_nav

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

Um pacote Flutter visualmente impressionante que cria uma forma curva animada abaixo do indicador na barra de navegação inferior. Permite personalização da cor da curva, cor de fundo, curva de animação e duração, aprimorando a experiência do usuário com transições suaves e dinâmicas. Ideal para interfaces modernas de aplicativos que buscam um sentimento refinado e interativo de navegação inferior. O pacote suporta todas as principais plataformas, incluindo Android, iOS, Web, macOS, Windows e Linux.

Casos de uso

  • Melhorando a navegação do aplicativo com feedback visual animado
  • Criando interfaces modernas com barras inferiores curvas
  • Personalizando indicadores de navegação com animações dinâmicas
  • Melhorando o engajamento do usuário por meio de acabamento visual
  • Designando navegação inferior responsiva em múltiplas plataformas

Principais recursos

  • Forma curva animada sob o indicador de navegação
  • Cor personalizável e cor de fundo
  • Curva e duração de animação ajustáveis
  • Animações suaves e fluidas
  • Compatibilidade multiplataforma
  • Integração fácil por meio do comando pub add

Indicado para

  • Designers de UI procurando efeitos avançados de navegação
  • Desenvolvedores construindo aplicativos móveis e web modernos
  • Aplicativos que exigem navegação inferior animada
  • Equipes focadas no acabamento visual e interatividade
  • Desenvolvedores Flutter usando barras de navegação inferior

Considerações

  • Pode afetar o desempenho em dispositivos de baixa potência
  • Requer ajuste cuidadoso das configurações de animação
  • Limitado a casos de uso da barra de navegação inferior
  • Não adequado para designs simples ou minimalistas
  • Depende da implementação correta da estrutura de navegação

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

Stunning Curved Bottom Navigation

Title Image

Preview

Preview

Optional Hide On Scroll

Preview

Getting Started

Add the dependency at pubspec.yaml:

dependencies:
  dot_curved_bottom_nav: ^0.0.1

Basic Usage

bottomNavigationBar: DotCurvedBottomNav(
    scrollController: _scrollController,
    hideOnScroll: true,
    indicatorColor: Colors.blue,
    backgroundColor: Colors.black,
    animationDuration: const Duration(milliseconds: 300),
    animationCurve: Curves.ease,
    selectedIndex: _currentPage,
    indicatorSize: 5,
    borderRadius: 25,
    height: 70,
    onTap: (index) {
    setState(() => _currentPage = index);
    },
    items: [
    Icon(
        Icons.home,
        color: _currentPage == 0 ? Colors.blue : Colors.white,
    ),
    Icon(
        Icons.notification_add,
        color: _currentPage == 1 ? Colors.blue : Colors.white,
    ),
    Icon(
        Icons.color_lens,
        color: _currentPage == 2 ? Colors.blue : Colors.white,
    ),
    Icon(
        Icons.person,
        color: _currentPage == 3 ? Colors.blue : Colors.white,
    ),
    ],
),

Properties

Property Description
scrollController Used to listen when the user scrolls and hides the bottom navigation
hideOnScroll Used to enable or disable hide on scroll behavior. (NOTE: scrollController must be provided when hideOnScroll is TRUE)
indicatorColor Color of the indicator displayed on currently selected item
backgroundColor Configures the background color of the bottom navigation
animationDuration Configures animation duration of hiding and indicator movement between items
animationCurve Configures curve of the animation of indicator movement and hide on scroll animation
selectedIndex Configures currently selected item / page
indicatorSize Configures the size of indicator displayed on top of the item
borderRadius Configures border radius of border DotCurvedBottomNav
height Configures height of DotCurvedBottomNav
onTap Configures callback function that is invoked whenever user taps on an item
items Configures list of items of bottom nav

TODO:

  1. Add More Indicator shapes e.g diamond shape with diamond cut out and more.

Contributions

Feel free to create an issue if you find a bug or if you need new features. Of course PRs are welcome!

If you want to connect with me on LinkedIn: Muzammil Hussain


If you like this work, please consider 👍 the package and ⭐ the repo. It is appreciated.

Categorias

Barra de navegação inferior

Repositório-fonte

Projetos que usam este pacote

Ainda não há dados.