How can I solve this Flutter GraphQL null safety error?

Question

I'm trying to use graphql_flutter's Subscription widget but my app fails to compile. I keep getting a null safety error:

Error: The argument type 'Widget Function({dynamic error, bool loading, dynamic payload})' can't be assigned to the parameter type 'Widget Function({dynamic error, bool loading, dynamic payload})' because 'Widget Function({dynamic error, bool loading, dynamic payload})' is nullable and 'Widget Function({dynamic error, bool loading, dynamic payload})' isn't.

• 'Widget' is from 'package:flutter/src/widgets/framework.dart' ('/C:/flutter/packages/flutter/lib/src/widgets/framework.dart'). ? Subscription(getMessages, "", builder: ({

This is my code:

return Scaffold(
        backgroundColor: Colors.grey[200],
        appBar: AppBar(
          title: const Text("Chats"),
        ),
        resizeToAvoidBottomInset: true,
        body: GestureDetector(
            onTap: () {
              FocusScope.of(context).requestFocus(FocusNode());
            },
            child: Column(children: [
                  Subscription(getMessages, "", builder: ({
                      required bool loading,
                      dynamic payload,
                      dynamic error,
                    }) {
                      return error
                          ? Text(error)
                          : loading
                              ? const CircularProgressIndicator()
                              : payload['messages'].map((message) {
                                  return Row(
                                      mainAxisAlignment:
                                          firstName == message.user
                                              ? MainAxisAlignment.end
                                              : MainAxisAlignment.start,
                                      children: <Widget>[
                                        firstName == message.user
                                            ? Container()
                                            : Expanded(
                                                flex: 1,
                                                child: Container(
                                                    margin: const EdgeInsets
                                                        .fromLTRB(0, 0, 15, 0),
                                                    padding: const EdgeInsets
                                                        .fromLTRB(0, 5, 0, 0),
                                                    width: 50.0,
                                                    height: 50.0,
                                                    decoration: BoxDecoration(
                                                        borderRadius:
                                                            BorderRadius
                                                                .circular(25),
                                                        border: Border.all(
                                                            width: 3,
                                                            color:
                                                                Colors.black)),
                                                    child: Text(
                                                      firstName
                                                          .substring(0, 2)
                                                          .toUpperCase(),
                                                      style: const TextStyle(
                                                          fontSize: 18),
                                                    ))),
                                        Expanded(
                                            flex: 6,
                                            child: Container(
                                                padding:
                                                    const EdgeInsets.all(10.0),
                                                decoration: BoxDecoration(
                                                  borderRadius:
                                                      BorderRadius.circular(10),
                                                ),
                                                color: firstName == message.user
                                                    ? Colors.green[200]
                                                    : Colors.grey[500],
                                                child: Text(
                                                  message.content,
                                                  style: TextStyle(
                                                      fontSize: 25,
                                                      color: firstName ==
                                                              message.user
                                                          ? Colors.white
                                                          : Colors.black),
                                                )))
                                      ]);
                                });
                    })

I've searched online but can't find any post with this exact error. My guess is that the code I've written inside the Subscription widget is nullable while the Subscription widget itself (from the package) isn't. I'm just not sure how to reconcile both.

I hope the code I posted isn't confusing. The error is coming from the Subscription widget. I also have the code on Github.

Answer 1

I use the regular graphql package because it I was not a fan of the having containing the data in widgets especially when having listeners for other things like status or notifications. I suggest going with the regular graphql package so you have more control over your data.

If you want sample code that worked perfect for me I can provide.