In this example, I will share how to preload network images using PageView in flutter I ended up using FutureBuilder and CachedNetworkImageProvider from the package cached_network_image to prefetch all the images.
Here is my solution:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | PageController _controller; ZoomableImage currPage, nextPage; Future<List<CachedNetworkImageProvider>> _loadAllImages(Book book) async { List<CachedNetworkImageProvider> cachedImages = []; for(int i=0;i<book.numPages;i++) { var configuration = createLocalImageConfiguration(context); cachedImages.add(new CachedNetworkImageProvider("https://example.com/${bookId}/${index+1}.jpg}")..resolve(configuration)); } return cachedImages; } FutureBuilder<List<CachedNetworkImageProvider>> _futurePages(Book book) { return new FutureBuilder( future: _loadAllImages(book), builder: (BuildContext context, AsyncSnapshot snapshot){ if(snapshot.hasData) { return new Container( child: PageView.builder( physics: new AlwaysScrollableScrollPhysics(), controller: _controller, itemCount: snapshot.data.length, itemBuilder: (BuildContext context, int index) { ImageProvider image = snapshot.data[index]; return new ZoomableImage( image, placeholder: new Center( child: CupertinoActivityIndicator(), ), ); }, onPageChanged: (int index) {}, ), ); } else if(!snapshot.hasData) return new Center(child: CupertinoActivityIndicator()); }, ); } @override Widget build(BuildContext context) { return new Scaffold( body: _futurePages(widget.book), ); } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
