cloud_car_internal/lib/constants/app_theme.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class AppTheme {
  static ThemeData get defaultTheme {
    return ThemeData(primarySwatch: Colors.blue).copyWith(
      primaryColor: const Color(0xFF027AFF),
      extensions: <ThemeExtension<dynamic>>[MyAppStyle.def()],
      textTheme: ThemeData.light().textTheme.copyWith(
            headline3: TextStyle(
              fontSize: 40.sp,
              color: const Color(0xFF333333),
              fontWeight: FontWeight.bold,
            ),
            headline4: TextStyle(
              fontSize: 36.sp,
              color: const Color(0xFF111111),
              fontWeight: FontWeight.bold,
            ),
            subtitle1: TextStyle(
              fontSize: 32.sp,
              color: const Color(0xFF333333),
            ),
            subtitle2: TextStyle(
              fontSize: 28.sp,
              color: const Color(0xFF333333),
            ),
            bodyText1: TextStyle(
              fontSize: 24.sp,
              color: const Color(0xFF333333),
            ),
            bodyText2: TextStyle(
              fontSize: 28.sp,
              color: const Color(0xFF333333),
            ),
          ),
      floatingActionButtonTheme: const FloatingActionButtonThemeData().copyWith(
        backgroundColor: Colors.blue,
      ),
      appBarTheme: AppBarTheme(
        elevation: 0,
        centerTitle: true,
        iconTheme: const IconThemeData(
          color: Color(0xFF333333),
        ),
        systemOverlayStyle: SystemUiOverlayStyle.dark,
        toolbarTextStyle: TextTheme(
          headline6: TextStyle(
            color: const Color(0xFF333333),
            fontSize: 36.sp,
            fontWeight: FontWeight.bold,
          ),
        ).bodyText2,
        titleTextStyle: TextTheme(
          headline6: TextStyle(
            color: const Color(0xFF333333),
            fontSize: 36.sp,
            fontWeight: FontWeight.bold,
          ),
        ).headline6,
      ),
      tabBarTheme: TabBarTheme(
        labelColor: const Color(0xFF333333),
        labelStyle: TextStyle(
          fontSize: 28.sp,
          fontWeight: FontWeight.w600,
        ),
        unselectedLabelStyle: TextStyle(
          fontSize: 28.sp,
        ),
        indicatorSize: TabBarIndicatorSize.label,
      ),
      bottomNavigationBarTheme: const BottomNavigationBarThemeData(
        selectedItemColor: Color(0xFF333333),
        selectedLabelStyle: TextStyle(
          fontWeight: FontWeight.bold,
        ),
        type: BottomNavigationBarType.fixed,
        unselectedLabelStyle: TextStyle(),
      ),
      radioTheme: RadioThemeData(
        fillColor: MaterialStateProperty.resolveWith<Color?>((states) {
          if (states.contains(MaterialState.selected)) {
            return const Color(0xFFFFD000);
          }
          return null;
        }),
      ),
      elevatedButtonTheme: ElevatedButtonThemeData(
        style: ButtonStyle(
          backgroundColor: MaterialStateProperty.resolveWith((states) {
            if (states.contains(MaterialState.disabled)) {
              return const Color(0xFFFFF4D7);
            }
            return const Color(0xFFFFD000);
          }),
          elevation: MaterialStateProperty.all(0),
          foregroundColor: MaterialStateProperty.resolveWith((states) {
            if (states.contains(MaterialState.disabled)) {
              return const Color(0xFF666666);
            }
            return const Color(0xFF333333);
          }),
          textStyle: MaterialStateProperty.all(TextStyle(
            fontSize: 32.sp,
            fontWeight: FontWeight.bold,
          )),
          padding: MaterialStateProperty.all(
            EdgeInsets.symmetric(horizontal: 76.w, vertical: 22.w),
          ),
          enableFeedback: true,
        ),
      ),
      textButtonTheme: TextButtonThemeData(
        style: ButtonStyle(
          overlayColor: MaterialStateProperty.resolveWith((states) {
            if (states.contains(MaterialState.disabled)) {
              return const Color(0xFFFFF4D7);
            }
            return const Color(0xFFFFD000).withOpacity(0.2);
          }),
          foregroundColor: MaterialStateProperty.resolveWith((states) {
            if (states.contains(MaterialState.disabled)) {
              return const Color(0xFF666666);
            }
            return const Color(0xFF333333);
          }),
        ),
      ),
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      dividerColor: const Color(0xFFE8E8E8),
      colorScheme: ColorScheme.fromSwatch()
          .copyWith(secondary: const Color(0xFF027AFF))
          .copyWith(secondary: const Color(0xFF027AFF)),
    );
  }
}

