如何在flutter中向water_drop_nav_bar添加徽章？

Question

我正在尝试在我正在使用的导航栏中的购物车图标中添加徽章water_drop_nav_bar 我尝试添加它，但它给了我错误，因为 WaterDropNavBar 仅采用 BarItems 并且 barItem 是一个包含两个 IconData 的类，一个用于filledIcon，另一个用于outlinedIcon 这是代码

import 'package:water_drop_nav_bar/water_drop_nav_bar.dart';

class NavBar extends StatefulWidget {
  const NavBar({Key? key}) : super(key: key);

  @override
  State<NavBar> createState() => _NavBarState();
}

class _NavBarState extends State<NavBar> {
  int _selectedIndex = 0;
  final List _pages = [
    const CartScreen(),
  ];

  void _selectIndex(index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  get selctedIndex {
    return _selectedIndex;
  }

  @override
  Widget build(BuildContext context) {
    bool isDark = darkThemeProvider.getDarkTheme;
    return Scaffold(
      // appBar: AppBar(
      // ),
      body: _pages[selctedIndex],
      bottomNavigationBar: WaterDropNavBar(
          backgroundColor: isDark ? Theme.of(context).cardColor : Colors.white,
          inactiveIconColor: isDark ? Colors.white10 : Colors.black12,
          waterDropColor: isDark ? Colors.lightBlue.shade200 : Colors.black87,
          barItems: [
            BarItem(//   <== here
              filledIcon: IconlyBold.buy,
              outlinedIcon: IconlyLight.buy,
            ),
          ],
          selectedIndex: selctedIndex,
          onItemSelected: _selectIndex),
    );
  }
}

Answer 1

您能否详细解释一下您的问题，我尝试了您的代码，我得到的唯一错误是您需要在

barItems

中再添加一项

检查此代码的更改

import 'package:flutter/material.dart';

import 'package:iconly/iconly.dart';
import 'package:water_drop_nav_bar/water_drop_nav_bar.dart';

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

  @override
  State<NavBar> createState() => _NavBarState();
}

class _NavBarState extends State<NavBar> {
  int _selectedIndex = 0;
  
  // One page added
  final List _pages = [
    const Center(
      child: Icon(
        IconlyBold.buy,
        color: Colors.amber,
      ),
    ),
    const Center(
      child: Icon(
        IconlyBold.camera,
        color: Colors.amber,
      ),
    ),
  ];

  void _selectIndex(index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  int get selctedIndex {
    return _selectedIndex;
  }

  @override
  Widget build(BuildContext context) {
    var brightness = MediaQuery.of(context).platformBrightness;
    bool isDark = brightness == Brightness.dark;

    return Scaffold(
      // appBar: AppBar(
      // ),
      body: _pages[selctedIndex],

      bottomNavigationBar: WaterDropNavBar(
        backgroundColor: isDark ? Theme.of(context).cardColor : Colors.white,
        inactiveIconColor: isDark ? Colors.white10 : Colors.black12,
        waterDropColor: isDark ? Colors.lightBlue.shade200 : Colors.black87,
        // One barItemAdded
        barItems: [
          BarItem(
            filledIcon: IconlyBold.buy,
            outlinedIcon: IconlyLight.buy,
          ),
          BarItem(
            filledIcon: IconlyBold.camera,
            outlinedIcon: IconlyLight.camera,
          ),
        ],
        selectedIndex: selctedIndex,
        onItemSelected: _selectIndex,
      ),
    );
  }
}

这是你的用户界面