list_changing_tabBar.dart

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  List<String> elements = ["Notes", "Important", "Performed", "Archived"];
  int currentIndex = 0;
  
   TabController tabController;
  
  Widget listElement(String element) {
  return  GestureDetector(
    onTap: () => handleListItemClicks(element),
      child: Container(
        margin: EdgeInsets.all(10),
        height: 120,
        width: 100,
        color: elements[currentIndex] == element ? Colors.pinkAccent : Colors.blueAccent,
        child: Center(child: Text(element))),
    );
     
  }
  
  @override
  void initState() {
    super.initState();
    tabController = TabController(length: elements.length, vsync: this);
    handleTabChange();
  }
  
  void handleListItemClicks(String element) {
    tabController.animateTo(elements.indexOf(element));
  }
  
  void handleTabChange() {
    tabController.addListener(() {
      setState(() {
        currentIndex = tabController.index;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
              height: 200,
              child: ListView.builder(
                itemCount: elements.length,
                scrollDirection: Axis.horizontal,
                itemBuilder: (BuildContext context, int index) {
                  String element = elements.elementAt(index);
                  return listElement(element);
                },
              )),
          Container(
          height: 80,
            child:TabBar(
              controller: tabController,
              
            tabs: <Widget>[
              ...elements
                  .map((element) => Tab(
                        key: Key(element),
                         child: Text(element, style: TextStyle(
                           color: elements[currentIndex] == element ? Colors.pinkAccent : Colors.blueAccent,
                         )),
                      ))
                  .toList()
            ],
          )
          ),
          Expanded(
             child: Container(
               color: darkBlue,
               child: TabBarView(
                 controller: tabController,
                 children: <Widget>[
                   ...elements
                  .map((element) => Center(
                         child: Text(element, style: TextStyle(
                           color: Colors.white
                         )),
                      ))
                  .toList()
                 ],
               ),
             ),
          ) 
        ],
      ),
    );
  }
}