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

Question

我正在编写一个Flutter应用程序，用于更新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的内容。

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包，该图片来自其页面：

然后将其作为release/*提供给您的icon：

BottomNavigationBarItem