how to change tabbar color while going to another tab?

Question

I want to change the tab bar colour when I go to another tab in a flutter. On the first page, I want to have a tab bar that shows while scrolling but on another page, I want a solid tab bar (tab bar not based on scrolling). I want something like this. this is from Alibaba apk.

video

class DetailsScreen extends StatefulWidget {


  const DetailsScreen({Key key,}) : super(key: key);

  @override
  State<ProductDetailsScreen> createState() => _DetailsScreenState();
}

class _DetailsScreenState extends State<DetailsScreen>
    with TickerProviderStateMixin {
  AnimationController _ColorAnimationController;

  Animation _colorTween, _iconColorTween;
  Animation<Offset> _transTween;

  @override
  void initState() {

    _ColorAnimationController =
        AnimationController(vsync: this, duration: Duration(seconds: 0));
    _colorTween = ColorTween(begin: Colors.transparent, end: Colors.white)
        .animate(_ColorAnimationController);
    _iconColorTween = ColorTween(begin: Colors.white, end: Colors.black)
        .animate(_ColorAnimationController);



    super.initState();
  }

  bool _scrollListener(ScrollNotification scrollInfo) {
    if (scrollInfo.metrics.axis == Axis.vertical) {
      _ColorAnimationController.animateTo(scrollInfo.metrics.pixels / 350);

  
      return true;
    }
  }

  

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => ProductActions(),
      child: DefaultTabController(
        length: 2,
        child: FutureBuilder<Product>(
          future: ProductDatabaseHelper().getProductWithID(widget.productId),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              final product = snapshot.data;
              return Scaffold(
                backgroundColor: Color(0xFFF5F6F9),
              
                body: NotificationListener<ScrollNotification>(
                  onNotification: _scrollListener,
                  child: Stack(
                    children: [
                      TabBarView(children: [
                        SingleChildScrollView(
                          child: Body(),
                        ),
                        FirstTab(),
                      ]),
                      AnimatedBuilder(
                        animation: _ColorAnimationController,
                        builder: (context, child) => Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: [
                            SizedBox(
                              height: 20,
                            ),
                            Container(
                              decoration: BoxDecoration(
                                color: _colorTween.value,
                                boxShadow: [
                                  BoxShadow(
                                    color: Colors.grey.withOpacity(0.2),
                                    spreadRadius: 0,
                                    blurRadius: 7,
                                    offset: Offset(
                                        0, 3), // changes position of shadow
                                  ),
                                ],
                              ),
                              child: new TabBar(
                               
                          
                                tabs: [
                                  new Tab(
                                      child: Text(
                                    "Overview",
                                    style:
                                        TextStyle(color: _iconColorTween.value),
                                  )),
                                
                                  new Tab(
                                      child: Text(
                                    "Details",
                                    style:
                                        TextStyle(color: _iconColorTween.value),
                                  )),
                               
                                ],
                              ),
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                ),
              
              );
            } else if (snapshot.connectionState == ConnectionState.waiting) {
              return SizedBox(
                  height: MediaQuery.of(context).size.height / 1.3,
                  child: Center(child: CircularProgressIndicator()));
            } else if (snapshot.hasError) {
              final error = snapshot.error.toString();
              Logger().e(error);
            }
            return Center(
              child: Icon(
                Icons.error,
                color: kTextColor,
                size: 60,
              ),
            );
          },
        ),
      ),
    );
  }
}

Answer 1

If you want like this. Here is some customize code for your TabBar:

indicator: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(10),
          ),
          unselectedLabelColor: Colors.grey[600],
          labelColor: Colors.white,
          overlayColor: MaterialStateProperty.all(Colors.white),
          indicatorSize: TabBarIndicatorSize.label,
          indicatorWeight: 0.0,
          indicatorPadding: const EdgeInsets.all(5),

You can change these properties with trying.

Answer 2

I think it will solve your problem

  Color statusBarColor = Colors.red;
  late TabController _tabController;

  @override
  void initState() {
    _tabController = TabController(length: 2, vsync: this);

    _tabController.addListener(() {
      if (_tabController.index == 0) {
        statusBarColor = Colors.red;
      } else {
        statusBarColor = Colors.green;
      }
      setState(() {});
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: SystemUiOverlayStyle(
        statusBarColor: statusBarColor,
        systemNavigationBarColor: statusBarColor,
        systemNavigationBarIconBrightness: Brightness.light,
      ),
      child: Scaffold(
        backgroundColor: statusBarColor,
        body: Column(
          children: [
            SizedBox(
              height: 80,
              child: TabBar(
                onTap: (v) {
                  if (v == 0) {
                    statusBarColor = Colors.red;
                  } else {
                    statusBarColor = Colors.green;
                  }
                  setState(() {});
                },
                controller: _tabController,
                tabs: const [
                  Tab(
                    text: "Home",
                  ),
                  Tab(
                    text: "Contacts",
                  ),
                ],
              ),
            ),
            Expanded(
              child: TabBarView(
                controller: _tabController,
                children: [
                  Container(color: Colors.red),
                  Container(color: Colors.green),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }