How to activate searchtabs at the click (or touch) with flutter?

Question

I am working on a web page search engine project similar to that of Google with flutter on vscode. For this, I downloaded a source code in order to use it in my project. After making several changes to this code, I realized while running the web version of this project downloaded on Chrome that no tab bar could be activated apart from the one enabled by default.I did some research on the Internet, but I came across more tutorials for TabBar and not SearchBar. I even enabled the other tabs by default in my code, but this meant that at runtime, all my tabs were enabled at the same time. I even enabled the other tabs by default in my code, but this meant that at runtime, all my tabs were enabled at the same time. Here is my code:

@override

  Widget build(BuildContext context) {

    return SizedBox(

      height: 55,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: const [
          SearchTab(
            isActive: true,
            text: 'All',
            icon: Icons.search,
          ),
          SizedBox(width: 20),
          SearchTab(
            text: 'Images',
            icon: Icons.image,
          ),
          SizedBox(width: 20),
          SearchTab(
            text: 'Videos',
            icon: Icons.article,
          ),
          SizedBox(width: 20),
          SearchTab(
            text: 'Whelpsgroups',
            icon: Icons.map,
          ),
        ],
      ),
    );
  }

this code indicates how a tab should normally react to the touch:

import 'package:flutter/material.dart';
import 'package:google_clone/colors.dart';

class SearchTab extends StatelessWidget {
  final bool? isActive;
  final String text;
  final IconData icon;
  const SearchTab({
    Key? key,
    required this.text,
    required this.icon,
    this.isActive = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Icon(
              icon,
              size: 18,
              color: isActive!? blueColor : Colors.grey,
            ),
            const SizedBox(width: 3),
            Text(
              text,
              style: TextStyle(
                fontSize: 15,
                color: isActive!? blueColor : Colors.grey,
              ),
            ),
          ],
        ),
        const SizedBox(height: 7),
        isActive!? Container(
          height: 3,
          width: 40,
          color: blueColor,
        ): Container(),
      ],
    );
  }
}

I'm waiting for your answers look forward to it, thank you!