Dropsource / monarch

Monarch is a tool for building Flutter widgets in isolation. It makes it easy to build, test and debug complex UIs.
https://monarchapp.io
MIT License
438 stars 23 forks source link

conflicts with flutter_screenutil package #138

Closed chanjungkim closed 6 months ago

chanjungkim commented 8 months ago

I am using flutter_screenutil: ^5.9.0 package.

When I select some widgets, I get this error on the preview device.

Screenshot 2024-01-10 at 3 52 59 PM

LateInitializationError: Field '_minTextAdapt@1810084504' has not been initialized.
When the exception was thrown, this was the stack:
#0      ScreenUtil._minTextAdapt (package:flutter_screenutil/src/screen_util.dart)
#1      ScreenUtil.scaleText (package:flutter_screenutil/src/screen_util.dart:208:7)
#2      ScreenUtil.setSp (package:flutter_screenutil/src/screen_util.dart:242:65)
#3      SizeExtension.sp (package:flutter_screenutil/src/size_extension.dart:24:33)
#4      IAmText.titleMedium (package:iam_flutter/design/style/text_style.dart:157:22)
#5      CommonAppBar.build (package:iam_flutter/design/widget/common_app_bar.dart:18:35)
#6      StatelessElement.build (package:flutter/src/widgets/framework.dart:5550:49)
#7      ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:5480:15)
#8      Element.rebuild (package:flutter/src/widgets/framework.dart:5196:7)
#9      ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:5462:5)
#10     ComponentElement.mount (package:flutter/src/widgets/framework.dart:5456:5)
...     Normal element mounting (76 frames)
#86     Element.inflateWidget (package:flutter/src/widgets/framework.dart:4335:16)
#87     MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/framework.dart:6893:36)
#88     MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6905:32)
...     Normal element mounting (105 frames)
#193    Element.inflateWidget (package:flutter/src/widgets/framework.dart:4335:16)
#194    Element.updateChild (package:flutter/src/widgets/framework.dart:3840:20)
#195    ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:5505:16)
#196    StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:5643:11)
#197    Element.rebuild (package:flutter/src/widgets/framework.dart:5196:7)
#198    BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2904:19)
#199    WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:989:21)
#200    RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:448:5)
#201    SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1386:15)
#202    SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1311:9)
#203    SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:1169:5)
#207    _invoke (dart:ui/hooks.dart:314:10)
#208    PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:382:5)
#209    _drawFrame (dart:ui/hooks.dart:283:31)
(elided 3 frames from dart:async)

How can I solve it?

fertrig commented 8 months ago

I looked into the flutter_screenutil package.

To use that package you need to initialize it using the ScreenUtilInit widget. Also, each Monarch story is isolated. Therefore, each story should call ScreenUtilInit.

Something like this:

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'sample_button.dart';

// Use ScreenUtilInit
Widget primary() =>
    const ScreenUtilInit(child: Button('Button', ButtonStyles.primary));

// You could use a helper function too
ScreenUtilInit _helper({required Widget child}) => ScreenUtilInit(
    designSize: const Size(360, 690),
    minTextAdapt: true,
    splitScreenMode: true,
    child: child);

Widget secondary() =>
    _helper(child: const Button('Button', ButtonStyles.secondary));

Widget disabled() =>
    _helper(child: const Button('Button', ButtonStyles.disabled));

I hope this helps.