flutter: how to change tab color?

Issue

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

Solution

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

Answered By – Darshini R Gowda

Answer Checked By – Marie Seifert (FlutterFixes Admin)

Leave a Reply

Your email address will not be published.