如何在flutter中将徽章计数数字添加为BottomNavigationBarItem的一部分

Question

我正在编写一个BottomNavigationBar应用程序，该应用程序更新BottomNavigationBar的通知数量。

我使用底部导航库(AHBottomNavigation)在本机android（java）中实现了相同的目标，但似乎无法通过flutter找到解决方法。

 items: <BottomNavigationBarItem>[
                  BottomNavigationBarItem(
                      title: Text('Home'), icon: Icon(Icons.home)),
                  BottomNavigationBarItem(
                      title: Text('Friends'), icon:Icon(Icons.notifications)),
                  BottomNavigationBarItem(
                      title: Text('Settings'), icon: Icon(Icons.settings)),
                ],

我想获取标签2中附有BottomNavigationBarItem标签4的BottomNavigationBarItem 。

Answer 1

尝试这个 ：

        import 'dart:async';
        import 'package:flutter/material.dart';
        import 'badge_icon.dart';
        void main() => runApp(MyApp());
        class MyApp extends StatelessWidget {
        // This widget is the root of your application.
        @override
        Widget build(BuildContext context) {
            return MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
                primarySwatch: Colors.blue,
            ),
            home: MyHomePage(),
            );
        }
        }

        class MyHomePage extends StatefulWidget {
        @override
        _MyHomePageState createState() => _MyHomePageState();
        }

        class _MyHomePageState extends State<MyHomePage> {
        StreamController<int> _countController = StreamController<int>();

        int _currentIndex = 0;
        int _tabBarCount = 0;

        List<Widget> _pages;

        Widget _tabBar() {
            return BottomNavigationBar(
            items: [
                const BottomNavigationBarItem(
                icon: Icon(Icons.home, size: 25),
                title: const Text("Increment"),
                ),
                BottomNavigationBarItem(
                icon: StreamBuilder(
                    initialData: _tabBarCount,
                    stream: _countController.stream,
                    builder: (_, snapshot) => BadgeIcon(
                    icon: Icon(Icons.chat, size: 25),
                    badgeCount: snapshot.data,
                    ),
                ),
                title: const Text("Decrement"),
                ),
            ],
            currentIndex: _currentIndex,
            onTap: (index) => setState(() => _currentIndex = index),
            );
        }

        @override
        void initState() {
            _pages = [
            Container(
                child: Center(
                child: FlatButton(
                    child: Text('Increment'),
                    onPressed: () {
                    _tabBarCount = _tabBarCount + 1;
                    _countController.sink.add(_tabBarCount);
                    },
                ),
                ),
            ),
            Container(
                child: Center(
                child: FlatButton(
                    child: Text('Decrement'),
                    onPressed: () {
                    _tabBarCount = _tabBarCount - 1;
                    _countController.sink.add(_tabBarCount);
                    },
                ),
                ),
            ),
            ];
            super.initState();
        }

        @override
        Widget build(BuildContext context) {
            return Scaffold(
            appBar: AppBar(
                title: Text('Tab Bar Icon Badge'),
            ),
            body: _pages[_currentIndex],
            bottomNavigationBar: _tabBar(),
            );
        }

        @override
        void dispose() {
            _countController.close();
            super.dispose();
        }
        }

BadgeIcon小部件：

        import 'package:flutter/material.dart';

        class BadgeIcon extends StatelessWidget {
        BadgeIcon(
            {this.icon,
            this.badgeCount = 0,
            this.showIfZero = false,
            this.badgeColor = Colors.red,
            TextStyle badgeTextStyle})
            : this.badgeTextStyle = badgeTextStyle ??
                    TextStyle(
                    color: Colors.white,
                    fontSize: 8,
                    );
        final Widget icon;
        final int badgeCount;
        final bool showIfZero;
        final Color badgeColor;
        final TextStyle badgeTextStyle;

        @override
        Widget build(BuildContext context) {
            return new Stack(children: <Widget>[
            icon,
            if (badgeCount > 0 || showIfZero) badge(badgeCount),
            ]);
        }

        Widget badge(int count) => Positioned(
                right: 0,
                top: 0,
                child: new Container(
                padding: EdgeInsets.all(1),
                decoration: new BoxDecoration(
                    color: badgeColor,
                    borderRadius: BorderRadius.circular(8.5),
                ),
                constraints: BoxConstraints(
                    minWidth: 15,
                    minHeight: 15,
                ),
                child: Text(
                    count.toString(),
                    style: new TextStyle(
                    color: Colors.white,
                    fontSize: 10,
                    ),
                    textAlign: TextAlign.center,
                ),
                ),
            );
        }

Answer 2

您还可以使用badges包，其页面上的图片：

然后将其作为icon提供给BottomNavigationBarItem ：

BottomNavigationBarItem(
  icon: BadgeIconButton(
                        itemCount: 5, // required
                        icon: Icon(
                          Icons.monetization_on,
                          color:
                              _selectedIndex == 2 ? Colors.blue : Colors.grey,
                        ), // required
                        badgeColor: Colors.red, // default: Colors.red
                        badgeTextColor: Colors.white, // default: Colors.white
                        hideZeroCount: true, // default: true
                        onPressed: null),
                    title: Text(
                      'Item',
                      style: TextStyle(
                        color: _selectedIndex == 2 ? Colors.blue : Colors.grey,
                      ),
                    )),