skip to Main Content

I’m using StreamBuilder and inside that, I have got a list of tasks which takes input from the snapshots and display the data accordingly, but I’m having a null safety issue when dealing with snapshot data. Here’s what the code looks like:

StreamBuilder<List<Task>>(
  stream: DatabaseService()
      .getCompletedTasks(orderName),
  builder: (context, snapshot) {
    List<Task> completedTasks =
        snapshot.data!;
    return snapshot.data!.isEmpty
        ? Container(
            alignment:
                Alignment.center,
            child: Text(
              "You don't have any completed tasks.",
              style: TextStyle(
                fontSize: 20,
                fontFamily:
                    "Roboto",
                color: Colors.black,
              ),
            ),
          )
        : Container(
            child: Flexible(
              flex: 0,
              child: ListView
                  .separated(
                physics:
                    const NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                separatorBuilder:
                    (context,
                            index) =>
                        const SizedBox(
                  height: 5,
                ),
                itemCount:
                    completedTasks
                        .length,
                itemBuilder:
                    (context,
                        index) {
                  return Dismissible(
                    background:
                        Container(
                      color: Colors
                          .red,
                      child:
                          const Align(
                        alignment:
                            Alignment
                                .centerLeft,
                        child:
                            Padding(
                          padding:
                              EdgeInsets.all(
                                  15.0),
                          child:
                              Icon(
                            Icons
                                .delete,
                            color: Colors
                                .white,
                          ),
                        ),
                      ),
                    ),
                    secondaryBackground:
                        Container(
                      color: Colors
                          .red,
                      child:
                          const Align(
                        alignment:
                            Alignment
                                .centerRight,
                        child:
                            Padding(
                          padding:
                              EdgeInsets.all(
                                  15.0),
                          child:
                              Icon(
                            Icons
                                .delete,
                            color: Colors
                                .white,
                          ),
                        ),
                      ),
                    ),
                    key:
                        UniqueKey(),
                    onDismissed:
                        (direction) {
                      DatabaseService()
                          .deleteTask(
                              completedTasks[index]
                                  .id);
                      AwesomeNotifications()
                          .cancelSchedule(
                              completedTasks[index]
                                  .id);
                    },
                    child: Item(
                      task:
                          completedTasks[
                              index],
                    ),
                  );
                },
              ),
            ),
          );
  }),

Everything works fine but just null safety error pops up for a short amount of time.

2

Answers


  1. Add 1 condition for while loading stream data on initial stage.

    StreamBuilder<List<Task>>(
            stream: DatabaseService()
                .getCompletedTasks(orderName),
            builder: (context, snapshot) {
              
              // Add this condition.
              if(!snapshot.hasData){
                
                return Center(child: CircularProgressIndicator());
              }
              
              List<Task> completedTasks =
              snapshot.data!;
              return snapshot.data!.isEmpty
                  ? Container(
                alignment:
                Alignment.center,
                child: Text(
                  "You don't have any completed tasks.",
                  style: TextStyle(
                    fontSize: 20,
                    fontFamily:
                    "Roboto",
                    color: Colors.black,
                  ),
                ),
              )
                  : Container(
                child: Flexible(
                  flex: 0,
                  child: ListView
                      .separated(
                    physics:
                    const NeverScrollableScrollPhysics(),
                    shrinkWrap: true,
                    separatorBuilder:
                        (context,
                        index) =>
                    const SizedBox(
                      height: 5,
                    ),
                    itemCount:
                    completedTasks
                        .length,
                    itemBuilder:
                        (context,
                        index) {
                      return Dismissible(
                        background:
                        Container(
                          color: Colors
                              .red,
                          child:
                          const Align(
                            alignment:
                            Alignment
                                .centerLeft,
                            child:
                            Padding(
                              padding:
                              EdgeInsets.all(
                                  15.0),
                              child:
                              Icon(
                                Icons
                                    .delete,
                                color: Colors
                                    .white,
                              ),
                            ),
                          ),
                        ),
                        secondaryBackground:
                        Container(
                          color: Colors
                              .red,
                          child:
                          const Align(
                            alignment:
                            Alignment
                                .centerRight,
                            child:
                            Padding(
                              padding:
                              EdgeInsets.all(
                                  15.0),
                              child:
                              Icon(
                                Icons
                                    .delete,
                                color: Colors
                                    .white,
                              ),
                            ),
                          ),
                        ),
                        key:
                        UniqueKey(),
                        onDismissed:
                            (direction) {
                          DatabaseService()
                              .deleteTask(
                              completedTasks[index]
                                  .id);
                          AwesomeNotifications()
                              .cancelSchedule(
                              completedTasks[index]
                                  .id);
                        },
                        child: Item(
                          task:
                          completedTasks[
                          index],
                        ),
                      );
                    },
                  ),
                ),
              );
            }),
    
    Login or Signup to reply.
  2. you force non null value here

     List<Task> completedTasks =snapshot.data!;
    // this caused issue
    

    add conditon like this

    StreamBuilder<List<Task>>(
       stream: DatabaseService().getCompletedTasks(orderName),
       builder: (context, snapshot) {
          
          if(snapshot.hasData){
           // Returns whether this snapshot contains a non-null [data] value.
           //your widget list
           // display widget when it success
          }else if(snapshot.hasError){
            //your widget show error state
            // display when error occured
          }else{
          // your default widget,
          // like loader , etc
          // display while loading run the function stream
          }
       )
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search