Hello Rémi,

I am commenting on this issue because my question is related to inspecting the state of an app using Provider. If you think it should be its own issue, please let me know and I'll open a new one.

Coming from the web world and being used to the Chrome dev tools, to the React dev tools and to the Redux dev tools, I've come to expect to be able to inspect the current state of my components (for React) or of my entire app (for Redux), and I miss it terribly when developing Flutter apps.

I have created the current Widgets to help me log the entire state of my app on every change:

class MultiProviderDebugger extends StatelessWidget {
  final List<SingleChildCloneableWidget> providers;
  final Function getProvidersData;
  final Widget child;

  MultiProviderDebugger({this.providers, this.getProvidersData, this.child});

  @override
  Widget build(BuildContext context) => MultiProvider(
        providers: providers,
        child: kReleaseMode
            ? child
            : MultiProviderLogger(
                getProvidersData: getProvidersData,
                child: child,
              ),
      );
}

class MultiProviderLogger extends StatefulWidget {
  final Widget child;
  final Function getProvidersData;

  MultiProviderLogger({this.child, this.getProvidersData});

  @override
  _MultiProviderLoggerState createState() => _MultiProviderLoggerState();
}

class _MultiProviderLoggerState extends State<MultiProviderLogger> {
  Map providersData;
  JsonEncoder beautifulJsonEncoder = new JsonEncoder.withIndent('  ');

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    providersData = providersData ?? widget.getProvidersData(context);
    print(beautifulJsonEncoder.convert(providersData));
  }

  @override
  Widget build(BuildContext context) {
    return widget.child;
  }
}

I can then use my Widget as a replacement for MultiProvider as such:

MultiProviderDebugger(
      providers: [
        ChangeNotifierProvider(builder: (_) => MyData()),
        ChangeNotifierProvider(builder: (_) => MyOtherData()),
      ],
      getProvidersData: (context) => {
        'MyData': Provider.of<MyData>(context),
        'MyOtherData': Provider.of<MyOtherData>(context),
      },
      child:Container()
);

My questions are the following:

Am I missing something or is it indeed currently impossible to inspect a State instance's values?
Do you see any inconsistency or issue in the code I posted here above?

Thanks a lot.

Uh oh!

Consider adding diagnostic children to Providers #213

Description

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions