flutter：如何更改标签颜色？

Question

I want to make change color on tab click. I want to make change color on tab click. I want to make change color on tab click. I want to make change color on tab click.I want to make change color on tab click. I want to make change color on tab click. I want to make change color on tab click. I want to make change color on tab click.I want to make change color on tab click.I want to make change color on tab click.I want to make change color on tab click.

this is code

import 'package:cwc/ui/CwcTv/components/slides/slide_component.dart';
import 'package:cwc/ui/CwcTv/components/videos/video_component.dart';
import 'package:cwc/ui/CwcTv/cwc_tv.dart';
import 'package:cwc/ui/Event/components/activities.dart';
import 'package:cwc/ui/Event/components/category_page.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class EventTab extends StatefulWidget {
  @override
  _EventTabState createState() => _EventTabState();
}

class _EventTabState extends State<EventTab> {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _tabSection(context),
      ],
    );
  }
}

Widget _tabSection(BuildContext context) {
  return DefaultTabController(
    length: 4,
    child: SafeArea(
      child: Padding(
        padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: const EdgeInsets.fromLTRB(14, 10, 14, 0),
              child: TabBar(
                isScrollable: true,
                labelColor: Colors.black,
                indicatorColor: Colors.white,
                tabs: [
                  Tab(
                    child: Container(
                      width: 66,
                      height: 32,
                      decoration: const BoxDecoration(
                        color:  Color(0xff158998),
                        borderRadius: BorderRadius.all(Radius.circular(10)),
                      ),
                      child: Center(
                        child: Text(
                          'All',
                          style: GoogleFonts.poppins(
                            color: Color(0xffffffff),
                            fontSize: 12,
                          ),
                        ),
                      ),
                    ),
                  ),
                  Tab(
                    child: Container(
                      width: 85,
                      height: 32,
                      decoration: const BoxDecoration(
                        color: Color(0xffF1F2F6),
                        borderRadius: BorderRadius.all(Radius.circular(10)),
                      ),
                      child: Center(
                        child: Text(
                          'Category',
                          style: GoogleFonts.poppins(
                            color: Color(0xff8F9698),
                            fontSize: 12,
                          ),
                        ),
                      ),
                    ),
                  ),
                  Tab(
                    child: Container(
                      width: 85,
                      height: 32,
                      decoration: const BoxDecoration(
                        color: Color(0xffF1F2F6),
                        borderRadius: BorderRadius.all(Radius.circular(10)),
                      ),
                      child: Center(
                        child: Text(
                          'Upcoming',
                          style: GoogleFonts.poppins(
                            color: Color(0xff8F9698),
                            fontSize: 12,
                          ),
                        ),
                      ),
                    ),
                  ),
                  Tab(
                    child: Container(
                      width: 66,
                      height: 32,
                      decoration: const BoxDecoration(
                        color: Color(0xffF1F2F6),
                        borderRadius: BorderRadius.all(Radius.circular(10)),
                      ),
                      child: Center(
                        child: Text(
                          'Free',
                          style: GoogleFonts.poppins(
                            color: Color(0xff8F9698),
                            fontSize: 12,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: MediaQuery.of(context).size.height * (50 / 100),
              child: const TabBarView(

                children: [
                  Activities(),
                  CategoryPage(),
                  Activities(),
                  Activities(),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

this time I have clicked on category page but I want to change color

Answer 1

Please Refer Below Code:-

import 'package:cwc/ui/CwcTv/components/slides/slide_component.dart';
import 'package:cwc/ui/CwcTv/components/videos/video_component.dart';
import 'package:cwc/ui/CwcTv/cwc_tv.dart';
import 'package:cwc/ui/Event/components/activities.dart';
import 'package:cwc/ui/Event/components/category_page.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class EventTab extends StatefulWidget {
  @override
  _EventTabState createState() => _EventTabState();
}

class _EventTabState extends State<EventTab>
    with SingleTickerProviderStateMixin, WidgetsBindingObserver {
  TabController controller;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    controller = TabController(length: 4, vsync: this);
    controller.addListener(_handleTabSelection);
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
    WidgetsBinding.instance.removeObserver(this);
    controller?.dispose();
  }

  void _handleTabSelection() {
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        _tabSection(context, controller),
      ],
    );
  }
}

Widget _tabSection(BuildContext context, TabController controller) {
  return DefaultTabController(
    length: 4,
    child: SafeArea(
      child: Padding(
        padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: const EdgeInsets.fromLTRB(14, 10, 14, 0),
              child: TabBar(
                controller: controller,
                unselectedLabelColor: Colors.grey,
                indicatorColor: Colors.white,
                isScrollable: true,
                tabs: [
                  Tab(
                    child: ClipRRect(
                      borderRadius: BorderRadius.all(Radius.circular(10)),
                      child: Container(
                        width: 66,
                        height: 32,
                        color: controller.index == 0
                            ? Color(0xff158998)
                            : Color(0xffF1F2F6),
                        // decoration: const BoxDecoration(

                        //   borderRadius: BorderRadius.all(Radius.circular(10)),
                        // ),
                        child: Center(
                          child: Text(
                            'All',
                            style: GoogleFonts.poppins(
                              color: controller.index == 0
                                  ? Color(0xffffffff)
                                  : Color(0xff8F9698),
                              fontSize: 12,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Tab(
                    child: ClipRRect(
                      borderRadius: BorderRadius.all(Radius.circular(10)),
                      child: Container(
                        width: 85,
                        height: 32,
                        color: controller.index == 1
                            ? Color(0xff158998)
                            : Color(0xffF1F2F6),
                        // decoration: const BoxDecoration(
                        //   color: Color(0xffF1F2F6),
                        //   borderRadius: BorderRadius.all(Radius.circular(10)),
                        // ),
                        child: Center(
                          child: Text(
                            'Category',
                            style: GoogleFonts.poppins(
                              color: controller.index == 1
                                  ? Color(0xffffffff)
                                  : Color(0xff8F9698),
                              fontSize: 12,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Tab(
                    child: ClipRRect(
                      borderRadius: BorderRadius.all(Radius.circular(10)),
                      child: Container(
                        width: 85,
                        height: 32,
                        color: controller.index == 2
                            ? Color(0xff158998)
                            : Color(0xffF1F2F6),
                        // decoration: const BoxDecoration(
                        //   color: Color(0xffF1F2F6),
                        //   borderRadius: BorderRadius.all(Radius.circular(10)),
                        // ),
                        child: Center(
                          child: Text(
                            'Upcoming',
                            style: GoogleFonts.poppins(
                              color: controller.index == 2
                                  ? Color(0xffffffff)
                                  : Color(0xff8F9698),
                              fontSize: 12,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                  Tab(
                    child: ClipRRect(
                      borderRadius: BorderRadius.all(Radius.circular(10)),
                      child: Container(
                        width: 66,
                        height: 32,
                        color: controller.index == 3
                            ? Color(0xff158998)
                            : Color(0xffF1F2F6),
                        // decoration: const BoxDecoration(
                        //   color: Color(0xffF1F2F6),
                        //   borderRadius: BorderRadius.all(Radius.circular(10)),
                        // ),
                        child: Center(
                          child: Text(
                            'Free',
                            style: GoogleFonts.poppins(
                              color: controller.index == 3
                                  ? Color(0xffffffff)
                                  : Color(0xff8F9698),
                              fontSize: 12,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
            SizedBox(
              height: MediaQuery.of(context).size.height * (50 / 100),
              child: const TabBarView(
                children: [
                  Activities(),
                  CategoryPage(),
                  Activities(),
                  Activities(),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}