Flutter 主题与设计系统：Material 3、ThemeExtension 与暗黑模式

class ThemeDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    return Scaffold(
      backgroundColor: theme.colorScheme.surface,
      body: Center(
        child: Text(
          'Hello',
          style: theme.textTheme.headlineMedium?.copyWith(
            color: theme.colorScheme.primary,
          ),
        ),
      ),
    );
  }
}

MaterialApp(
  title: 'My App',
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
  ),
  darkTheme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.indigo,
      brightness: Brightness.dark,
    ),
  ),
  themeMode: ThemeMode.system, // 跟随系统
  home: const HomePage(),
)

ThemeData(
  useMaterial3: true, // Flutter 3.16+ 默认开启，可省略
  colorScheme: ColorScheme.fromSeed(
    seedColor: Colors.teal,
    brightness: Brightness.light,
    dynamicSchemeVariant: DynamicSchemeVariant.fidelity, // M3 色调变体
  ),
)

// 用 ColorScheme 编写规范配色，而不是硬编码颜色
Container(
  color: Theme.of(context).colorScheme.surfaceContainerHighest,
  child: Icon(
    Icons.check_circle,
    color: Theme.of(context).colorScheme.primary,
  ),
)

import 'package:flutter/material.dart';

@immutable
class AppTokens extends ThemeExtension<AppTokens> {
  final Color brandGradientStart;
  final Color brandGradientEnd;
  final double cardRadius;
  final Color overlayColor;

  const AppTokens({
    required this.brandGradientStart,
    required this.brandGradientEnd,
    required this.cardRadius,
    required this.overlayColor,
  });

  @override
  AppTokens copyWith({
    Color? brandGradientStart,
    Color? brandGradientEnd,
    double? cardRadius,
    Color? overlayColor,
  }) {
    return AppTokens(
      brandGradientStart: brandGradientStart ?? this.brandGradientStart,
      brandGradientEnd: brandGradientEnd ?? this.brandGradientEnd,
      cardRadius: cardRadius ?? this.cardRadius,
      overlayColor: overlayColor ?? this.overlayColor,
    );
  }

  @override
  AppTokens lerp(ThemeExtension<AppTokens>? other, double t) {
    if (other is! AppTokens) return this;
    return AppTokens(
      brandGradientStart:
          Color.lerp(brandGradientStart, other.brandGradientStart, t)!,
      brandGradientEnd:
          Color.lerp(brandGradientEnd, other.brandGradientEnd, t)!,
      cardRadius: lerpDouble(cardRadius, other.cardRadius, t) ?? cardRadius,
      overlayColor: Color.lerp(overlayColor, other.overlayColor, t)!,
    );
  }
}

ThemeData(
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
  extensions: const <ThemeExtension<dynamic>>[
    AppTokens(
      brandGradientStart: Color(0xFF3949AB),
      brandGradientEnd: Color(0xFF8E24AA),
      cardRadius: 16,
      overlayColor: Color(0x14000000),
    ),
  ],
)

// 使用处
final tokens = Theme.of(context).extension<AppTokens>();
if (tokens != null) {
  return Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [tokens.brandGradientStart, tokens.brandGradientEnd],
      ),
      borderRadius: BorderRadius.circular(tokens.cardRadius),
    ),
  );
}

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
    extensions: const [AppTokens.light()],
  ),
  darkTheme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.indigo,
      brightness: Brightness.dark,
    ),
    extensions: const [AppTokens.dark()], // 暗色专属令牌
  ),
)

class ThemeController extends ChangeNotifier {
  ThemeMode _mode = ThemeMode.system;

  ThemeMode get mode => _mode;

  Future<void> setMode(ThemeMode mode) async {
    _mode = mode;
    notifyListeners();
    await _persist(mode); // 持久化
  }

  Future<void> _persist(ThemeMode mode) async {
    final prefs = await SharedPreferences.getInstance();
    await prefs.setString('themeMode', mode.name);
  }
}

