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
437 stars 22 forks source link

HookConsumerWidget using flutter_hooks's useContext cannot be rendered. #40

Closed TadayoshiOtsuka closed 2 years ago

TadayoshiOtsuka commented 2 years ago

Hi. Thank you for published awesome package.

I have had trouble using it. HookConsumerWidgetthat uses flutter_hooks's useContext does not seem to work when I try to display it on monarch GUI. I can't seem to get the BuildContext is there a way around this?

The versions of each are as follows.

os: macOS Big Sur 11.4
flutter 2.8.1-stable  
monarch: 2.2.0  
flutter_hooks: 0.18.2  
hooks_riverpod: 1.0.3  
test_widget.dart ``` dart class TestWidget extends HookConsumerWidget { const TestWidget({ Key? key, }) : super(key: key); @override Widget build(BuildContext context, WidgetRef ref) { final l10n = useL10n(); return Scaffold( appBar: AppBar( title: Text( l10n.appbarTitle, ), ), body: Container(), ); } } ```
use_l10n.dart ```dart import 'package:flutter_gen/gen_l10n/l10n.dart'; import 'package:flutter_hooks/flutter_hooks.dart'; L10n useL10n() { final context = useContext(); return L10n.of(context)!; } ```
test_stories.dart ```dart Widget testWidget() => TestWidget(); ```
StackTrace ``` ══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════ The following _CastError was thrown building TestWidget(dirty, dependencies: [_LocalizationsScope-[GlobalKey#45ddd]], state: _ConsumerState#1fe93): Null check operator used on a null value The relevant error-causing widget was: TestWidget TestWidget:file:///Users/myname/flutter/monarch_test/stories/test_stories.dart:5:30 The relevant story is: stories/test_stories.dart > testWidget When the exception was thrown, this was the stack: #0 useL10n (package:monarch_test/hooks/use_l10n.dart:6:26) #1 TestWidget.build (package:monarch_test/widgets/organisms/test_widget.dart:12:18) #2 _ConsumerState.build (package:flutter_riverpod/src/consumer.dart:371:19) #3 StatefulElement.build (package:flutter/src/widgets/framework.dart:4705:27) #4 ConsumerStatefulElement.build (package:flutter_riverpod/src/consumer.dart:431:20) #5 HookElement.build (package:flutter_hooks/src/framework.dart:416:27) #6 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4588:15) #7 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:4763:11) #8 Element.rebuild (package:flutter/src/widgets/framework.dart:4311:5) #9 ComponentElement._firstBuild (package:flutter/src/widgets/framework.dart:4566:5) #10 StatefulElement._firstBuild (package:flutter/src/widgets/framework.dart:4754:11) #11 ComponentElement.mount (package:flutter/src/widgets/framework.dart:4561:5) ... Normal element mounting (64 frames) #75 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3631:14) #76 MultiChildRenderObjectElement.inflateWidget (package:flutter/src/widgets/framework.dart:6261:36) #77 MultiChildRenderObjectElement.mount (package:flutter/src/widgets/framework.dart:6272:32) ... Normal element mounting (85 frames) #162 Element.inflateWidget (package:flutter/src/widgets/framework.dart:3631:14) #163 Element.updateChild (package:flutter/src/widgets/framework.dart:3380:20) #164 ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:4613:16) #165 StatefulElement.performRebuild (package:flutter/src/widgets/framework.dart:4763:11) #166 Element.rebuild (package:flutter/src/widgets/framework.dart:4311:5) #167 BuildOwner.buildScope (package:flutter/src/widgets/framework.dart:2578:33) #168 WidgetsBinding.drawFrame (package:flutter/src/widgets/binding.dart:882:21) #169 RendererBinding._handlePersistentFrameCallback (package:flutter/src/rendering/binding.dart:363:5) #170 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1145:15) #171 SchedulerBinding.handleDrawFrame (package:flutter/src/scheduler/binding.dart:1082:9) #172 SchedulerBinding._handleDrawFrame (package:flutter/src/scheduler/binding.dart:996:5) #176 _invoke (dart:ui/hooks.dart:150:10) #177 PlatformDispatcher._drawFrame (dart:ui/platform_dispatcher.dart:270:5) #178 _drawFrame (dart:ui/hooks.dart:114:31) (elided 3 frames from dart:async) ```
fertrig commented 2 years ago

I think you need to wrap your story in a ProviderScope. See this example which uses package:flutter_riverpod.

If you are still having issues, then please publish your sample code in a github repo which we can run and reproduce the error.