`vsync` property in TabController constructor in Tabbar

In Flutter, a TabBar is a widget that is used to create a horizontal row of tabs. It is often used in combination with a TabBarView widget, which allows you to display different content for each tab.

The TabBar widget can be customized in a number of ways, including:

Setting the tabs property to a list of Tab widgets to define the tabs that should be displayed.

Setting the controller property to a TabController object, which can be used to programmatically change the selected tab.

Setting the isScrollable property to true to allow the tabs to be scrolled horizontally if there are too many tabs to fit on the screen.

Setting the indicatorColor property to define the color of the indicator that appears beneath the selected tab.

Setting the labelColor and unselectedLabelColor properties to define the text color of the selected and unselected tabs, respectively.

Here's an example of how you can create a Custom  TabBar with three tabs:

class CourseDetails extends StatefulWidget {
  CourseDetails({super.key});

  @override
  State<CourseDetails> createState() => _CourseDetailsState();
}

class _CourseDetailsState extends State<CourseDetails>
    with SingleTickerProviderStateMixin {
  late VideoPlayerController _controller;
  late Future<void> _initializeVideoPlayerFuture;

  static const List<Tab> myTabs = <Tab>[
    Tab(text: 'Overview'),
    Tab(text: 'Lessons'),
    Tab(text: 'Reviews'),
  ];

  late TabController tabController;
  @override
  void initState() {
    tabController = TabController(vsync: this, length: myTabs.length);
    super.initState();
    _controller = VideoPlayerController.network(
      'https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4',
    );

    _initializeVideoPlayerFuture = _controller.initialize();
  }

  @override
  void dispose() {
    _controller.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: primary,
        title: const Text('Butterfly Video'),
      ),
      body: Stack(
        children: [
          Positioned(
            left: 0,
            right: 0,
            top: 0,
            child: FutureBuilder(
              future: _initializeVideoPlayerFuture,
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.done) {
                  
                  return AspectRatio(
                    aspectRatio: _controller.value.aspectRatio,
                    child: VideoPlayer(_controller),
                  );
                } else {
                  return const Center(
                    child: CircularProgressIndicator(),
                  );
                }
              },
            ),
          ),
          Positioned(
              top: 300,
              left: 0,
              right: 0,
              bottom: 0,
              child: SingleChildScrollView(
                child: Column(
                children: [
                  TabBar(
                    controller: tabController,
                    unselectedLabelColor: selectedColor,
                    labelColor: borderColor,
                    tabs: myTabs,
                   
                  ),
                  SizedBox(
                    height: Get.height,
                    width: double.maxFinite,
                    child: TabBarView(
                      controller: tabController,
                      children: const[
                        OverviewView(),
                        LessonsView(),
                        ReviewsView(),
                      ],
                    ),
                  )
                ],)
              )),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
        
          setState(() {
            if (_controller.value.isPlaying) {
              _controller.pause();
            } else {
              // If the video is paused, play it.
              _controller.play();
            }
          });
        },
        // Display the correct icon depending on the state of the player.
        child: Icon(
          _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
        ),
      ),
    );
  }
}