Flutter导航插件cool_nav的使用

Flutter导航插件cool_nav的使用

cool_nav

Pub Version (including pre-releases) Github Action Status

这是一系列非常好用且易于使用的底部导航栏（BottomNavigationBars）集合。

开始使用

添加依赖

在项目的pubspec.yaml文件中添加如下内容：

dependencies:
  cool_nav: ^0.1.1

然后，在Dart代码中导入包：

import 'package:cool_nav/cool_nav.dart';

底部导航栏列表

Spotlight Bottom Navigation Bar

此底部导航栏基于Sanchita Agarwal的设计，您可以轻松定制颜色以及为焦点提供自定义渐变。

使用示例

Scaffold(
    // ...
    bottomNavigationBar: SpotlightBottomNavigationBar(
        items: [
          SpotlightBottomNavigationBarItem(icon: Icons.smartphone),
          SpotlightBottomNavigationBarItem(icon: Icons.laptop_mac),
          SpotlightBottomNavigationBarItem(icon: Icons.desktop_mac),
        ],
        currentIndex: currentIndex,
        selectedItemColor: Colors.cyan,
        onTap: _onTap,
    ),
)

Flip Box Bottom Navigation Bar

此底部导航栏基于dannniel的设计，您可以轻松定制选中和未选中的图标和背景颜色。

使用示例

Scaffold(
    // ...
    bottomNavigationBar: FlipBoxNavigationBar(
          currentIndex: currentIndex,
          verticalPadding: 20.0,
          items: <FlipBoxNavigationBarItem>[
            FlipBoxNavigationBarItem(
              name: 'Tasks',
              selectedIcon: Icons.done_all,
              selectedBackgroundColor: Colors.deepPurpleAccent[200],
              unselectedBackgroundColor: Colors.deepPurpleAccent[100],
            ),
            FlipBoxNavigationBarItem(
              name: 'People',
              selectedIcon: Icons.person,
              unselectedIcon: Icons.person_outline,
              selectedBackgroundColor: Colors.indigoAccent[200],
              unselectedBackgroundColor: Colors.indigoAccent[100],
            ),
            FlipBoxNavigationBarItem(
              name: 'Mail',
              selectedIcon: Icons.mail,
              unselectedIcon: Icons.mail_outline,
              selectedBackgroundColor: Colors.blueAccent[200],
              unselectedBackgroundColor: Colors.blueAccent[100],
            ),
          ]
    ),
)

更多炫酷的导航栏将在未来加入。

示例Demo

下面是完整的应用实例，展示了如何将上述导航栏集成到Flutter应用中。此例子演示了如何使用FlipBoxNavigationBar，您也可以尝试其他类型的导航栏。

import 'package:flutter/material.dart';
import 'package:cool_nav/cool_nav.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cool Nav Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FlipBoxNavigationBarHome(),
    );
  }
}

class FlipBoxNavigationBarHome extends StatefulWidget {
  @override
  _FlipBoxNavigationBarHomeState createState() => _FlipBoxNavigationBarHomeState();
}

class _FlipBoxNavigationBarHomeState extends State<FlipBoxNavigationBarHome> {
  int _currentIndex = 0;

  final List<Widget> _children = [
    Center(child: Text('Tasks Page')),
    Center(child: Text('People Page')),
    Center(child: Text('Mail Page')),
  ];

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cool Nav Example'),
      ),
      body: _children[_currentIndex],
      bottomNavigationBar: FlipBoxNavigationBar(
        currentIndex: _currentIndex,
        onTap: onTabTapped,
        items: <FlipBoxNavigationBarItem>[
          FlipBoxNavigationBarItem(
            name: 'Tasks',
            selectedIcon: Icons.done_all,
            selectedBackgroundColor: Colors.deepPurpleAccent[200],
            unselectedBackgroundColor: Colors.deepPurpleAccent[100],
          ),
          FlipBoxNavigationBarItem(
            name: 'People',
            selectedIcon: Icons.person,
            unselectedIcon: Icons.person_outline,
            selectedBackgroundColor: Colors.indigoAccent[200],
            unselectedBackgroundColor: Colors.indigoAccent[100],
          ),
          FlipBoxNavigationBarItem(
            name: 'Mail',
            selectedIcon: Icons.mail,
            unselectedIcon: Icons.mail_outline,
            selectedBackgroundColor: Colors.blueAccent[200],
            unselectedBackgroundColor: Colors.blueAccent[100],
          ),
        ],
      ),
    );
  }
}

希望这些信息能帮助你更好地理解和使用cool_nav插件！如果你有任何问题或需要进一步的帮助，请随时提问。


更多关于Flutter导航插件cool_nav的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter导航插件cool_nav的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，关于Flutter导航插件cool_nav的使用，下面是一个示例代码，展示如何在Flutter项目中使用该插件进行导航。请注意，具体的API和使用方法可能会根据插件的版本有所变化，因此请参考最新的插件文档。

首先，确保在pubspec.yaml文件中添加cool_nav依赖：

dependencies:
  flutter:
    sdk: flutter
  cool_nav: ^最新版本号  # 替换为实际可用的最新版本号

然后运行flutter pub get来安装依赖。

接下来，我们创建一个简单的Flutter应用，演示如何使用cool_nav进行页面导航。

main.dart

import 'package:flutter/material.dart';
import 'package:cool_nav/cool_nav.dart'; // 导入cool_nav插件

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cool Nav Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CoolNavigator(
        initialRoute: '/',
        routes: {
          '/': (context) => HomeScreen(),
          '/second': (context) => SecondScreen(),
        },
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 使用CoolNavigator.of进行导航
            CoolNavigator.of(context).pushNamed('/second');
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 返回上一页
            Navigator.of(context).pop();
          },
          child: Text('Go Back'),
        ),
      ),
    );
  }
}

说明

  1. 依赖导入：在pubspec.yaml文件中添加cool_nav依赖，并运行flutter pub get。
  2. CoolNavigator：使用CoolNavigator替代Flutter默认的Navigator。在MaterialApp的home属性中使用CoolNavigator，并定义初始路由和路由表。
  3. 路由导航：在HomeScreen中，使用CoolNavigator.of(context).pushNamed('/second')进行页面导航。在SecondScreen中，使用Navigator.of(context).pop()返回上一页。

请注意，cool_nav插件可能提供了更多高级功能，如动画、自定义过渡等，这些功能可以根据插件的文档进行进一步的探索和实现。以上示例仅展示了基本的导航功能。

回到顶部