flutter：如何更改標簽顏色？

Question

我想在標簽點擊時改變顏色。 我想在標簽點擊時改變顏色。 我想在標簽點擊時改變顏色。 我想在標簽點擊時改變顏色。我想在標簽點擊時改變顏色。 我想在標簽點擊時改變顏色。 我想在標簽點擊時改變顏色。 我想在標簽點擊上改變顏色。我想在標簽點擊上改變顏色。我想在標簽點擊上改變顏色。我想在標簽點擊上改變顏色。

這是代碼

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

這次我點擊了類別頁面，但我想改變顏色

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