gradient_tabs.dart

class FirstTimeView extends HookWidget {
  @override
  Widget build(BuildContext context) {
    TickerProvider tickerProvider = useSingleTickerProvider();

    return ViewModelBuilder<FirstTimeViewModel>.reactive(
      viewModelBuilder: () => FirstTimeViewModel(tickerProvider),
      builder: (context, model, child) {
        return Scaffold(
          appBar: AppBar(
            backgroundColor: model.appBarColor,
            bottom: TabBar(
              controller: model.tabController,
              tabs: const [
                Tab(icon: Icon(Icons.home)),
                Tab(icon: Icon(Icons.whatshot)),
                Tab(icon: Icon(Icons.person)),
                Tab(icon: Icon(Icons.menu)),
              ],
            ),
          ),
          body: TabBarView(
            controller: model.tabController,
            children: [
              Container(),
              Container(),
              Container(),
              Container(),
            ],
          ),
        );
      },
    );
  }
}

class FirstTimeViewModel extends BaseViewModel {
  
  final TickerProvider tickerProvider;
  late final TabController tabController;
  Color? appBarColor = Colors.blue;

  FirstTimeViewModel(this.tickerProvider) {
    tabController = TabController(length: 4, vsync: tickerProvider);
    
    LinearGradient appBarGradient = const LinearGradient(colors: [
        Colors.blue,
        Colors.red,
        Colors.green,
        Colors.grey,
      ]);

    // Listen for any scrolling between tabs
    tabController.animation?.addListener(() {
      debugPrint('Index is changing: ' + tabController.indexIsChanging.toString());
      debugPrint('Index: ' + tabController.index.toString());
      debugPrint('Offset: ' + tabController.offset.toString());

      appBarColor = appBarGradient.colorAtPosition(
                position: (tabController.index / (tabController.length-1)) + ((1 / (tabController.length - 1)) * tabController.offset),
      );

      notifyListeners();
    });

    // Listen for new index values
    tabController.addListener(() {
      debugPrint('Index is changing: ' + tabController.indexIsChanging.toString());
      debugPrint('Index: ' + tabController.index.toString());
      debugPrint('Offset: ' + tabController.offset.toString());
    });
  }
}