Detalhes do pacotev1.3.2

scroll_navigation

É uma navegação poderosa por gestos e toques. Você pode rolar da esquerda para a direita ou tocar nos ícones de navegação.

AndroidiOSmacOSWindowsLinux

pub.dev Documentação da API Código-fonte

Downloads em 30 dias: 199
Curtidas: 120
Pontos Pub: 140

Instalar pacote

flutter pub add scroll_navigation

Visão geral do pacote

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

ScrollNavigation é um pacote Flutter que permite navegação intuitiva por meio de rolagem horizontal e gestos de toque. Projetado para interfaces baseadas em abas, permite aos usuários navegar entre abas deslizando para a esquerda ou direita ou tocando nos ícones de navegação. O pacote melhora a experiência do usuário com transições suaves e feedback responsivo em múltiplas plataformas. Ideal para aplicativos que exigem navegação fluida e baseada em gestos, oferece suporte a Android, iOS, macOS, Windows e Linux. Seu design leve se integra perfeitamente a projetos existentes no Flutter.

Casos de uso

Navegação de guia baseada em gestos
Navegação por deslize horizontal em painéis
Navegação de aplicativo móvel e desktop
Interfaces de usuário interativas com layouts com abas
Substituindo barras de navegação tradicionais na parte inferior

Principais recursos

Navegação de rolagem horizontal
Ícones de navegação por toque
Suporte multiplataforma
Animações suaves
indicadores de navegação personalizáveis
detecção de gestos responsiva

Indicado para

Desenvolvedores criando aplicativos Flutter ricos em gestos
Designers procurando padrões de navegação modernos
Aplicativos com várias seções de guia
Projetos direcionados para dispositivos móveis e desktop
Equipes que desejam soluções leves de navegação

Considerações

Pode exigir estilização personalizada para designs complexos
Limitado à navegação horizontal apenas
Impacto potencial no desempenho com muitas abas
Não ideal para necessidades de navegação vertical
Requer manipulação cuidadosa de eventos de toque em telas pequenas

README original

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

scroll_navigation

My other APIs

Features

Fancy animations.
Customizable colors.
Works with the back button.
Scrolling pages by gestures.
Indicator that follows the scroll.
Easy and powerful implementation! :)
Page movement when tapping an icon.

Scroll Navigation Details

NavigationPosition.bottom	NavigationPosition.top

Code

@override
Widget build(BuildContext context) {
  return ScrollNavigation(
    bodyStyle: NavigationBodyStyle(
      background: Colors.white,
      borderRadius: BorderRadius.vertical(bottom: Radius.circular(20)),
    ),
    barStyle: NavigationBarStyle(
      background: Colors.white,
      elevation: 0.0,
    ),
    pages: [
      Container(color: Colors.blue[100]),
      Container(color: Colors.green[100]),
      Container(color: Colors.purple[100]),
      Container(color: Colors.amber[100]),
      Container(color: Colors.deepOrange[100])
    ],
    items: const [
      ScrollNavigationItem(icon: Icon(Icons.camera)),
      ScrollNavigationItem(icon: Icon(Icons.chat)),
      ScrollNavigationItem(icon: Icon(Icons.favorite)),
      ScrollNavigationItem(icon: Icon(Icons.notifications)),
      ScrollNavigationItem(icon: Icon(Icons.home))
    ],
  );
}

NavigationPosition.left	NavigationPosition.right

Code

@override
Widget build(BuildContext context) {
  return ScrollNavigation(
    bodyStyle: NavigationBodyStyle(
      background: Colors.white,
      borderRadius: BorderRadius.horizontal(left: Radius.circular(20)),
      scrollDirection: Axis.vertical,
    ),
    barStyle: NavigationBarStyle(
      position: NavigationPosition.left,
      elevation: 0.0,
      background: Colors.white,
    ),
    pages: [
      Container(color: Colors.blue[100]),
      Container(color: Colors.green[100]),
      Container(color: Colors.purple[100]),
      Container(color: Colors.amber[100]),
      Container(color: Colors.deepOrange[100])
    ],
    items: const [
      ScrollNavigationItem(icon: Icon(Icons.camera)),
      ScrollNavigationItem(icon: Icon(Icons.chat)),
      ScrollNavigationItem(icon: Icon(Icons.favorite)),
      ScrollNavigationItem(icon: Icon(Icons.notifications)),
      ScrollNavigationItem(icon: Icon(Icons.home))
    ],
  );
}

Go to a Page Code

final navigationKey = GlobalKey<ScrollNavigationState>();

@override
Widget build(BuildContext context) {
  return ScrollNavigation(
    key: navigationKey,
    pages: [...],
    items: [...],
    barStyle: NavigationBarStyle(position: NavigationPosition.top),
  );
}

void goToPage(int index) => navigationKey.currentState.goToPage(index);

Identifier Details

physics = true	physics = False

position = IdentifierPosition.topAndRight	showIdentifier = False

Code

return ScrollNavigation(
    pages: [...],
    items: [...],
    physics: true,
    showIdentifier: true,
    identiferStyle: NavigationIdentiferStyle(
      position: NavigationPosition.top,
    ),
);

Title Scroll Navigation Details

Code

return TitleScrollNavigation(
    barStyle: TitleNavigationBarStyle(
      style: TextStyle(fontWeight: FontWeight.bold),
      padding: EdgeInsets.symmetric(horizontal: 40.0),
      spaceBetween: 40,
    ),
    titles: [
      "Main Page",
      "Personal Information",
      "Personalization",
      "Security",
      "Payment Methods",
    ],
    pages: [
      Container(color: Colors.blue[50]),
      Container(color: Colors.red[50]),
      Container(color: Colors.green[50]),
      Container(color: Colors.purple[50]),
      Container(color: Colors.yellow[50]),
    ],
);

Screen Details (Hide AppBar on scroll)

Code

ScrollController controller = ScrollController();

return Screen(
    appBar: AppBarTitle(title: "Title Scroll", showBack: true), //WIDGET IN THE EXAMPLE
    controllerToHideAppBar: controller,
    body: ListView.builder(
      itemCount: 15,
      padding: EdgeInsets.zero,
      controller: controller,
      itemBuilder: (_, __) {
        return Padding(
          padding: EdgeInsets.symmetric(vertical: 5),
          child: Container(
            height: 50,
            color: Colors.blue[50],
          ),
        );
      },
    ),
  );

Categorias

Guia

Dependências

Lista de dependências 1 itens

helpers^1.1.3

Repositório-fonte

seel-channel/scroll_navigation

scroll_navigation

☆ 16 Estrelas⑂ 13 Forks

DartSwiftflutternavigationflutter-package

Projetos que usam este pacote

Ainda não há dados.