Загрузите список изображений последовательно. Флаттер

Я создаю приложение для комиксов. Чтобы главы комиксов загружались быстрее. Я хочу, чтобы изображения загружались последовательно одно за другим. Когда изображение завершает загрузку, оно отображается непосредственно в просмотре страницы. Я не знаю, как загружать изображения одно за другим и редактировать представление страницы для их представления.


person Salah eddine Naoushi    schedule 26.08.2020    source источник


Ответы (2)


Чтобы ускорить загрузку изображения, вы можете попробовать использовать пакет cached_network_image следующим образом:

CachedNetworkImage(
        imageUrl: "http://via.placeholder.com/350x150",
        placeholder: (context, url) => CircularProgressIndicator(),
        errorWidget: (context, url, error) => Icon(Icons.error),
     ),

Он будет показывать заполнитель до тех пор, пока изображение не будет загружено, поэтому пользователь может увидеть, сколько изображений существует, и дождаться его загрузки, а также errorWidget, чтобы показать, возникли ли проблемы с каким-либо изображением. Так что предлагаю воспользоваться, так проще. Если вам не нужен сложный код, вы можете попробовать ScrollController поместить его в свой ListView.builder. Инициализируйте свой контроллер прокрутки в initState следующим образом:

     final _scrollController = ScrollController();
      @override
      void initState() {
        super.initState();
        _scrollController.addListener(() {
          if (_scrollController.position.pixels ==
              _scrollController.position.maxScrollExtent) {
// scroll has reach end, now load more images.
            loadMore();
          }
        });
      }

Вы не можете использовать setState внутри initState, поэтому я создаю другой метод для его вызова следующим образом:

  Future<void> loadMore() async {
    final response = await api.get("curated?per_page=50&page=$_currentPage");
    if (response.statusCode == 200) {
      var tempList = Pages.fromJson(response.data);
      setState(() {
        isLoading = false;
        wallpaper.addAll(tempList.photos);
      });
    }

    return null;
  }

Итак, я надеюсь, вы понимаете, и да, это более сложно, поэтому, как я уже сказал, я предлагаю вам использовать CachedNetworkImage.

person Aldy Yuan    schedule 26.08.2020
comment
Например, спасибо, но я не могу использовать кешированное сетевое изображение, потому что у моих изображений динамический URL. - person Salah eddine Naoushi; 26.08.2020
comment
Хорошо, тогда вы можете использовать контроллер прокрутки или сделать кнопку для загрузки следующего изображения или чего-то еще - person Aldy Yuan; 26.08.2020

используйте StreamBuilder, он сделает всю работу за вас.

person M.M.Hasibuzzaman    schedule 26.08.2020
comment
Не могли бы вы подробнее рассказать. Как простой пример того, как установить это для изображений. Извините за поздний ответ - person Salah eddine Naoushi; 27.08.2020
comment
getImageFunction () {............. ..........} StreamBuilder (stream: getImageFunction, builder: .............. ...) Каждый раз, когда getImageFunction получает изображение из Интернета или откуда бы вы его ни взяли, конструктор потоков будет соответственно создавать новый виджет. Если это то, что ты хочешь, - person M.M.Hasibuzzaman; 29.08.2020