Flutter样式与主题 #

ThemeData({
  bool? applyElevationOverlayColor,
  NoDefaultCupertinoThemeData? cupertinoOverrideTheme,
  Iterable<ThemeExtension>? extensions,
  InputDecorationTheme? inputDecorationTheme,
  MaterialTapTargetSize? materialTapTargetSize,
  PageTransitionsTheme? pageTransitionsTheme,
  TargetPlatform? platform,
  ScrollBehavior? scrollBehavior,
  TapDownDetails? tapDownDetails,
  ColorScheme? colorScheme,
  Brightness? brightness,
  Color? primaryColor,
  Color? primaryColorLight,
  Color? primaryColorDark,
  Color? canvasColor,
  Color? cardColor,
  Color? dividerColor,
  Color? highlightColor,
  Color? splashColor,
  InteractiveInkFeatureFactory? splashFactory,
  Color? hoverColor,
  Color? focusColor,
  Color? scaffoldBackgroundColor,
  Color? bottomAppBarColor,
  Color? dialogBackgroundColor,
  Color? indicatorColor,
  Color? hintColor,
  Color? errorColor,
  Color? toggleableActiveColor,
  TextTheme? textTheme,
  TextTheme? primaryTextTheme,
  IconThemeData? iconTheme,
  IconThemeData? primaryIconTheme,
  AppBarTheme? appBarTheme,
  ButtonThemeData? buttonTheme,
  CardTheme? cardTheme,
  ChipThemeData? chipTheme,
  ElevatedButtonThemeData? elevatedButtonTheme,
  FilledButtonThemeData? filledButtonTheme,
  OutlinedButtonThemeData? outlinedButtonTheme,
  TextButtonThemeData? textButtonTheme,
  FloatingActionButtonThemeData? floatingActionButtonTheme,
  IconButtonThemeData? iconButtonTheme,
  DialogTheme? dialogTheme,
  DividerThemeData? dividerTheme,
  ListTileThemeData? listTileTheme,
  NavigationBarThemeData? navigationBarTheme,
  NavigationRailThemeData? navigationRailTheme,
  TabBarTheme? tabBarTheme,
  DrawerThemeData? drawerTheme,
  SnackBarThemeData? snackBarTheme,
  BottomSheetThemeData? bottomSheetTheme,
  CheckboxThemeData? checkboxTheme,
  RadioThemeData? radioTheme,
  SwitchThemeData? switchTheme,
  ProgressIndicatorThemeData? progressIndicatorTheme,
  SliderThemeData? sliderTheme,
  TimePickerThemeData? timePickerTheme,
  DatePickerThemeData? datePickerTheme,
  DataTableThemeData? dataTableTheme,
  PopupMenuThemeData? popupMenuTheme,
  TooltipThemeData? tooltipTheme,
  BottomNavigationBarThemeData? bottomNavigationBarTheme,
  BottomAppBarTheme? bottomAppBarTheme,
  MenuBarThemeData? menuBarTheme,
  MenuStyle? menuButtonTheme,
  DropdownMenuThemeData? dropdownMenuTheme,
  SearchBarThemeData? searchBarTheme,
  SearchViewThemeData? searchViewTheme,
})

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
    useMaterial3: true,
    brightness: Brightness.light,
    primaryColor: Colors.blue,
    scaffoldBackgroundColor: Colors.white,
    appBarTheme: AppBarTheme(
      centerTitle: true,
      elevation: 0,
      backgroundColor: Colors.blue,
      foregroundColor: Colors.white,
    ),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
      ),
    ),
    cardTheme: CardTheme(
      elevation: 4,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
    ),
    inputDecorationTheme: InputDecorationTheme(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(8),
      ),
      filled: true,
      fillColor: Colors.grey.shade100,
    ),
  ),
)

ColorScheme.fromSeed({
  required Color seedColor,
  Brightness brightness = Brightness.light,
  Color? primary,
  Color? onPrimary,
  Color? primaryContainer,
  Color? onPrimaryContainer,
  Color? secondary,
  Color? onSecondary,
  Color? secondaryContainer,
  Color? onSecondaryContainer,
  Color? tertiary,
  Color? onTertiary,
  Color? tertiaryContainer,
  Color? onTertiaryContainer,
  Color? error,
  Color? onError,
  Color? errorContainer,
  Color? onErrorContainer,
  Color? surface,
  Color? onSurface,
  Color? surfaceContainerHighest,
  Color? onSurfaceVariant,
  Color? outline,
  Color? outlineVariant,
  Color? shadow,
  Color? scrim,
  Color? inverseSurface,
  Color? onInverseSurface,
  Color? inversePrimary,
  Color? surfaceTint,
})

