在 TabBar 中更改图像颜色 Flutter

Question

When clicking on the image they change color, it just doesn't change if you drag with your finger, could someone help me with the icons change color when the user also wants to drag with the finger, this below is the code.

                SliverOverlapAbsorber(
                        handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                            context),
                        sliver: SliverAppBar(
                          pinned: true,
                          floating: true,
                          automaticallyImplyLeading: false,
                          forceElevated: innerBoxIsScrolled,
                          bottom: TabBar(
                            onTap: (value) {
                              WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
                                setState(() {
                                  index=value;
                                });
                              });
                            },
                            tabs: [
                              Tab(
                                icon: SizedBox(
                                  height: 25,
                                  child: Image.asset(
                                    AppImages.fix,
                                    color:
                                        index == 0 ? Colors.white : Colors.blue,
                                  ),
                                ),
                              ),
                              Tab(
                                icon: SizedBox(
                                  height: 25,
                                  child: Image.asset(
                                    AppImages.home,
                                    color:
                                        index == 1 ? Colors.white : Colors.blue,
                                  ),
                                ),
                              ),
                            ],
                          ),
                        ),
                      ),

Answer 1

Please have a look at the official documentation on how to implement TabBar :

https://api.flutter.dev/flutter/material/TabBar-class.html

Answer 2

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
 
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 2,
        child: Builder(
          builder: (context) {
            final TabController tabController =
                DefaultTabController.of(context)!;
            tabController.addListener(() {
              if (!tabController.indexIsChanging) {
                setState(() {});
              }
            });
            return NestedScrollView(
              headerSliverBuilder: (context, innerBoxIsScrolled) {
                return [
                  SliverOverlapAbsorber(
                    handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                        context),
                    sliver: SliverAppBar(
                      pinned: true,
                      floating: true,
                      automaticallyImplyLeading: false,
                      forceElevated: innerBoxIsScrolled,
                      bottom: TabBar(tabs: [
                        Tab(
                          icon: Icon(
                            Icons.home,
                            color: tabController.index == 0
                                ? Colors.red
                                : Colors.white,
                          ),
                        ),
                        Tab(
                          icon: Icon(
                            Icons.light,
                            color: tabController.index == 1
                                ? Colors.red
                                : Colors.white,
                          ),
                        ),
                      ]),
                    ),
                  )
                ];
              },
              body: TabBarView(
                controller: tabController,
                children: const [
                  Center(
                    child: Text('page 1'),
                  ),
                  Center(
                    child: Text('page 2'),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

A friend of mine helped me