flutter - 如何在脚手架主体中制作圆形标签？

Question

以下是我的模拟：

在这里，我寻求帮助尝试制作圆形标签，分隔线具有可用于标签主体的空间。

试过这个： https ://mightytechno.com/style-tabs-in-flutter-app/

（第一个选项，但仍然没有圆圈）

Answer 1

你的 TabView 控制器，像这样

TabController _tabController = new TabController(length: 2, vsync: this);

你的身体会像

body :  ListView(
//Your TabBar would be something like this, not exactly

new TabBar (children:[
   new Column(children:[
      CircleAvatar(backgroundImage: new Image.asset('asset_location'),),
      Text('menu_item_name')
   ]),
   new Column(children:[
      CircleAvatar(backgroundImage: new Image.asset('asset_location'),),
      Text('menu_item_name')
   ]),
   new Column(children:[
      CircleAvatar(backgroundImage: new Image.asset('asset_location'),),
      Text('menu_item_name')
   ]),
]),

// Then your TabVieW starts here
Your TabView(controller: _tabController,
    children:[
    new Container(child: new Text('Tab1')) // Tab 1
    new Container(child: new Text('Tab2')) // Tab 2
    new Container(child: new Text('Tab3')) // Tab 3
])

Answer 2

在 Tab 小部件中尝试ClipOval小部件。

或者检查这是否可能有助于bubble_tab_indicator。