flutter底部导航栏添加角标

import 'package:flutter/material.dart';

class TabsComponent extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new TabsComponentState();
}

class TabsComponentState extends State<TabsComponent> {
  int _selectedIndex = 0;

  final List<Widget> _children = [
    new PlaceholderWidget('Home'),
    new PlaceholderWidget('Love'),
    new PlaceholderWidget('Cart'),
    new PlaceholderWidget('Order'),
    new PlaceholderWidget('My'),
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: _children[_selectedIndex],
      bottomNavigationBar: BottomAppBar(
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            returnBottomItem(_selectedIndex, 0, Icons.home, "首页", 0),
            returnBottomItem(_selectedIndex, 1, Icons.favorite_border, "收藏", 0),
            returnBottomItem(
                _selectedIndex, 2, Icons.local_grocery_store, "购物车", 1),
            returnBottomItem(_selectedIndex, 3, Icons.library_books, "订单", 0),
            returnBottomItem(_selectedIndex, 4, Icons.person, "我的", 0),
          ],
        ),
      ),
    );
  }

  returnBottomItem(
      int selectIndex, int index, IconData iconData, String title, int badge) {
    //未选中状态的样式
    TextStyle textStyle = TextStyle(fontSize: 12.0, color: Colors.grey);
    MaterialColor iconColor = Colors.grey;
    double iconSize = 20;
    EdgeInsetsGeometry padding = EdgeInsets.only(top: 8.0);

    if (selectIndex == index) {
      //选中状态的文字样式
      textStyle =
          TextStyle(fontSize: 12.0, color: Theme.of(context).primaryColor);
      //选中状态的按钮样式
      iconColor = Theme.of(context).primaryColor;
    }
    Widget padItem = SizedBox();
    if (iconData != null) {
      padItem = Padding(
          padding: padding,
          child: Stack(
            children: <Widget>[
              Container(
                color: Colors.white,
                child: Center(
                  child: Column(
                    children: <Widget>[
                      Icon(
                        iconData,
                        color: iconColor,
                        size: iconSize,
                      ),
                      Text(
                        title,
                        style: textStyle,
                      )
                    ],
                  ),
                ),
              ),
              Positioned(
                child: badge > 0
                    ? Container(
                        width: 12,
                        height: 12,
                        child: Center(
                          child: Text(badge.toString(),
                              style: TextStyle(
                                  fontSize: 8.0, color: Colors.white)),
                        ),
                        decoration: BoxDecoration(
                          color: Colors.red,
                          borderRadius: new BorderRadius.all(
                            const Radius.circular(16.0),
                          ),
                        ),
                      )
                    : Text(""),
                right: 22.0,
                top: 0.0,
              ),
            ],
          ));
    }
    Widget item = Expanded(
      flex: 1,
      child: new GestureDetector(
        onTap: () {
          if (index != _selectedIndex) {
            setState(() {
              _selectedIndex = index;
            });
          }
        },
        child: SizedBox(
          height: 52,
          child: padItem,
        ),
      ),
    );
    return item;
  }
}

class PlaceholderWidget extends StatelessWidget {
  final String text;

  PlaceholderWidget(this.text);

  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Text(text),
    );
  }
}