Flutter: avoid opacity effect for FlexibleSpaceBar

Question

I use a FlexibleSpaceBar but only for an image. The AppBar is always on top so there is no transition between these 2 elements at all, just the effect of scrolling the image up using parallax.

So I don't need to make the opacity effect for the image.

I know it's possible because I've seen it on Aliexpress's app, which I know it uses Flutter. You can see the no opacity effect here: https://youtu.be/ESSsY2m7vTY?t=28

when mine is looking like this: https://youtu.be/Jnm9jN4-wWY

This is my widget:

FlexibleSpaceBar(
                  collapseMode: CollapseMode.parallax,
                  background: Hero(
                    tag: widget.newRent == false
                        ? 'rent-image${Provider.of<MyRents>(context).currenRentIndex}'
                        : 'new-rent-image',
                    child: _imageEdited == false
                        ? myRent['images'].isNotEmpty
                            ? CachedNetworkImage(
                                imageUrl: myRent['images'][0],
                                fit: BoxFit.cover,
                                placeholder: (context, url) =>
                                    Center(child: CircularProgressIndicator()),
                                errorWidget: (context, url, error) =>
                                    errorImage(context),
                              )
                            : Provider.of<MyRents>(context, listen: false)
                                    .newGalleryImages
                                    .isNotEmpty
                                ? Image.file(
                                    Provider.of<MyRents>(context, listen: false)
                                        .newGalleryImages[0],
                                    fit: BoxFit.cover)
                                : Container(
                                    padding: const EdgeInsets.all(20.0),
                                    child: Image(
                                      image:
                                          AssetImage('assets/images/icon.jpg'),
                                    ),
                                  )
                        : Image.file(myRent['images'][0], fit: BoxFit.cover),
                  ),
                ),

After removing all the checks it's a basic FlexibleSpaceBar with a Hero transition, nothing fancy

I know what are you talking about. Its just that when you swipe up the backgorund of title is getting more and more visible ( on top of the picture ). Right ? — sonic, Dec 02 '20 at 14:26
No, you swipe down (a normal scroll no stretch or similar). Without SliverAppBar the image gets an opacity effect. Here you don't see it because it moves the title to an AppBar but it happens on my case: https://api.flutter.dev/flutter/material/FlexibleSpaceBar-class.html — Dani, Dec 02 '20 at 14:31
I added a link to the video. You can see the opacity that I don't want to have — Dani, Dec 02 '20 at 14:37
The problem comes with this line in flexible_space_bar.dart: final double opacity = 1.0 - Interval(fadeStart, fadeEnd).transform(t); — Dani, Dec 02 '20 at 14:53

score 0 · Answer 1 · answered Dec 02 '20 at 14:54

0

I think the problem is because it is indeed a "Bar" like the name of the widget says: FlexibleSpaceBar. You would have to propably extend this function and overwrite this behaviour or maybe you could use this: https://pub.dev/packages/stretchy_header

answered Dec 02 '20 at 14:54

sonic

1,282
1
9
22

but you can use the stretch option for that – Dani Dec 02 '20 at 14:58
I posted a way. It stops doing the parallax effect until it gets the height of the AppBar but it's definitely better – Dani Dec 02 '20 at 15:02

score 0 · Answer 2 · answered Dec 02 '20 at 15:00

Followed this approach: https://stackoverflow.com/a/58973381/4858133

Stack(
                  children: <Widget>[
                    Positioned.fill(
                      child: Hero(
                        tag: widget.newRent == false
                            ? 'rent-image${Provider.of<MyRents>(context).currenRentIndex}'
                            : 'new-rent-image',
                        child: _imageEdited == false
                            // TODO: move it to a separate function
                            ? myRent['images'].isNotEmpty
                                ? CachedNetworkImage(
                                    imageUrl: myRent['images'][0],
                                    fit: BoxFit.cover,
                                    placeholder: (context, url) => Center(
                                        child: CircularProgressIndicator()),
                                    errorWidget: (context, url, error) =>
                                        errorImage(context),
                                  )
                                : Provider.of<MyRents>(context, listen: false)
                                        .newGalleryImages
                                        .isNotEmpty
                                    ? Image.file(
                                        Provider.of<MyRents>(context,
                                                listen: false)
                                            .newGalleryImages[0],
                                        fit: BoxFit.cover)
                                    : Container(
                                        padding: const EdgeInsets.all(20.0),
                                        child: Image(
                                          image: AssetImage(
                                              'assets/images/icon.jpg'),
                                        ),
                                      )
                            : Image.file(myRent['images'][0],
                                fit: BoxFit.cover),
                      ),
                    ),
                  ],
                ),

correct, its child. So basically I got rid of the FlexibleSpaceBar. As I posted on the other comment the opacity line is not dynamic so nothing I can do about it — Dani, Dec 02 '20 at 15:31
You could just copy whole file and change only this one line and use it as your own `FlexibleSpaceBarWithoutOpacity` — sonic, Dec 02 '20 at 18:43
I mean you could copy whole flexible_space_bar.dart to new file, then you could change its name to `FlexibleSpaceBarWithoutOpacity` and just change this line you posted before `final double opacity = 1.0 - Interval(fadeStart, fadeEnd).transform(t);` to `final double opacity = 1.0`. — sonic, Dec 03 '20 at 11:27

Flutter: avoid opacity effect for FlexibleSpaceBar

2 Answers2