spotube/lib/components/shared/themed_button_tab_bar.dart

import 'package:buttons_tabbar/buttons_tabbar.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:spotube/hooks/use_breakpoint_value.dart';
import 'package:spotube/hooks/use_brightness_value.dart';
import 'package:spotube/utils/platform.dart';

class ThemedButtonsTabBar extends HookWidget implements PreferredSizeWidget {
  final List<String> tabs;
  const ThemedButtonsTabBar({Key? key, required this.tabs}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final bgColor = useBrightnessValue(
      Theme.of(context).colorScheme.primaryContainer,
      Color.lerp(Theme.of(context).colorScheme.primary, Colors.black, 0.7)!,
    );

    final breakpoint = useBreakpointValue(
      sm: 85.0,
      md: 35.0,
      others: 0.0,
    );

    return Padding(
      padding: EdgeInsets.only(
        left: kIsMacOS ? breakpoint : 0,
        top: 8,
        bottom: 8,
      ),
      child: ButtonsTabBar(
        radius: 100,
        decoration: BoxDecoration(
          color: bgColor,
          borderRadius: BorderRadius.circular(15),
        ),
        labelStyle: Theme.of(context).textTheme.labelLarge?.copyWith(
              color: Theme.of(context).colorScheme.primary,
              fontWeight: FontWeight.bold,
            ),
        borderWidth: 0,
        unselectedDecoration: BoxDecoration(
          color: Theme.of(context).colorScheme.background,
          borderRadius: BorderRadius.circular(15),
        ),
        unselectedLabelStyle: Theme.of(context).textTheme.labelLarge?.copyWith(
              color: Theme.of(context).colorScheme.primary,
            ),
        tabs: tabs.map((tab) {
          return Tab(text: "   $tab   ");
        }).toList(),
      ),
    );
  }

  @override
  Size get preferredSize => const Size.fromHeight(50);
}