Error only in the first time I Run it 'The getter 'length' was called on null. Receiver: null'

Question

So I try to build Sliverlist on the first run I am hard-coding the child count to 20 (eg) and the app works just fine but if I try to set the childCount to the length of my FireStore collection on the first run i get the error

======== Exception caught by widgets library =======================================================
The following NoSuchMethodError was thrown building:
The getter 'length' was called on null.
Receiver: null
Tried calling: length

BUT. if I first set the childCount manually to 20 and then doing hot reload to the app with the childCount set to handlyCalls,length it works like it should? any suggestions?

class HandlyCallsList extends StatefulWidget {
@override
_HandlyCallsListState createState() => _HandlyCallsListState();
}

class _HandlyCallsListState extends State<HandlyCallsList> {
@override
Widget build(BuildContext context) {

  final handlyCalls = Provider.of<List<HandlyCall>>(context);
  int count = 20;

return SliverList(
  delegate: SliverChildBuilderDelegate(
        (BuildContext context, index) {
          print('!!!!!!!!!!!! 11111111111111111111 ${handlyCalls.length}');
      return HandlyCallTile(handlyCall: handlyCalls[index]);
    },
    childCount: handlyCalls.length,
  ),
);

UPDATE

this is the handyCall to list function

List<HandlyCall> _handlyCallListFromSnapshot(QuerySnapshot snapshot) {
return snapshot.docs.map((document) {
  return HandlyCall(
    title: document.data()['title'] ?? '',
    type: document.data()['type'] ?? '',
    reward: document.data()['reward'] ?? null,
    money: document.data()['money'] ?? 0,
    name: document.data()['name'] ?? '',
    rating: document.data()['rating'] ?? 25,
    user: document.data()['user'] ?? null,
  );
}).toList() ;
}

//get userProfile stream
Stream<List<HandlyCall>> get handlyCalls {
return handlyCallsCollection.snapshots().
map(_handlyCallListFromSnapshot);
}

Answer 1

I'm not sure what the handlyCalls is like, but I think the best approach for you would be create the list inside one class that will be handled in the provider and contain a list of handlyCalls and not giving the provider a list of handlyCalls.

So would be like this:

    class handlyCallsList extends ChangeNotifier {
    
      List<handlyCalls> _list;
    
      List<handlyCalls> get list => _list;
    
      void changeList(List<handlyCalls> list){
        this._list = list;
        notifyListeners(); // Important to notify all the listeners and make the listeners refresh the view
      }
    }

Now you should initialize your provider with a default value so you can always have a list so it will not be null in the first run.

ChangeNotifierProvider<handlyCallsList>(
      create: (_) => handlyCallsList()..changeList([]), // you can add the default list here for when it loads the first time so you will not find it null
);

You can also check the value to see if it's null the list thats it's returning or check with handlyCalls?.length for possible null values.

Answer 2

OK so after a long time of trial and error I've tried a diffrent approach of using ListView instead of CustomScrollView, it worked like magic, I set the chiledCount to my LIST.length and all of the sudden there where no errors after that I changed the code to ListView.Builder and changed the body of the Home Scaffold to NestedScrollView and inserted my SliverAppBar into there, probably something is broken indise of the SliverListDelegate

My new code:

      Scaffold(...
      body: NestedScrollView(
      floatHeaderSlivers: true,
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(...),
      ];
      },
      body: HandlyCallsList(),
    ),
  ),

The listView Builder

class _HandlyCallsListState extends State<HandlyCallsList> {


@override
Widget build(BuildContext context) {


final handlyCalls = Provider.of<List<HandlyCall>>(context);

return ListView.builder(
  itemCount: handlyCalls.length,
    itemBuilder: (context, index) {
    return HandlyCallTile(handlyCall: handlyCalls[index],);
    }
);
}
}