Flutter圆形导航栏插件circle_nav_bar的使用

Circle Nav Bar

Example style:

no padding black

padding with gradient

Level and Icons

only Icons

padding with Levels and icons

How to use

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

dependencies:
  circle_nav_bar: ^latest_version

然后，您可以在Dart代码中使用它。下面是一个完整的示例demo，展示了如何在Flutter应用中集成circle_nav_bar插件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  int _tabIndex = 1;
  int get tabIndex => _tabIndex;
  set tabIndex(int v) {
    _tabIndex = v;
    setState(() {});
  }

  late PageController pageController;

  @override
  void initState() {
    super.initState();
    pageController = PageController(initialPage: _tabIndex);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      bottomNavigationBar: CircleNavBar(
        activeIcons: const [
          Icon(Icons.person, color: Colors.deepPurple),
          Icon(Icons.home, color: Colors.deepPurple),
          Icon(Icons.favorite, color: Colors.deepPurple),
        ],
        inactiveIcons: const [
          Text("My"),
          Text("Home"),
          Text("Like"),
        ],
        color: Colors.white,
        height: 60,
        circleWidth: 60,
        activeIndex: tabIndex,
        onTap: (index) {
          tabIndex = index;
          pageController.jumpToPage(tabIndex);
        },
        padding: const EdgeInsets.only(left: 16, right: 16, bottom: 20),
        cornerRadius: const BorderRadius.only(
          topLeft: Radius.circular(8),
          topRight: Radius.circular(8),
          bottomRight: Radius.circular(24),
          bottomLeft: Radius.circular(24),
        ),
        shadowColor: Colors.deepPurple,
        elevation: 10,
      ),
      body: PageView(
        controller: pageController,
        onPageChanged: (v) {
          tabIndex = v;
        },
        children: [
          Container(
              width: double.infinity,
              height: double.infinity,
              color: Colors.red),
          Container(
              width: double.infinity,
              height: double.infinity,
              color: Colors.green),
          Container(
              width: double.infinity,
              height: double.infinity,
              color: Colors.blue),
        ],
      ),
    );
  }
}

这个示例创建了一个包含三个页面的应用程序，并使用circle_nav_bar作为底部导航栏。每个图标对应一个页面，点击图标可以切换到相应的页面。您可以根据需要自定义图标、颜色和其他样式属性。

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

vueper 1楼•3 天前

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

当然，以下是如何在Flutter项目中使用circle_nav_bar插件的示例代码。circle_nav_bar是一个用于创建圆形导航栏的Flutter插件，非常适合需要圆形导航界面的应用。

首先，确保你已经在pubspec.yaml文件中添加了circle_nav_bar依赖：

dependencies:
  flutter:
    sdk: flutter
  circle_nav_bar: ^最新版本号  # 请替换为实际的最新版本号

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

接下来是一个完整的示例代码，展示如何使用circle_nav_bar：

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

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

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

class CircleNavBarDemo extends StatefulWidget {
  @override
  _CircleNavBarDemoState createState() => _CircleNavBarDemoState();
}

class _CircleNavBarDemoState extends State<CircleNavBarDemo> {
  int selectedIndex = 0;

  final List<String> items = ['Home', 'Search', 'Profile', 'Settings'];
  final List<IconData> icons = [Icons.home, Icons.search, Icons.person, Icons.settings];

  void onItemSelected(int index) {
    setState(() {
      selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Circle Nav Bar Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              items[selectedIndex],
              style: TextStyle(fontSize: 24),
            ),
            SizedBox(height: 20),
            CircleNavBar(
              items: items.map((item) => CircleNavBarItem(
                icon: Icon(icons[items.indexOf(item)], size: 30),
                title: item,
              )).toList(),
              selectedIndex: selectedIndex,
              onItemSelected: onItemSelected,
              backgroundColor: Colors.grey[200],
              unselectedItemColor: Colors.grey,
              selectedItemColor: Colors.blue,
              circleColor: Colors.blueAccent,
              circleSize: 60,
              iconSize: 30,
              padding: 10,
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

依赖导入：
- 导入flutter/material.dart和circle_nav_bar/circle_nav_bar.dart。
主应用：
- MyApp是一个无状态组件，它创建了MaterialApp并设置了主题和主页。
主页：
- CircleNavBarDemo是一个有状态组件，它维护了当前选中的索引selectedIndex。
- items和icons列表分别存储导航项的文本和图标。
导航项选择：
- onItemSelected方法更新当前选中的索引。
UI构建：
- Scaffold包含了一个AppBar和一个居中的Column。
- Column中显示当前选中的导航项文本和一个CircleNavBar。
- CircleNavBar的items属性通过映射items列表生成，每个CircleNavBarItem包含图标和标题。
- 其他属性如backgroundColor、unselectedItemColor、selectedItemColor、circleColor、circleSize、iconSize和padding用于自定义圆形导航栏的外观。

这个示例展示了如何使用circle_nav_bar插件创建一个简单的圆形导航栏，并处理导航项的选择事件。你可以根据需要进一步自定义和扩展这个示例。