Solved: flutter: how to change tab color?

Question

Asked by Deepak on January 05, 2022 (source).

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

enter image description here

Answer

Question answered by Darshini R (source).

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(),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

FLUTTER FLUTTER-ANIMATION FLUTTER-DEPENDENCIES FLUTTER-LAYOUT FLUTTER-TEST
SHARE: