Add a knob to show layout explorer view

[prolificcoder]

Not sure how complicated this is but would it be possible to add a know for something that we see in a layout explorer?

I am more interested in seeing margins and paddings.

Some context: We are hoping to give access to our Desingers pre-merge for custom widgets, so that they can play with them and make sure they are good before developers merge them.

[ookami-kb]

I've done some investigation, and I don't think that's (easily) doable.

Some helpers can be done (e.g. switching debugPaintSizeEnabled – but the question is how to make it have an effect on the story content only, not on the whole app), but they will only work in debug mode.

Using Flutter layout inspector will require a huge amount of work, as it's not available as a library that can be integrated.

But the idea is interesting, I'll leave the issue open, maybe there are other solutions.

[kekland]

@ookami-kb @prolificcoder just saw this issue, and I think I have some sort of a solution for this. I've published a package called inspector quite a while ago (https://github.com/kekland/inspector), which aims to bring the functionality of the layout inspector to the app itself.

I've tried incorporating it with storybook_flutter, and it seems to be working just fine!

Example code:

class StorybookApp extends StatelessWidget {
  StorybookApp({super.key});

  final storybookKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Inspector(
          child: Storybook(
            key: storybookKey,
            stories: stories,
          ),
        ),
      ),
    );
  }
}

Let me know if this works.

P.S. The package still needs some improvements, but alas I don't have enough time to maintain it. However, the core functionality still works :)

[ookami-kb]

@kekland it looks pretty interesting, I'll check it, thanks!

[kekland]

@ookami-kb I've just updated Inspector to 1.1.4, which should bring some improvements. Another thing is that I've fixed an issue with the package that previously made using it in wrapperBuilder impossible - now it should work just fine.

    return Storybook(
      key: storybookKey,
      stories: stories,
      wrapperBuilder: (context, child) => materialWrapper(
        context,
        Inspector(child: child!),
      ),
    );

Perhaps I can make a package which exports Inspector as a plugin for storybook_flutter?

[ookami-kb]

@kekland yes, a separate plug-in package makes total sense 👍