flutterflutter-layoutflutter-dependenciesflutter-animationflutter-test
flutter: how to change tab color?
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
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(),
],
),
),
],
),
),
),
);
}