动画导航栏

Flutter 实现的可自定义导航栏，带动画效果。

入门

将以下依赖项添加到您 Flutter 项目的 pubspec.yaml 文件中

dependencies:
  ...
  animated_navigation_bar:

导入包

import 'package:animated_navigation_bar/animatedNavBar.dart';

如果您在开始使用 Flutter 时需要帮助，请前往官方 文档。

构造函数

您可以调用 AnimatedNavBar 的构造函数，并将 AnimatedNavBarPage 列表作为 Scaffold 的 body 来创建它

Scaffold(
  body: AnimatedNavBar(
    pages: <AnimatedNavBarPage>[
      AnimatedNavBarPage(),
      AnimatedNavBarPage(),
      ...
    ]
  ),

AnimatedNavBar 需要多个要素

  • 一个 Color，用于填充导航视图和导航栏的背景色
  • 一个 BorderRadius，半径范围在 0 到 24 之间
  • 以及如前所述的 AnimatedNavBarPage 列表，最大长度为 5，最小长度为 1

AnimatedNavBarPage 需要多个要素

  • 一个 Text，代表标签栏页面
  • 一个 IconData，代表标签栏页面的图标
  • 还有一个 pageContent，这是页面的 Widget，可以是您想要的任何 Widget

样式

您可以使用多种附加参数来样式化 AnimatedNavBar

这是一个示例

Scaffold(
  backgroundColor: Colors.blue,
  body: AnimatedNavBar(
    borderRadius: Radius.circular(24),
    color: Colors.white,
    padding: 8,
    iconColor: Color(0xFF0D1C2E),
    inactiveIconColor: Color(0xFF233B90),
    backgroundColor: Colors.blue,
    shadow: false,
    textStyle: Theme.of(context).textTheme.headline4,
    pages: [
      // first page
      AnimatedNavBarPage(
        title: "Home",
        icon: Icons.home,
        inactiveIcon: Icons.home_outlined,
        pageContent: HomePage(),
      ),
      // second page
      AnimatedNavBarPage(
        title: "Map",
        icon: Icons.map,
        inactiveIcon: Icons.map_outlined,
        pageContent: MapPage(),
      ),
      // third page
      AnimatedNavBarPage(
        title: "User",
        icon: Icons.person,
        inactiveIcon: Icons.person_outline,
        pageContent: UserPage(),
      ),
    ],
  ),
);

贡献

请随时为此项目做出贡献

您可以 fork 该项目并进行自己的版本开发
如果您发现任何错误，请打开一个 issue。
如果您修复了错误或添加了新功能，请打开一个 pull request。

示例

有关完整的可理解项目，请参阅此 存储库。

GitHub

https://github.com/Majidbouikken/AnimatedNavigationBar