Flutter 有没有办法使选项卡栏指示器在拐角处向下弯曲?

Flutter 有没有办法使选项卡栏指示器在拐角处向下弯曲?,flutter,flutter-layout,Flutter,Flutter Layout,我在脚手架上的容器上画了一个边界半径。我现在想要的是TabBar指示器沿着容器向下弯曲,而不是一条导致指示器漂浮在背景之上的直线。这张图片将显示我的意思 我尝试过使用TabBar的indicator属性,但没有成功 省道 Widget build(BuildContext context) => StoreConnector<AppState, Store<AppState>>( converter: (Store<AppState> stor

我在脚手架上的容器上画了一个边界半径。我现在想要的是TabBar指示器沿着容器向下弯曲,而不是一条导致指示器漂浮在背景之上的直线。这张图片将显示我的意思

我尝试过使用TabBar的indicator属性,但没有成功

省道

 Widget build(BuildContext context) => StoreConnector<AppState, Store<AppState>>(
  converter: (Store<AppState> store) => store,
  builder: (BuildContext context, Store<AppState> store) => Container(
      decoration: widget.decoration,
      child: Scaffold(
        drawer: widget.drawer ? _menuDrawer(context, store) : null,
        backgroundColor: Colors.transparent,
        appBar: PreferredSize(
            preferredSize: Size.fromHeight(widget.tabBar != null ? 110.0 : 60.0),
            child: Container(
                alignment: Alignment.center,
                child: AppBar(
                  actions: widget.actions,
                  backgroundColor: Colors.transparent,
                  iconTheme: IconThemeData(color: Colors.white),
                  title: widget.teamIsPremium != null
                      ? Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Icon(widget.teamIsPremium ? MdiIcons.star : MdiIcons.starOff),
                            Container(
                              width: 5,
                            ),
                            Text(widget.title),
                          ],
                        )
                      : Text(widget.title),
                  centerTitle: true,
                  elevation: 0,
                  bottom: widget.tabBar,
                ))),
        bottomNavigationBar: widget.selectedMenuItem == WrapperMenuItem.NONE
            ? null
            : Theme(
                data: Theme.of(context).copyWith(textTheme: Theme.of(context).textTheme),
                child: BottomNavigationBar(
                    selectedItemColor: Color(0xff2e2e2e),
                    unselectedItemColor: Color(0xff757575),
                    currentIndex: _getIdFromEnum(widget.selectedMenuItem),
                    onTap: (i) => {
                          if (i != _getIdFromEnum(widget.selectedMenuItem))
                            {widget.selectedMenuItem = _getWrapperMenuItemFromId(i), _moveToPage(context, i)}
                        },
                    showSelectedLabels: true,
                    items: [
                      BottomNavigationBarItem(icon: Icon(MdiIcons.home), title: Text('Start')),
                      BottomNavigationBarItem(icon: Icon(MdiIcons.trafficCone), title: Text('Trainingen')),
                      BottomNavigationBarItem(icon: Icon(MdiIcons.trophy), title: Text('Wedstrijden')),
                      BottomNavigationBarItem(icon: Icon(MdiIcons.accountGroup), title: Text('Spelers'))
                    ]),
              ),
        body: Container(
          margin: widget.small
              ? EdgeInsets.only(left: 5, right: 5, top: 5)
              : widget.tabBar != null ? EdgeInsets.only(top: 0) : EdgeInsets.only(top: 0),
          decoration: BoxDecoration(
              color: widget.transparent ? Colors.transparent : Color.fromRGBO(240, 240, 240, 1),
              borderRadius: BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15))),
          constraints: BoxConstraints.expand(),
          alignment: Alignment(-1, -1),
          child: ClipRRect(
            child: widget.child,
            borderRadius: BorderRadius.only(topLeft: Radius.circular(15), topRight: Radius.circular(15)),
          ),
        ),
        floatingActionButton: widget.floatingActionButton,
        floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
      )));

这里是您可以尝试的,记住所有东西都是颤振中的小部件,因此首先,在脚手架内部创建堆栈,将选项卡()容器()放置在支架内,使用定位或任何其他工具,使它们重叠到所需的程度,然后您应该添加(在您的情况下,这将是一个具有圆形边缘的容器)到选项卡()


这是一张更清晰的图片。

当然,有几种可能的方法可以做到这一点,但这是我能想到的,你也会看到相同的指示器动画。
很想知道它是否有效。

提供的可能是愚蠢的东西,但可能会有所帮助)您知道哪些屏幕将显示MatchOverview选项卡()或MatchStatsTab(),因此您可以尝试在它们上绘制橙色曲线[一个从左,另一个从右]
    return DefaultTabController(
        length: 2,
        child: Wrapper(
          title: 'Wedstrijden',
          drawer: true,
          selectedMenuItem: WrapperMenuItem.MATCH,
          tabBar: TabBar(
            tabs: [
              Tab(text: 'Overzicht'),
              Tab(text: 'Statistieken'),
            ],
          ),
          child: TabBarView(
            children: [
              MatchOverviewTab(),
              MatchStatsTab(),
            ],
          ),
        ),
      );