Buscar pacotes, repositórios e categorias de apps

ducafecatGuia do ecossistema Flutter
Capa de circle_bottom_navigation
Detalhes do pacotev2.0.0

circle_bottom_navigation

Uma barra de navegação inferior animada, bonita e funcional para o seu aplicativo.

AndroidiOSWebmacOSWindowsLinux
pub.dev Documentação da API Código-fonte
Downloads em 30 dias
88
Curtidas
37
Pontos Pub
130

Instalar pacote

flutter pub add circle_bottom_navigation

Visão geral do pacote

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

Uma barra de navegação inferior visualmente atraente e animada para aplicativos Flutter, projetada para melhorar tanto a estética quanto a usabilidade. Oferece transições suaves, estilos personalizáveis e um layout circular que se destaca das barras de navegação tradicionais. Ideal para aplicações modernas que buscam uma experiência de navegação única, mas funcional, em múltiplas plataformas. O pacote é fácil de integrar com um simples comando pub add e suporta Android, iOS, Web, macOS, Windows e Linux.

Casos de uso

  • Navegação de aplicativo móvel
  • Interfaces de aplicativos web
  • Aplicativos Flutter multiplataforma
  • Design de interface moderno
  • Guia inferior personalizável

Principais recursos

  • Transições animadas
  • Design de layout circular
  • Cores e ícones personalizáveis
  • Responsivo em todas as plataformas
  • Integração fácil por meio do pub
  • Suporte a múltiplos temas

Indicado para

  • Desenvolvedores procurando componentes de interface únicos
  • Projetos do Flutter com foco em design
  • Aplicativos direcionados a múltiplas plataformas
  • Experiências interativas do usuário
  • Interfaces minimalistas, mas dinâmicas

Considerações

  • Pode exigir estilos adicionais para layouts complexos
  • Personalização limitada em comparação com implementações nativas
  • Impacto potencial no desempenho com muitas animações
  • Não ideal para aplicações com foco em acessibilidade
  • Mais adequado para aplicativos com 3 a 5 itens de navegação

README original

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

Circle Bottom Navigation

demo

Getting started

Add the plugin:

dependencies:
  ...
  circle_bottom_navigation: ^2.0.0

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.0, size of intern circle
barHeight -> Defaults to 60.0, height of bar
arcHeight -> Defaults to 70.0, height of external circle arc
arcWidth -> Defaults to 90.0, width of external circle arc
circleOutline -> Defaults to 10.0
shadowAllowance -> Defaults to 20.0, size of icon shadow
hasElevationShadows -> Defaults to true, define if bar have elevation shadows
blurShadowRadius -> Defaults to 8.0, size of bar shadow if hasElevationShadows is true
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 an 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, open an issue and if you wanna help, do a PR :D

Categorias

Barra de navegação inferior

Dependências

Lista de dependências 2 itens

Repositório-fonte

Projetos que usam este pacote

Ainda não há dados.