Flutter 造型未选中标签指示器

Question

I am attempting to create a tab indicator in flutter with a topright and topleft border radius and manage to apply it to the active tab but cannot figure out how to apply it to the unselected tab indicator.

Below what i want to achieve

this is my exiting code

setColor(int tabIndex) {
    if (tabIndex == 0) {
      return const Color(0xFFFBD59E);
    } else if (tabIndex == 1) {
      return const Color(0xFFC8E0DA);
    } else if (tabIndex == 2) {
      return Colors.yellow;
    }
  }

    TabBar(
          labelStyle: const TextStyle(
             fontSize: 18.0, fontWeight: FontWeight.w600),
               onTap: (index) {
                 setState(() {
                          tabIndex = index;
                          setInactiveColor(index);
                        });
                      },
                      controller: _controller,
                      tabs: const [
                        Tab(
                          text: 'Tab 1',
                        ),
                        Tab(
                          text: 'Tab 2',
                        ),
                      ],
                      indicator: ShapeDecoration(
                        shape: const RoundedRectangleBorder(
                          borderRadius: BorderRadius.only(
                            topRight: Radius.circular(50),
                            topLeft: Radius.circular(50),
                          ),
                        ),
                        color: setColor(tabIndex),
                      ),
                    ),

And this what i get, is there anyway to style the unselected tab indicator?

Answer 1

I don't think there is a way to style the default Tab widget the way you want just using properties of TabBar . Instead you can use another widget instead of Text for Tab 's child.

TabBar(
      labelStyle: const TextStyle(fontSize: 18.0, fontWeight: FontWeight.w600),
      onTap: (index) {
        setState(() {
          tabIndex = index;
        });
      },
      controller: _controller,
      labelPadding: EdgeInsets.zero,
      tabs: [
        Tab(
          child: _buildTab(text: 'Tab 1', color: Colors.red),
        ),
        Tab(
          child: _buildTab(text: 'Tab 2', color: Colors.blue),
        ),
      ],
    ),

The _buidTab method is as follows:

_buildTab({required String text, required Color color}) {
    return Container(
      alignment: Alignment.center,
      width: double.infinity,
      decoration: ShapeDecoration(
        shape: const RoundedRectangleBorder(
          borderRadius: BorderRadius.only(
            topRight: Radius.circular(50),
            topLeft: Radius.circular(50),
          ),
        ),
        color: color,
      ),
      child: Text(text),
    );
  }

Answer 2

You can use TabController to know the current selected tab That's how you can change the color of the tab's

 void initState() {
    super.initState();
    controller = TabController(
      length: 2,
      initialIndex: 1,
      vsync: this,
    );
    controller.addListener(() {
      setState(() {
        activeTabIndex = controller.index;
      });
    });
  }

See the full code:-

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class StudentScreen extends StatefulWidget {
  @override
  _StudentScreenState createState() => _StudentScreenState();
}

class _StudentScreenState extends State<StudentScreen>
    with SingleTickerProviderStateMixin {
  late TabController controller;
  int activeTabIndex = 1;

  @override
  void initState() {
    super.initState();
    controller = TabController(
      length: 2,
      initialIndex: 1,
      vsync: this,
    );
    controller.addListener(() {
      setState(() {
        activeTabIndex = controller.index;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.white,
            elevation: 0,
            bottom: TabBar(
                controller: controller,
                padding: const EdgeInsets.all(0.0),
                isScrollable: false,
                unselectedLabelColor: Colors.black,
                // indicatorPadding: EdgeInsets.zero,
                // indicatorSize: TabBarIndicatorSize.label,
                indicator: const BoxDecoration(
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(30),
                      topRight: Radius.circular(30)),
                  // color: Color(0xFFFBD59E)
                ),
                tabs: [
                  Tab(
                    child: Container(
                      decoration: BoxDecoration(
                        color: activeTabIndex == 0
                            ? const Color(0xFFFBD59E)
                            : const Color(0xFFC8E0DA),
                        // color: Color(0xFFC8E0DA),
                        borderRadius: const BorderRadius.only(
                            topLeft: Radius.circular(30),
                            topRight: Radius.circular(30)),
                        // border:
                        //     Border.all(color: Colors.redAccent, width: 1)
                      ),
                      child: const Align(
                        alignment: Alignment.center,
                        child: Text("Tab one"),
                      ),
                    ),
                  ),
                  Tab(
                    child: Container(
                      decoration: BoxDecoration(
                        color: activeTabIndex == 1
                            ? const Color(0xFFFBD59E)
                            : const Color(0xFFC8E0DA),
                        borderRadius: const BorderRadius.only(
                            topLeft: Radius.circular(30),
                            topRight: Radius.circular(30)),
                        // border:
                        //     Border.all(color: Colors.redAccent, width: 1)
                      ),
                      child: const Align(
                        alignment: Alignment.center,
                        child: Text("Tab two"),
                      ),
                    ),
                  ),
                ]),
          ),
          body: const TabBarView(children: [
            Icon(Icons.apps),
            Icon(Icons.movie),
          ]),
        ));
  }
}

Output

First tab selected

Second tab selected