Home > Mobile >  Flutter - null check operator error in a child that should not be rendered yet
Flutter - null check operator error in a child that should not be rendered yet

Time:12-20

I made a Loader widget which shows a loading indicator if isLoading = true and shows a child widget only if isLoading = false.

The problem is when I use nullable data in the child, even though isLoading = true should prevent the child from being rendered, Flutter still gives me Null check operator used on a null value and a red screen.

Example:

class Example extends StatelessWidget {
  const Example({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    String? data = null; // Just an example

    return Loader(
      isLoading: data == null,
      child: Text(data!), // Flutter will parse this even though Loader never attempted to render it
    );
  }
}

This is my Loader widget:


class Loader extends StatelessWidget {
  const Loader({
    Key? key,
    required this.isLoading,
    required this.child,
  }) : super(key: key);

  final bool isLoading;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    if (isLoading) {
      return CircularProgressIndicator();
    else {
      return child;
    }
  }
}

Note: I want the Loader as a wrapper to clean up my code, because my isLoading, my Loader and the data are much more complicated.

CodePudding user response:

You could refactor your Loader to use a builder instead:

class Loader extends StatelessWidget {
  const Loader({
    Key? key,
    required this.isLoading,
    required this.builder,
  }) : super(key: key);

  final bool isLoading;
  final WidgetBuilder builder;

  @override
  Widget build(BuildContext context) {
    if (isLoading) {
      return CircularProgressIndicator();
    } else {
      return builder(context);
    }
  }
}

Then use it like

class Example extends StatelessWidget {
  const Example({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    String? data = null; // Just an example

    return Loader(
      isLoading: data == null,
      builder: (_) => Text(data!),
    );
  }
}

CodePudding user response:

This happened when try to parse the code, even if that part of code not rendered, because dart null safety policy not accept ! on a null value. So this is not the issue in Loader widget, this is inside the child that you try to pass. Try set default value like this:

return Loader(
  isLoading: data == null,
  child: Text(data ?? ''), //<--- add this
);

CodePudding user response:

You can set a default value to be shown in the Text widget when it's null using the ?? like this:

  return Loader(
  isLoading: data == null,
  child: Text(data ?? "default data"), 
);
  • Related