class SystemStyle {
  static const initial = SystemUiOverlayStyle(
    statusBarIconBrightness: Brightness.light,
    systemNavigationBarColor: Colors.white,
  );

  static const yellowBottomBar = SystemUiOverlayStyle(
    statusBarIconBrightness: Brightness.light,
    systemNavigationBarColor: Color(0xFFFFD000),
  );

  static genStyle({required Color bottom}) {
    return SystemUiOverlayStyle(
      statusBarIconBrightness: Brightness.light,
      systemNavigationBarColor: bottom,
    );
  }
}

@immutable
class MyAppStyle extends ThemeExtension<MyAppStyle> {
  final Color? mainColor;

  ///底部按钮风格
  final BoxDecoration? bottomButtonDecoration;
  final TextStyle? bottomButtonText;

  ///输入框提示文字
  final TextStyle? hintText;

  ///浅黑色 (用于没有焦点的文字或者线条等
  final Color? lightDark;

  ///标题文字
  final TextStyle? titleText;

  @override
  MyAppStyle copyWith({
    Color? mainColor,
    TextStyle? bottomButtonText,
    BoxDecoration? bottomButtonDecoration,
    TextStyle? hintText,
    Color? lightDark,
    TextStyle? titleText,
  }) {
    return MyAppStyle(
      mainColor: mainColor ?? this.mainColor,
      bottomButtonDecoration:
          bottomButtonDecoration ?? this.bottomButtonDecoration,
      bottomButtonText: bottomButtonText ?? this.bottomButtonText,
      hintText: hintText ?? this.hintText,
      lightDark: lightDark ?? this.lightDark,
      titleText: titleText ?? this.titleText,
    );
  }

  @override
  ThemeExtension<MyAppStyle> lerp(ThemeExtension<MyAppStyle>? other, double t) {
    if (other is! MyAppStyle) {
      return this;
    }
    return MyAppStyle(
      mainColor: Color.lerp(mainColor, other.mainColor, t),
      bottomButtonDecoration: BoxDecoration.lerp(
          bottomButtonDecoration, other.bottomButtonDecoration, t),
      bottomButtonText:
          TextStyle.lerp(bottomButtonText, other.bottomButtonText, t),
      hintText: TextStyle.lerp(hintText, other.hintText, t),
      lightDark: Color.lerp(lightDark, other.lightDark, t),
      titleText: TextStyle.lerp(titleText, other.titleText, t),
    );
  }

  const MyAppStyle({
    this.bottomButtonText,
    this.mainColor,
    this.bottomButtonDecoration,
    this.hintText,
    this.lightDark,
    this.titleText,
  });

  MyAppStyle.def()
      : mainColor = Colors.blue,
        bottomButtonDecoration = BoxDecoration(
            gradient: const LinearGradient(
                begin: Alignment.centerLeft,
                end: Alignment.centerRight,
                colors: [Color(0xFF0593FF), Color(0xFF027AFF)]),
            borderRadius: BorderRadius.circular(4.w)),
        bottomButtonText = TextStyle(
          fontSize: 14.sp,
          color: const Color(0xFFFFFFFF),
        ),
        hintText = TextStyle(fontSize: 18.sp, color: const Color(0xFFCCCCCC)),
        lightDark = const Color(0xFFCCCCCC),
        titleText = TextStyle(
            fontSize: 16.sp,
            fontWeight: FontWeight.bold,
            color: const Color(0xFF111111));
}