PageView bug?

i tried more than 4 days now to fix the following problem: https://youtu.be/J1sbdWLG260

As you can see, the pageview has multiple sites with different images but the problem is that since I replaced the AssetImage there with a NetworkImage it starts to hide the next site (or the one before or both)... i really hat this and everything i tried didnt work, it cant be a problem with my code because i tried many different codes too or just the normal pageview but anyways here it is:

code sample

final pageController = PageController(initialPage: 0, viewportFraction: 0.7, keepPage: true);
PageView.builder(
          controller: pageController,
          scrollDirection: Axis.horizontal,
          itemCount: list.length,//latestItems.length,
          dragStartBehavior: DragStartBehavior.down,
          physics: const BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
          itemBuilder: (context, index) {
            return AnimatedBuilder(
              animation: pageController,
              builder: (context, widget) {
                if (pageController.position.minScrollExtent == null ||
                    pageController.position.maxScrollExtent == null) {
                  Future.delayed(Duration(microseconds: 1), () {
                    setState(() {});
                  });
                  return Container();
                }
                double value = pageController.page - index;
                value = (1 - (value.abs() * 0.3)).clamp(0.0, 1.0);
                return Center(
                  child: NetworkImage(url[index]),);
              },
            );
          },
        )

https://i.stack.imgur.com/2Cy6g.jpg https://i.stack.imgur.com/FNV3p.jpg

I would love to get this working and would appreciate any help! :) Thank you (-> i can give you more details if needed)

Flutter doctor:

[√] Flutter (Channel stable, v1.9.1+hotfix.6, on Microsoft Windows [Version 10.0.18362.476], locale de-DE)
• Flutter version 1.9.1+hotfix.6 at C:\Users\besitzer\flutter
• Framework revision 68587a0 (3 months ago), 2019-09-13 19:46:58 -0700
• Engine revision b863200
• Dart version 2.5.0

[√] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
• Android SDK at C:\Users\besitzer\AppData\Local\Android\sdk
• Android NDK location not configured (optional; useful for native profiling support)
• Platform android-29, build-tools 29.0.2
• Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)
• All Android licenses accepted.

[√] Android Studio (version 3.5)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin version 41.1.2
• Dart plugin version 191.8593
• Java version OpenJDK Runtime Environment (build 1.8.0_202-release-1483-b03)

[!] IntelliJ IDEA Community Edition (version 2017.2)
• IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2017.2.5
X Flutter plugin not installed; this adds Flutter specific functionality.
X Dart plugin not installed; this adds Dart specific functionality.
• For information about installing plugins, see
https://flutter.dev/intellij-setup/#installing-the-plugins

[√] VS Code (version 1.39.1)
• VS Code at C:\Users\besitzer\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.5.1

[√] Connected device (1 available)
• Android SDK built for x86 • emulator-5554 • android-x86 • Android 10 (API 29) (emulator)

! Doctor found issues in 1 category.

[iapicca]

Hi @Kimonnn
I'm not sure that what you are describing is a bug related to PageView

sample code

import "package:flutter/material.dart";

void main()=> runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) => MaterialApp(home: HomePage(),);
}

class HomePage extends StatefulWidget {

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  static PageController _controller;
  static const String _url = 'https://flutter.dev/images/catalog-widget-placeholder.png';
  static List<Widget> get _widgets => [for (int i=0; i<10; ++i) PageWidget(url: _url)];

  @override
  void initState() {
    _controller = PageController(
      initialPage: 4,
      viewportFraction: 0.8,);
    super.initState();
  }

  @override
  void dispose() {
    _controller?.dispose();
    _controller=null;
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
    backgroundColor: Colors.blueAccent,
    body:PageView(
    controller: _controller,
    children: _widgets,
  ),);
}


class PageWidget extends StatefulWidget {
  final String url;
  PageWidget({this.url});

  @override
  _PageWidgetState createState() => _PageWidgetState();
}

class _PageWidgetState extends State<PageWidget> {
  static Image _image;

  @override
  void initState() {
    _image = Image.network(widget.url,);
    super.initState();
  }

  @override
  void dispose() {
    _image = null;
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => Padding(
    padding: const EdgeInsets.only(right: 10),
    child: _image
  );
}

generally it's a good idea to "load" and dispose the images to free some memory
but if in want prioritize the "readiness" of the picture you might want to consider the AutomaticKeepAliveClientMixin

sample

...
class _PageWidgetState extends State<PageWidget> with AutomaticKeepAliveClientMixin {

  @override
  bool get wantKeepAlive => true;
...

does this solution fix the issue?
thank you

With your solution the images are not hiding that often as before but still in 2 of 4-5 swipes which is not good at all.. i understand that it is not bad to unload the pages but as you can see in the youtube video linked above, the whole app seems verrryy laggy and buggy because of this and it just looks not good :( i dont know what i should have done wrong but your example works fine.. maybe you can see what i did wrong: https://pastebin.com/bH2zmppf and the pageview widget: https://pastebin.com/9QftxrWi

[kenthinson]

@Kimonnn It is very much a problem with your code. Even though you say it's not.
It's a async / memory problem. The reason it works fine when you use local images is because they load almost instantly from disk.

You need to do a few things.

1. Prefetch at least 3 images. left, center, right. Possible more depending on how many you want to cache.
2. Prefetch more as the user swipes. For example you have 3 in ram. The user swipes to the right you will need to load the next right one into ram getting ready for them to swipe again.
3. Dispose of old images from ram if it gets too big.

Sorry to tell you PageView is working just fine. It's not going to manage all the memory for you automatically.

[iapicca]

Hi @Kimonnn
I see you are not passing the slides as a widget but as a stream
this way the AutomaticKeepAliveClientMixin will help only marginally;
since you are using in a state that uses a streambuilder
I'm afraid those images are still rebuild, you may want to test with some print().

Regardless, this doesn't appear to be an issue with flutter itself
and this platform is not met for assistance on personal code.

Please see https://flutter.dev/community for resources for asking questions like this,
you may also get some help if you post it on Stack Overflow.

Closing, as this isn't an issue with Flutter itself,
if you disagree please write in the comments and I will reopen it
Thank you

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.