飘动不同的颜色主题

Question

我正在创建一个具有不同颜色主题的颤振应用程序。 比如基于深色的示例主题，基于浅色的主题，基于蓝色的主题等。是否有任何包装或任何方法可以做到这一点。 谢谢！

Answer 1

在非常努力地理解了 Material Design 之后，我发现了以下简单明了的解决方案。

color_scheme.dart

import 'package:flutter/material.dart';

const lightColorScheme = ColorScheme(
  brightness: Brightness.light,
  primary: Color(0xFF687DAF),
  onPrimary: Color(0xFFFFFFFF),
  secondary: Color(0xFFf37b67),
  onSecondary: Color(0xFFFFFFFF),
  error: Color(0xFFBA1A1A),
  onError: Color(0xFFFFFFFF),
  background: Color(0xFFFEFFFF),
  onBackground: Color(0xFF3b3b3b),
  surface: Color(0xFFFEFFFF),
  onSurface: Color(0xFF3b3b3b),
);

const darkColorScheme = ColorScheme(
  brightness: Brightness.dark,
  primary: Color(0xFFADC6FF),
  onPrimary: Color(0xFF002E69),
  secondary: Color(0xFFBBC6E4),
  onSecondary: Color(0xFF253048),
  error: Color(0xFFFFB4AB),
  onError: Color(0xFF690005),
  background: Color(0xFF1B1B1F),
  onBackground: Color(0xFFE3E2E6),
  surface: Color(0xFF1B1B1F),
  onSurface: Color(0xFFE3E2E6),
);

theme.dart

import 'package:first_project/shared/color_schemes.dart';

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

final ThemeData lightThemeDataCustom = _buildLightTheme();

ThemeData _buildLightTheme() {
  final ThemeData base = ThemeData.light();
  return base.copyWith(
    colorScheme: lightColorScheme,
    primaryColor: lightColorScheme.primary,
    scaffoldBackgroundColor: lightColorScheme.background,
    textTheme: GoogleFonts.montserratTextTheme(ThemeData.light().textTheme),
  );
}

final ThemeData darkThemeDataCustom = _buildDarkTheme();

ThemeData _buildDarkTheme() {
  final ThemeData base = ThemeData.dark();
  return base.copyWith(
    colorScheme: darkColorScheme,
    primaryColor: darkColorScheme.primary,
    scaffoldBackgroundColor: darkColorScheme.background,
    textTheme: GoogleFonts.montserratTextTheme(ThemeData.dark().textTheme),
  );
}

ma​​in.dart

import 'package:first_project/shared/theme_two.dart';
import 'package:flutter/services.dart';

import '../screens/bottom_bar.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark));

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: lightThemeDataCustom,
      darkTheme: darkThemeDataCustom,
      home: const BottomBar(),
    );
  }
}

如果您采用这种方法，则无需在每个小部件中定义颜色。只需更改配色方案，Flutter 会根据 Light 主题和 Dark 主题自动改变颜色。

我不添加 textTheme 自定义代码，但您可以在 theme.dart 文件中添加。