After deprecation period, remove this recipe

[raulmabe]

Page URL: https://docs.flutter.dev/cookbook/effects/gradient-bubbles Page source: https://github.com/flutter/website/tree/master/src/docs/cookbook/effects/gradient-bubbles.md

Description of issue: I tried to implement this cookbook and I am getting an unexpected behaviour and I do not know if it is intended:

As the cookbook says The CustomPainter requires the information necessary to determine where its bubble is within the ListView’s bounds, also known as the Viewport so I understand that the viewport height increases when the ListView is infinite (i.e. ListView.builder).

Dart code

class ChatPage extends StatelessWidget {
  const ChatPage();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: true,
      appBar: AppBar(
        elevation: 6.0,
        title: Text('User name', style: context.theme.textTheme.headline5),
      ),
      body: Stack(
        children: [
          Positioned(
            bottom: kToolbarHeight + 0,
            top: 0,
            right: 0,
            left: 0,
            child: ListView.builder(
              shrinkWrap: true,
              addAutomaticKeepAlives: false,
              reverse: true,
              itemBuilder: (context, index) => Padding(
                padding:
                    const EdgeInsets.symmetric(horizontal: 8.0, vertical: 2.0),
                child: BubbleMessage(msg: messages[index % messages.length]),
              ),
            ),
          ),
          Positioned(
            left: 0,
            right: 0,
            bottom: 0,
            child: SafeArea(
              child: InputChatBar(),
            ),
          ),
        ],
      ),
    );
  }
}

In my case, I have an infinite ListView, and when it renders for the first time it renders as expected, as the ListView is like 10 items length; but when scrolling down to see more texts, the ListView increases its height so the gradient chat bubbles does not update well and forms the unexpected behaviour.

Expected behaviour (First render and on hot-reload)

Unexpected behaviour (After scrolling down some items)

I do not really know if this is the expected behaviour but it seems wrong to me, I think may be it isn't updating itself on scroll as the doc says Each bubble’s gradient changes as the user scrolls because the BubbleBackground widget invokes Scrollable.of(context). This method sets up an implicit dependency on the ancestor ScrollableState, which causes the BubbleBackground widget to rebuild every time the user scrolls up or down

Flutter doctor -v

➜  flutter_app git:(dev) ✗ flutter doctor -v
[✓] Flutter (Channel beta, 2.0.0, on macOS 11.1 20C69 darwin-x64, locale es-ES)
    • Flutter version 2.0.0 at /Users/mabe/development/flutter
    • Framework revision 60bd88df91 (11 days ago), 2021-03-03 09:13:17 -0800
    • Engine revision 40441def69
    • Dart version 2.12.0

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at /Users/mabe/Library/Android/sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    • CocoaPods version 1.10.1

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)

[✓] VS Code (version 1.54.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.20.0

[✓] Connected device (2 available)
    • iPhone 12 Pro Max (mobile) • 379BFD71-5273-483A-A3FF-5B664AEE3662 • ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • Chrome (web)               • chrome                               • web-javascript • Google Chrome 89.0.4389.82

• No issues found!

[raulmabe]

Following what the documentation says, invoking Scrollable.of(context) in the BubbleBackground widget should rebuild every time the user scrolls up or down, but I have noticed my BubbleBackground widgets only rebuild when the ListView causes them to, not because of invoking Scrollable.of(context).

Minimal code to reproduce the behaviour

[raulmabe]

@darshankawar Sorry to bother, but could you update the labels?

[darshankawar]

@raulmabe Thanks for getting back. I think I misread this issue earlier, but now running your code sample on latest beta (2.2.0) gives me below behavior and logs in console:

https://user-images.githubusercontent.com/67046386/118933769-3bbdda00-b967-11eb-9d1f-6932e6d52c36.mov

flutter: 27 rebuilt
flutter: 26 rebuilt
flutter: 25 rebuilt
flutter: 24 rebuilt
flutter: 23 rebuilt
flutter: 22 rebuilt
flutter: 21 rebuilt
flutter: 20 rebuilt
flutter: 19 rebuilt
flutter: 18 rebuilt
flutter: 17 rebuilt
flutter: 16 rebuilt
flutter: 15 rebuilt
flutter: 14 rebuilt
flutter: 13 rebuilt
flutter: 12 rebuilt
flutter: 11 rebuilt
flutter: 10 rebuilt
flutter: 9 rebuilt
flutter: 8 rebuilt
flutter: 7 rebuilt
flutter: 6 rebuilt
flutter: 5 rebuilt
flutter: 4 rebuilt
flutter: 3 rebuilt
flutter: 2 rebuilt
flutter: 1 rebuilt
flutter: 0 rebuilt
flutter: 11 rebuilt
flutter: 12 rebuilt

flutter doctor -v

[✓] Flutter (Channel beta, 2.2.0, on Mac OS X 10.15.4 19E2269 darwin-x64, locale
    en-GB)
    • Flutter version 2.2.0 at /Users/dhs/documents/fluttersdk/flutter
    • Framework revision b22742018b (5 days ago), 2021-05-14 19:12:57 -0700
    • Engine revision a9d88a4d18
    • Dart version 2.13.0

[!] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] VS Code (version 1.55.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.21.0

[✓] Connected device (4 available)
    • Darshan's iphone (mobile)  • 21150b119064aecc249dfcfe05e259197461ce23 •
      ios            • iOS 14.4.1
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729     •
      ios            • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                    •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                                   •
      web-javascript • Google Chrome 90.0.4430.212

! Doctor found issues in 1 category.

Is this still not an expected behavior ?

[raulmabe]

I don't really think this is the expected behaviour, as the doc says:

Each bubble’s gradient changes as the user scrolls because the BubbleBackground widget invokes Scrollable.of(context). This method sets up an implicit dependency on the ancestor ScrollableState, which causes the BubbleBackground widget to rebuild every time the user scrolls up or down

As far as I understand, each bubble should be rebuilt every time the user scrolls up or down to update its background gradient color.

Notice that the bubbles are only rebuilt when the ListView.builder says so, that is why the bubbles get the start and end color of the gradient. When this happens, if you do a hot reload to force every bubble to rebuild, each bubble will get the right color of the gradient.

PD: I may be wrong and this can be the expected behaviour; so correct me if I'm wrong.

[darshankawar]

Thanks for the details. Keeping this issue open for further investigation and updating labels.

[atsansone]

@kevmoo : As the original author of this page, could you shed light on this person's problem? I'm not sure where to begin to resolve this.

[raulmabe]

If I remember right, the issue is calling Scrollable.of(context) is not causing the BubbleBackground widget to rebuild each time the user scrolls. The only rebuilts seen are from the ListView.builder, hence the cookbook is not possible to implement following this recipe.

Scrollable.of(context): This method sets up an implicit dependency on the ancestor ScrollableState, which causes the BubbleBackground widget to rebuild every time the user scrolls up or down