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

Question

您好，我试图将自定义主题数据添加到 flutter 代码中，但它显示了此错误 我正在使用 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)
    ════════════════════════════════════════════════════════════════════════════════

主要帮助。 dart

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,
      ),
    );
  }
}

themedata

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,