Open raulmabe opened 3 years ago
raulmabe
commented
3 years ago 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).
raulmabe
commented
3 years ago @darshankawar Sorry to bother, but could you update the labels?
darshankawar
commented
3 years ago @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:
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 rebuiltIs this still not an expected behavior ?
raulmabe
commented
3 years ago 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
BubbleBackgroundwidget invokesScrollable.of(context). This method sets up an implicit dependency on the ancestorScrollableState, which causes theBubbleBackgroundwidget 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
commented
3 years ago Thanks for the details. Keeping this issue open for further investigation and updating labels.
atsansone
commented
1 year ago @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
commented
1 year ago 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
sfshaza2
commented
2 months ago As per https://github.com/flutter/website/issues/10774, remove this recipe after a deprecation period.
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 Viewportso I understand that the viewport height increases when the ListView is infinite (i.e.ListView.builder).Dart code
```dart 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 downFlutter doctor -v
```terminal ➜ 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! ```