Flutter 菜单切换样式

首先来看效果图

之前做这个的时候，有尝试用ChoiceChip去做，不过这个场景的话，用这个有点大材小用，还是换了最直接的方式实现，但个人感觉还是不怎么完美，还是直接上代码吧：

 int _currentSelectIndex = 0;

  List<Widget> _getTabs() {
    List<Widget> tabWidgets = List();
    for (int i = 0; i < 5; i++) {
      tabWidgets.add(new GestureDetector(
          onTap: () {
            setState(() {
              _currentSelectIndex = i;
            });
          },
          child: new Container(
            alignment: Alignment.center,
            padding: EdgeInsets.only(top: 3, bottom: 3, right: 10, left: 10)
            decoration: new BoxDecoration(
              color: _currentSelectIndex == i ? Colors.orange : Colors.white,
              borderRadius: _setBorder(i),
              border: Border.all(
                  width: 0,
                  color: _currentSelectIndex == i ? Colors.orange : Colors.grey),
            ),
            child: Text(
              "第${i}局",
              textAlign: TextAlign.center,
              style: TextStyle(
                  fontSize: 13,
                  color: _currentSelectIndex == i
                      ? Colors.black
                      : Colors.pinkAccent),
            ),
          )));
    }
    return tabWidgets;
  }

  BorderRadiusGeometry _setBorder(int index) {
    BorderRadiusGeometry borderRadiusGeometry;
    switch (index) {
      case 0:
        borderRadiusGeometry = BorderRadius.only(
            topLeft: Radius.circular(5), bottomLeft: Radius.circular(5));
        break;
      case 4:
        borderRadiusGeometry = BorderRadius.only(
            topRight: Radius.circular(5), bottomRight: Radius.circular(5));
        break;
    }
    return borderRadiusGeometry;
  }

复制之后可以直接拿去测试看效果。