Flutter底部导航栏插件dot_bottom_nav_bar的使用

Flutter底部导航栏插件dot_bottom_nav_bar的使用

安装

步骤1

在你的 pubspec.yaml 文件中添加最新版本的插件，并运行隐式的 flutter pub get：

dependencies:
  dot_bottom_nav_bar: ^0.0.2

步骤2

导入插件并在你的 Flutter 应用中使用它：

import 'package:dot_bottom_nav_bar/view/dot_bottom_nav_bar.dart';

示例

完整示例代码

import 'package:dot_bottom_nav_bar/view/dot_bottom_nav_bar.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(debugShowCheckedModeBanner: false, home: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dot Bottom Nav Bar',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.cyan),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int selectIndex = 0;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(toolbarHeight: 0), // 隐藏顶部应用栏
      body: const Center(child: Text("Dot Bottom Nav Bar")), // 中心位置显示文本
      bottomNavigationBar: DotBottomNavBar(
        currentIndex: selectIndex, // 当前选中的索引
        onTap: (value) { // 点击事件处理
          setState(() {
            selectIndex = value; // 更新当前选中的索引
          });
        },
        items: [ // 导航项列表
          BottomNavItem(
            emptySvg: "assets/ic_empty_home.svg", // 未选中时的图标路径
            fillSvg: "assets/ic_fill_home.svg", // 选中时的图标路径
            label: "Home", // 标签名称
          ),
          BottomNavItem(
            emptySvg: "assets/ic_empty_home.svg",
            fillSvg: "assets/ic_fill_home.svg",
            label: "Explore",
          ),
          BottomNavItem(
            emptySvg: "assets/ic_empty_home.svg",
            fillSvg: "assets/ic_fill_home.svg",
            label: "Setting",
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


当然，我可以为你提供一个关于如何在Flutter中使用dot_bottom_nav_bar插件的代码示例。这个插件允许你创建一个具有动画效果的底部导航栏。以下是一个简单的例子，展示了如何设置和使用dot_bottom_nav_bar。

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

dependencies:
  flutter:
    sdk: flutter
  dot_bottom_nav_bar: ^2.0.0  # 请检查最新版本号

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

接下来，创建一个简单的Flutter应用，展示如何使用dot_bottom_nav_bar：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: DotNavigationScaffold(
        initialPage: 0,
        bottomNavigationBar: DotBottomNavigationBar(
          items: [
            DotBottomNavigationBarItem(
              icon: Icons.home,
              title: 'Home',
            ),
            DotBottomNavigationBarItem(
              icon: Icons.search,
              title: 'Search',
            ),
            DotBottomNavigationBarItem(
              icon: Icons.account_circle,
              title: 'Profile',
            ),
          ],
          currentIndex: 0,
          onChange: (int index) {
            // 处理页面切换逻辑
            print('Navigated to index: $index');
          },
          backgroundColor: Colors.white,
          activeColor: Colors.blue,
          inactiveColor: Colors.grey,
          selectedDotColor: Colors.blueAccent,
          unselectedDotColor: Colors.grey.withOpacity(0.4),
        ),
        body: [
          HomeScreen(),
          SearchScreen(),
          ProfileScreen(),
        ],
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Home Screen'));
  }
}

class SearchScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Search Screen'));
  }
}

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(child: Text('Profile Screen'));
  }
}

在这个示例中，我们使用了DotNavigationScaffold来包裹应用的内容，它接受一个initialPage参数来设置初始页面，以及一个bottomNavigationBar参数来设置底部导航栏。DotBottomNavigationBar接受一个items列表，其中每个DotBottomNavigationBarItem代表一个导航项。

我们还定义了三个简单的屏幕（HomeScreen、SearchScreen和ProfileScreen），每个屏幕只显示一个文本。

当你运行这个应用时，你会看到一个带有三个导航项的底部导航栏。点击不同的导航项将切换到相应的屏幕，并且底部导航栏的动画效果也会相应更新。

请注意，dot_bottom_nav_bar插件的具体API可能会随着版本的更新而有所变化，因此建议查阅最新的官方文档以获取最准确的信息。

回到顶部