// 在 MaterialApp 中监听
ListenableBuilder(
  listenable: themeController,
  builder: (context, _) => MaterialApp(
    themeMode: themeController.mode,
    theme: ThemeData(colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo)),
    darkTheme: ThemeData(
      colorScheme: ColorScheme.fromSeed(
        seedColor: Colors.indigo,
        brightness: Brightness.dark,
      ),
    ),
  ),
)

import 'package:shared_preferences/shared_preferences.dart';

Future<ThemeMode> loadThemeMode() async {
  final prefs = await SharedPreferences.getInstance();
  final name = prefs.getString('themeMode');
  return ThemeMode.values.firstWhere(
    (m) => m.name == name,
    orElse: () => ThemeMode.system,
  );
}

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final themeController = ThemeController();
  final saved = await loadThemeMode();
  themeController.setInitial(saved);
  runApp(MyApp(themeController: themeController));
}

import 'package:flutter/material.dart';
import 'package:dynamic_color/dynamic_color.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return DynamicColorBuilder(
      builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
        // lightDynamic/darkDynamic 为 null 时表示系统不支持动态取色
        final light = lightDynamic ??
            ColorScheme.fromSeed(seedColor: Colors.indigo);
        final dark = darkDynamic ??
            ColorScheme.fromSeed(
              seedColor: Colors.indigo,
              brightness: Brightness.dark,
            );
        return MaterialApp(
          theme: ThemeData(colorScheme: light),
          darkTheme: ThemeData(colorScheme: dark),
          themeMode: ThemeMode.system,
          home: const HomePage(),
        );
      },
    );
  }
}

ThemeData(
  colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
  appBarTheme: const AppBarTheme(
    centerTitle: true,
    elevation: 0,
    scrolledUnderElevation: 0.5,
  ),
  filledButtonTheme: FilledButtonThemeData(
    style: FilledButton.styleFrom(
      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 16),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
    ),
  ),
  inputDecorationTheme: const InputDecorationTheme(
    filled: true,
    border: OutlineInputBorder(),
    contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
  ),
)

// 用 TextTheme 统一文字层级
ThemeData(
  textTheme: const TextTheme(
    headlineMedium: TextStyle(fontSize: 28, fontWeight: FontWeight.w700),
    titleLarge: TextStyle(fontSize: 20, fontWeight: FontWeight.w600),
    bodyMedium: TextStyle(fontSize: 14, height: 1.5),
  ),
)

// 由 style-dictionary 生成的 tokens.dart（示意）
abstract class ColorTokens {
  static const Color brandPrimary = Color(0xFF3949AB);
  static const Color brandSecondary = Color(0xFF8E24AA);
  static const Color surfaceLight = Color(0xFFFFFFFF);
  static const Color surfaceDark = Color(0xFF121212);
}

abstract class SpaceTokens {
  static const double xs = 4;
  static const double sm = 8;
  static const double md = 16;
  static const double lg = 24;
  static const double xl = 32;
}

// 业务代码只引用语义令牌，不直接引用原始值
final bg = Theme.of(context).colorScheme.surface;       // color/surface
final text = Theme.of(context).colorScheme.onSurface;    // text/primary

import 'package:flutter_test/flutter_test.dart';

void main() {
  testWidgets('暗黑主题渲染正确', (tester) async {
    await tester.pumpWidget(
      MaterialApp(
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
        ),
        darkTheme: ThemeData(
          colorScheme: ColorScheme.fromSeed(
            seedColor: Colors.indigo,
            brightness: Brightness.dark,
          ),
        ),
        themeMode: ThemeMode.dark,
        home: const HomePage(),
      ),
    );
    await expectLater(
      find.byType(MaterialApp),
      matchesGoldenFile('goldens/home_dark.png'),
    );
  });
}

AnimatedTheme(
  data: Theme.of(context), // 主题变化时自动做颜色过渡动画
  duration: const Duration(milliseconds: 300),
  child: MaterialApp(...),
)