将主题数据添加到颤振项目时遇到问题

Question

您好，我试图将自定义主题数据添加到颤振代码中，但它显示此错误 我正在使用 flutter_screenutil: ^5.3.1 响应式 UI。请帮忙

    #39     CustomTheme.lightTheme
    package:hms/util/theme.dart:8
    #40     CustomTheme.lightTheme
    package:hms/util/theme.dart:8
    #41     CustomTheme.lightTheme
    package:hms/util/theme.dart:8
    #42     CustomTheme.lightTheme
    package:hms/util/theme.dart:8
    #43     CustomTheme.lightTheme
    package:hms/util/theme.dart:8
    2
    ...
    #30749  CustomTheme.lightTheme
    package:hms/util/theme.dart:8
    #30750  CustomTheme.lightTheme
    package:hms/util/theme.dart:8
    #30751  CustomTheme.lightTheme
    package:hms/util/theme.dart:8
    #30752  CustomTheme.lightTheme
    package:hms/util/theme.dart:8
    #30753  CustomTheme.lightTheme
    package:hms/util/theme.dart:8
    #30754  CustomTheme.lightTheme
    package:hms/util/theme.dart:8
    #30755  CustomTheme.lightTheme
    package:hms/util/theme.dart:8
    #30756  MyApp.build.<anonymous closure>
    package:hms/main.dart:45
    #30757  ScreenUtilInit.build.<anonymous closure>
    package:flutter_screenutil/screenutil_init.dart:36
    #30758  _LayoutBuilderElement._layout.layoutCallback
    package:flutter/…/widgets/layout_builder.dart:122
    #30759  BuildOwner.buildScope
    package:flutter/…/widgets/framework.dart:2600
    #30760  _LayoutBuilderElement._layout
    package:flutter/…/widgets/layout_builder.dart:156
    #30761  RenderObject.invokeLayoutCallback.<anonymous closure>
    package:flutter/…/rendering/object.dart:1997
    #30762  PipelineOwner._enableMutationsToDirtySubtrees
    package:flutter/…/rendering/object.dart:918
    #30763  RenderObject.invokeLayoutCallback
    package:flutter/…/rendering/object.dart:1997
    #30764  RenderConstrainedLayoutBuilder.rebuildIfNecessary
    package:flutter/…/widgets/layout_builder.dart:230
    #30765  _RenderLayoutBuilder.performLayout
    package:flutter/…/widgets/layout_builder.dart:319
    #30766  RenderObject.layout
    package:flutter/…/rendering/object.dart:1887
    #30767  RenderView.performLayout
    package:flutter/…/rendering/view.dart:165
    #30768  RenderObject._layoutWithoutResize
    package:flutter/…/rendering/object.dart:1731
    #30769  PipelineOwner.flushLayout
    package:flutter/…/rendering/object.dart:887
    #30770  RendererBinding.drawFrame
    package:flutter/…/rendering/binding.dart:497
    #30771  WidgetsBinding.drawFrame
    package:flutter/…/widgets/binding.dart:883
    #30772  RendererBinding._handlePersistentFrameCallback
    package:flutter/…/rendering/binding.dart:363
    #30773  SchedulerBinding._invokeFrameCallback
    package:flutter/…/scheduler/binding.dart:1144
    #30774  SchedulerBinding.handleDrawFrame
    package:flutter/…/scheduler/binding.dart:1081
    #30775  SchedulerBinding.scheduleWarmUpFrame.<anonymous closure>
    package:flutter/…/scheduler/binding.dart:862
    (elided 11 frames from class _RawReceivePortImpl, class _Timer, dart:async, and dart:async-patch)
    ════════════════════════════════════════════════════════════════════════════════

主要。飞镖

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

  @override
  Widget build(BuildContext context) {
    return ScreenUtilInit(
      designSize: const Size(360, 690),
      minTextAdapt: true,
      splitScreenMode: true,
      builder: () => MaterialApp(
        builder: (context, widget) {
          ScreenUtil.setContext(context);
          return MediaQuery(
            data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
            child: widget!,
          );
        },
        debugShowCheckedModeBanner: false,
        navigatorKey: NavigationService.navigationKey,
        theme: CustomTheme.lightTheme,
        onGenerateRoute: route.generateRoute,
      ),
    );
  }
}

主题数据

class CustomTheme {
  static ThemeData get lightTheme {
    return ThemeData(
      primarySwatch: createMaterialColor(const Color(0xff4671c6)),
      colorScheme: lightTheme.colorScheme.copyWith(
        primary: createMaterialColor(const Color(0xff4671c6)),
        secondary: createMaterialColor(const Color(0xff2E8B57)),
      ),
      brightness: Brightness.light,
    );
  }

  static ThemeData get darkTheme {
    return ThemeData(
      brightness: Brightness.dark,
    );
  }
}

createMaterialColor 是一个自定义类用户，可以将任何颜色转换为材质颜色。 对于导航，我使用no_context_navigation。

没有主题，应用程序运行良好，没有包，应用程序运行良好，但是当我同时使用包和主题数据时，它会显示此错误。

Answer 1

如果您想创建自定义主题，请尝试以下方式：

首先创建你的主题

// Your class with all custom themes
class YourCustomThemeName {
// Your theme name with some examples
  static final exampleTheme = ThemeData(
    // Your primary color
    primaryColor: TNETColors.azulEscuro,

    // Scrolling color
    colorScheme: ColorScheme.fromSwatch().copyWith(
      secondary: TNETColors.cinzaClaro,
    ),

    /// Scaffold color
    scaffoldBackgroundColor: const Color(0xff2E8B57),

    /// Dialog background color
    dialogBackgroundColor: const Color(0xff2E8B57),

    /// Appbar color
    appBarTheme: const AppBarTheme(color: Color(0xff2E8B57)),
  );
}

然后像这样在你的 MyApp 类中使用你的主题

theme: YourCustomThemeName.exampleTheme,

Answer 2

在非常努力地理解 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 文件中添加。