如何在Flutter中实现此类自定义标签设计？ [等候接听]

Question

I am trying to design like this image in flutter.

Answer 1

There are some basic properties provided in the TabBar but the are not enough in your use case. You have to create a TabController and an index variable. Whenever the switch happened TabController have to set the index & background of the tab is needs to be set according to that index.

Editing my code for more optimise answer with border radius

Example Code

class _TabDemoState extends State<TabDemo> with SingleTickerProviderStateMixin {

  TabController _tabController;

  int _selectedTab = 0;

  @override
  void initState() {
    super.initState();

    _tabController = TabController(vsync: this, length: 3);

    _tabController.addListener((){
      if (!_tabController.indexIsChanging){
        setState(() {
          _selectedTab = _tabController.index; 
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Tab Demo"),
      ),
      backgroundColor: Colors.white,
      body: DefaultTabController(
          length: 3,
          child: Column(
            children: <Widget>[
              Material(
                color: Colors.grey.shade300,
                child: TabBar(
                  unselectedLabelColor: Colors.blue,
                  labelColor: Colors.blue,
                  indicatorColor: Colors.white,
                  controller: _tabController,
                  labelPadding: const EdgeInsets.all(0.0),
                  tabs: [
                    _getTab(0, Icon(Icons.directions_car)),
                    _getTab(1, Icon(Icons.directions_transit)),
                    _getTab(2, Icon(Icons.directions_bike)),
                  ],
                ),
              ),
              Expanded(
                child: TabBarView(
                  physics: NeverScrollableScrollPhysics(),
                  controller: _tabController,
                  children: [
                    Icon(Icons.directions_car),
                    Icon(Icons.directions_transit),
                    Icon(Icons.directions_bike),
                  ],
                ),
              ),
            ],
          )),
    );
  }


  _getTab(index, child) {
    return Tab(
      child: SizedBox.expand(
        child: Container(
          child: child,
          decoration: BoxDecoration(
              color:
                  (_selectedTab == index ? Colors.white : Colors.grey.shade300),
              borderRadius: _generateBorderRadius(index)),
        ),
      ),
    );
  }

  _generateBorderRadius(index) {
    if ((index + 1) == _selectedTab)
      return BorderRadius.only(bottomRight: Radius.circular(10.0));
    else if ((index - 1) == _selectedTab)
      return BorderRadius.only(bottomLeft: Radius.circular(10.0));
    else
      return BorderRadius.zero;
  }
}

Note - In this I have faced an issue. Its when you fast swipe on from left to right that _tabContoller values returns two values first it gives you index-2 value than index-1 value which is expected. I don't know why this is happening but to resolve this issue I have to disable the scroll on TabBarView .