ColorScheme.fromSeed(seedColor: Colors.blue)
ColorScheme.fromSeed(seedColor: Colors.blue, brightness: Brightness.dark)

ThemeData(
  colorScheme: ColorScheme(
    brightness: Brightness.light,
    primary: Colors.blue,
    onPrimary: Colors.white,
    primaryContainer: Colors.blue.shade100,
    onPrimaryContainer: Colors.blue.shade900,
    secondary: Colors.teal,
    onSecondary: Colors.white,
    secondaryContainer: Colors.teal.shade100,
    onSecondaryContainer: Colors.teal.shade900,
    tertiary: Colors.orange,
    onTertiary: Colors.white,
    error: Colors.red,
    onError: Colors.white,
    surface: Colors.white,
    onSurface: Colors.black,
  ),
)

Container(
  color: Theme.of(context).colorScheme.primary,
)

Container(
  color: Theme.of(context).colorScheme.secondary,
)

Container(
  color: Theme.of(context).colorScheme.error,
)

ThemeData(
  textTheme: TextTheme(
    displayLarge: TextStyle(fontSize: 57, fontWeight: FontWeight.w400),
    displayMedium: TextStyle(fontSize: 45, fontWeight: FontWeight.w400),
    displaySmall: TextStyle(fontSize: 36, fontWeight: FontWeight.w400),
    headlineLarge: TextStyle(fontSize: 32, fontWeight: FontWeight.w400),
    headlineMedium: TextStyle(fontSize: 28, fontWeight: FontWeight.w400),
    headlineSmall: TextStyle(fontSize: 24, fontWeight: FontWeight.w400),
    titleLarge: TextStyle(fontSize: 22, fontWeight: FontWeight.w400),
    titleMedium: TextStyle(fontSize: 16, fontWeight: FontWeight.w500),
    titleSmall: TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
    bodyLarge: TextStyle(fontSize: 16, fontWeight: FontWeight.w400),
    bodyMedium: TextStyle(fontSize: 14, fontWeight: FontWeight.w400),
    bodySmall: TextStyle(fontSize: 12, fontWeight: FontWeight.w400),
    labelLarge: TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
    labelMedium: TextStyle(fontSize: 12, fontWeight: FontWeight.w500),
    labelSmall: TextStyle(fontSize: 11, fontWeight: FontWeight.w500),
  ),
)

Text(
  'Title',
  style: Theme.of(context).textTheme.titleLarge,
)

Text(
  'Body text',
  style: Theme.of(context).textTheme.bodyMedium,
)

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.blue,
      brightness: Brightness.light,
    ),
    useMaterial3: true,
  ),
  darkTheme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.blue,
      brightness: Brightness.dark,
    ),
    useMaterial3: true,
  ),
  themeMode: ThemeMode.system,
)

ThemeMode.system
ThemeMode.light
ThemeMode.dark

class ThemeProvider extends ChangeNotifier {
  ThemeMode _themeMode = ThemeMode.system;
  
  ThemeMode get themeMode => _themeMode;
  
  void setThemeMode(ThemeMode mode) {
    _themeMode = mode;
    notifyListeners();
  }
  
  void toggleTheme() {
    _themeMode = _themeMode == ThemeMode.light 
        ? ThemeMode.dark 
        : ThemeMode.light;
    notifyListeners();
  }
}

MaterialApp(
  themeMode: context.watch<ThemeProvider>().themeMode,
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
)

Theme(
  data: Theme.of(context).copyWith(
    primaryColor: Colors.red,
  ),
  child: Builder(
    builder: (context) {
      return Container(
        color: Theme.of(context).primaryColor,
      );
    },
  ),
)

final theme = Theme.of(context);
final colorScheme = Theme.of(context).colorScheme;
final textTheme = Theme.of(context).textTheme;

class MyColors extends ThemeExtension<MyColors> {
  final Color? brand;
  final Color? accent;
  
  MyColors({
    required this.brand,
    required this.accent,
  });
  
  @override
  MyColors copyWith({
    Color? brand,
    Color? accent,
  }) {
    return MyColors(
      brand: brand ?? this.brand,
      accent: accent ?? this.accent,
    );
  }
  
  @override
  MyColors lerp(MyColors? other, double t) {
    if (other is! MyColors) {
      return this;
    }
    return MyColors(
      brand: Color.lerp(brand, other.brand, t),
      accent: Color.lerp(accent, other.accent, t),
    );
  }
}

ThemeData(
  extensions: [
    MyColors(
      brand: Colors.purple,
      accent: Colors.orange,
    ),
  ],
)

final myColors = Theme.of(context).extension<MyColors>()!;