Is there a way to curve the tabbar indicator down in the corners?

user_7580155 0
Viewed 524

I've put a border radius on the container in a scaffold. What I want now is for the TabBar indicator to curve down along with the container instead of a straight line which results in the indicator to float above the background. The image will show what I mean.

I've tried playing around with the indicator property of the TabBar, but without any success.

Picture of the app as example

Picture of result that I'm looking for (Photoshop)

wrapper.dart

 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,
      )));

match.dart

    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(),
            ],
          ),
        ),
      );
flutter-layout flutter
1 Answers

Here is what you can try, remember everything is a widget in the flutter, so first, create Stack inside your scaffold inside that place your TabBar() and Container() using Positioned or any other such that they overlap to the desired extent then you should add your Custom Indicator (This would a Container with rounded edges in your case)to the TabBar().

Here is an image for more clarity. enter image description here

Of course, there are several possible ways to do it but this is what I can think of and you will see the same indicator animation too. curious to know if it worked.

user_134961230
Related