Question 75138 in Flutter Question posted in
The official Flutter documentation can be found here.

Custom indicator in TabBar in Flutter

I want to change my current tabBar indicator (blue line) to the desire UI (rounded corner only at the top) – image attached. I tried a lot but unable to do so. Is it possible to achieve it and can anyone guide me how I can achieve this result. Following is my code:

 TabBar(
    controller: _controller,
    isScrollable: true,
    labelColor: Theme.of(context).colorScheme.secondaryContainer,
    unselectedLabelColor: Colors.black,
    indicatorColor: Theme.of(context).colorScheme.secondaryContainer,
    indicatorSize: TabBarIndicatorSize.label,
    indicatorWeight: 5.0,)

Current UI:
enter image description here

Target UI:
enter image description here

Tags:

2

Answers


  1. 0

    Try adding the indicator parameter:

    indicator: UnderlineTabIndicator(
          borderSide: BorderSide(width: 5.0),
          insets: EdgeInsets.symmetric(horizontal:16.0)
        ),

    Or you can place the tabs inside a Container widget that has a bottom borderside.

    Login or Signup to reply.
  2. 0

    This should work

    Use plugin:

    tab_indicator_styler: ^2.0.0 Refer Plugin Here

    import 'package:tab_indicator_styler/tab_indicator_styler.dart'

Row(
      children: [
        Expanded(
          child: TabBar(
            controller: _controller,
            isScrollable: true,
            labelColor: Colors.white,
            unselectedLabelColor: Colors.grey,
            indicatorColor: Colors.green,
            indicator: MaterialIndicator(
              color: Colors.blue,
              height: 5,
              topLeftRadius: 10,
              topRightRadius: 10,
              bottomLeftRadius: 0,
              bottomRightRadius: 0,
              tabPosition: TabPosition.bottom,
            ),
            indicatorSize: TabBarIndicatorSize.tab,
            indicatorWeight: 5.0,
            tabs: const [
              Tab(
                child: Text('Tab 1'),
              ),
              Tab(
                child: Text('Tab 2'),
              ),
              Tab(
                child: Text('Tab 3'),
              ),
              Tab(
                child: Text('Tab 4'),
              ),
            ],
          ),
        ),
      ],
    ),

    Output

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search