Conditional statement not working on ListTile onTap Flutter

Ali Akbar 0
Viewed 37

I'm trying to put a condition for image opener in my app. If image is null then it shouldn't do anything but if there is some image coming then it should open it in full screen image opener but its not working. I'm fetching data in ListView.builder. Not all images are going to be null from database because the image is optional so some images will be coming, some will be not I can't fetch them all and put them into the image viewer it'll show broken image view which I don't want.

Update: Debug log gives this when I tap on no image ListTile index

Image provider: NetworkImage("", scale: 1.0)
Image key: NetworkImage("", scale: 1.0)

Printing snapshot giving this

Here's my ListTile:

ListTile(
                        onTap: () async {
                          if (snapshot.data?.docs[index].data()['image'] !=
                              null) {
                            Navigator.of(context).push(MaterialPageRoute(
                                builder: (context) => ImageOpener(
                                      imageProvider: Image.network(
                                        snapshot.data?.docs[index]
                                            .data()['image'],
                                        errorBuilder:
                                            (context, error, stackTrrace) {
                                          return const Icon(Icons.error);
                                        },
                                      ).image,
                                    )));
                          } else if (snapshot.data?.docs[index]
                                  .data()['image'] ==
                             "") {
                            ScaffoldMessenger.of(context).showSnackBar(
                                const SnackBar(
                                    content: Text('No image to show')));
                          } else {
                            ScaffoldMessenger.of(context).showSnackBar(
                                const SnackBar(
                                    content: Text('No image to show')));
                          }
                        },
                        subtitle: Text(
                          snapshot.data?.docs[index].data()['notificationbody'],
                          style: const TextStyle(
                              // fontSize: 15,
                              ),
                        ),
                        title: Text(snapshot.data?.docs[index]
                                ['notificationtext'] ??
                            "Loading..."),
                        leading: const Icon(Icons.notifications),
                        trailing: Image.network(
                          snapshot.data?.docs[index].data()['image'],
                          errorBuilder: (context, error, stackTrrace) {
                            return const Visibility(
                              visible: false,
                              child: Padding(
                                padding: EdgeInsets.all(8.0),
                                child: Icon(Icons.error),
                              ),
                            );
                          },
                        ),
                      ),
flutter-layout google-cloud-firestore dart firebase flutter
2 Answers

it is because data() returns an abject you should convert it to a map

var data = snapshot.data?.docs[index].data() as Map<String,dynamic>;

then you can check now if data['image'] is null

userpqvO0

Check if the image url is not empty (not null) and if it is not empty you can call your Navigator.push

if (snapshot.data?.docs[index].data()['image'].isNotEmpty) {
                            Navigator.of(context).push(MaterialPageRoute(
                                builder: (context) => ImageOpener(
                                      imageProvider: Image.network(
                                        snapshot.data?.docs[index]
                                            .data()['image'],
                                        errorBuilder:
                                            (context, error, stackTrrace) {
                                          return const Icon(Icons.error);
                                        },
                                      ).image,
                                    )));
                          }else{
                            ScaffoldMessenger.of(context).showSnackBar(
                                const SnackBar(
                                    content: Text('No image to show')));
                          }
Ozan Taskiran0
Related