CODEWITHSUNDEEP
imagefluttercachingfirebase-storage
antonio
antonio

Reputation: 11

Flutter images download again on navigator pop

Hi i have a problem with a stream of images in flutter, when i do a Navigator.push() and then Navigator.pop() the images of the stream gets reload.

My Class is a Stateful Widget with AutomaticKeepAliveClientMixin

When images gets donwloaded After a Navigator.push() and then Navigator.pop()

I use riverpod for the stream and Firebase Storage.

 Expanded(
                child: watch(userEventsFamilyStream(user.uid)).maybeWhen(
                    data: (events) {
                      if (events.isEmpty) {
                        return EmptyGrid(
                            onTap: () => context
                                .read(menuNotifier)
                                .currentIndex = 1);
                      }
                      return Stack(
                        children: [
                          GridView.count(
                            crossAxisCount: 3,
                            children: [
                              ...events.map((event) {
                                return EventItem(
                                  uid: event.uid,
                                  imgUrl: event.imgUrl,
                                  onTap: () async {
                                    final result =
                                        await buildOptions(context);
                                    _handleResult(
                                        context, result, actions, event);
                                  },
                                );
                              }).toList()
                            ],
                          ),
                          if (state.isSubmitting)
                            Container(
                                decoration: const BoxDecoration(
                                    color: Colors.black54),
                                width: MediaQuery.of(context).size.width,
                                child: const Center(
                                    child: CircularProgressIndicator())),
                        ],
                      );
                    },
                    orElse: () =>
                        const Center(child: CircularProgressIndicator())),
              ),

I also use cached_network_image package

Hero(
    tag: '${uid}profile',
    child: FadeInImage(
      placeholder: const AssetImage('assets/img/transparent.png'),
      image: CachedNetworkImageProvider(imgUrl),
      fit: BoxFit.cover,
    ),
  ),

Upvotes: 0

Views: 887

Answers (2)

antonio
antonio

Reputation: 11

I solved: the problem was the size of the images, even cached if the image is too big it takes some time to get load.

Upvotes: 1

Samer Alkhatib
Samer Alkhatib

Reputation: 148

if you want to keep the state of the page alive, you may use AutomaticKeepAliveClientMixin

class Foo extends StatefulWidget {
  @override
  FooState createState() {
    return new FooState();
  }
}

class FooState extends State<Foo> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    return Container();
  }

  @override
  bool get wantKeepAlive => true;
}

Upvotes: 1

Related Questions