插件详情v1.3.2

scroll_navigation

它是一种通过手势和点击实现的强大导航。您可以从左向右滑动或点击导航图标。

AndroidiOSmacOSWindowsLinux

pub.dev API 文档源代码

近 30 天下载: 199
喜欢数: 120
Pub 分数: 140

安装插件

flutter pub add scroll_navigation

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

ScrollNavigation 是一个 Flutter 包，可实现通过水平滚动和点击手势进行直观导航。专为基于标签的界面设计，允许用户通过向左或向右滑动，或点击导航图标在标签之间切换。该包通过跨多个平台的流畅过渡和响应式反馈提升了用户体验。适用于需要流畅、手势驱动导航的应用程序，支持 Android、iOS、macOS、Windows 和 Linux。其轻量级设计可无缝集成到现有的 Flutter 项目中。

适合场景

基于手势的标签页导航
仪表板中的横向滑动导航
移动和桌面应用程序导航
带有选项卡布局的交互式 UI
替换传统的底部导航栏

主要特点

横向滚动导航
点击导航图标
跨平台支持
流畅的动画
可自定义的导航指示器
响应式手势检测

适合对象

开发手势丰富的 Flutter 应用的开发者
寻求现代导航模式的设计师
带有多个标签页区域的应用程序
同时针对移动设备和桌面端的项目
希望轻量级导航解决方案的团队

使用建议

可能需要自定义样式才能实现复杂设计
仅限水平导航
使用多个标签页时可能存在性能影响
不适合垂直导航需求
在小屏幕上需要仔细处理触摸事件

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

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],
          ),
        );
      },
    ),
  );

所属分类

标签页

依赖

依赖清单 1 项

helpers^1.1.3

源码仓库

seel-channel/scroll_navigation

scroll_navigation

☆ 16 星标⑂ 13 复刻

DartSwiftflutternavigationflutter-package

使用此插件的项目

暂无相关数据。