CODEWITHSUNDEEP
flutter
Parth Godhani
Parth Godhani

Reputation: 239

Image load from network when it appeare on screen flutter

load image when it appears on a screen. do not load when the image container does not on display area does not load an image from the network.

Upvotes: 0

Views: 2342

Answers (1)

Esh
Esh

Reputation: 535

The question is slightly confusing, but I will interpret it as such that you want to load the image only when it is on the screen in flutter. And not to load when it is not on the screen. This is usually called lazy-loading.

In flutter, this can be implemented using multiple libraries:

1.

Add lazy_load_scrollview dependency to your pubspec.yaml:

dependencies:
  lazy_load_scrollview: 0.0.1

In your Dart code, import package:lazy_load_scrollview/lazy_load_scrollview.dart Then you can wrap your ListView or GridView with the LazyLoadScrollView. Make sure you add an endOfPageListener which will receive the call when the bottom of the list has been reached.

@override
Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: LazyLoadScrollView(
        endOfPageListener: () => loadMore(),
        child: ListView.builder(
          itemCount: data.length,
          itemBuilder: (context, position) {
            return Text("Position $position");
          },
        ),
      ),
    );
}

This was developed by QuirijnGB, and the library is available here.

2

On the other hand, you can useflutter_pagewise, which also implements this by default. Flutter Pagewise supports ListView, GridView, SliverListView and SliverGridView, and I think GridView might be useful for your images.

For this,

Add this into your dependency

dependencies:
    flutter_pagewise:

Then import it to your page, 

import 'package:flutter_pagewise/flutter_pagewise.dart';

And then your listview would work like this:

PagewiseListView(
  pageSize: 10,
  padding: EdgeInsets.all(15.0),
  itemBuilder: (context, entry, index) {
    // return a widget that displays the entry's data
  },
  pageFuture: (pageIndex) {
    // return a Future that resolves to a list containing the page's data
  }
);

I hope that helps!

Upvotes: 4

Related Questions