[PAGE ISSUE]: 'Create a scrolling parallax effect'

[LangInteger]

Page URL

https://docs.flutter.dev/cookbook/effects/parallax-scrolling/

Page source

https://github.com/flutter/website/tree/main/src/cookbook/effects/parallax-scrolling.md

Describe the problem

The comparison between non-parallax & parallax effects is not perfect because the code offered for non-parallax:

  Widget _buildParallaxBackground(BuildContext context) {
    return Image.network(
      imageUrl,
      fit: BoxFit.cover,
    );
  }

will create an image that does not fill the whole parent stack widget, see:

Expected fix

To improve this, the code should be:

  Widget _buildParallaxBackground(BuildContext context) {
    return Positioned.fill(
        child: Image.network(
      imageUrl,
      fit: BoxFit.fill,
    ));
  }

Thus we can get the desired screen:

Additional context

More appropriate usage example of Stack, as well as its child widgets, can give newbies a better understanding of flutter, and also can eliminate the time every developer spends to solve this corner case problem.

[danagbemava-nc]

Hi @LangInteger, you'll need to complete the cookbook first. At the end of the cookbook, the image fills the stack it is placed in. See the screenshot below.

Considering the desired effect is achieved at the end of the cookbook, I think the sample should remain as is.

/cc @domesticmouse for thoughts on this

[LangInteger]

Hi @danagbemava-nc, I know the picture will fill the parent fully with the parallax effect finally implemented in the Cookbook. But I think it is not the parallax effect that makes the fill takes effect (and we do not want to give developers a feeling of that, right?). So we'd better make the non-parallax version also fill the parent widget.

[atsansone]

The suggested change distorts the image. (That's normal for BoxFit.fill, but also why the current example uses BoxFit.cover.)

To correct the display, the code should be:

  Widget _buildParallaxBackground(BuildContext context) {
    return Positioned.fill(
        child: Image.network(
      imageUrl,
      fit: BoxFit.cover,
    ));
  }