-
Notifications
You must be signed in to change notification settings - Fork 29.5k
Feat: Add carousel view builder #172837
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feat: Add carousel view builder #172837
Conversation
c7eb95c to
cbe7647
Compare
a7db48f to
d9c0832
Compare
QuncCccccc
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Instead of introducing 2 more constructor methods, can we just add itemBuilder to the existing methods?
Yes, that's certainly possible. However, I'd recommend maintaining consistency with the established patterns, as widgets like ListView and PageView follow this same approach. Should we still do this change? |
|
I see. Then I think this way sounds good to me! I'll take another look today:)! |
| itemBuilder = null, | ||
| itemCount = null; | ||
|
|
||
| /// Creates a scrollable carousel with items created on demand. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe
| /// Creates a scrollable carousel with items created on demand. | |
| /// Creates a scrollable carousel with fixed-sized items created on demand. |
| /// Will be called only for indices greater than or equal to zero and less than [itemCount]. | ||
| /// | ||
| /// Must return a non-null widget for valid indices. | ||
| final Widget Function(BuildContext, int)? itemBuilder; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe create a typedef CarouselItemBuilder = Widget Function(BuildContext, int)? so here would look simper:) typedef should be placed on the top of this file.
| ? (BuildContext context, int index) => _buildCarouselItem(index) | ||
| : (BuildContext context, int index) => _buildCarouselItem(index); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This return the same no matter widget.itemBuilder is null or not?
|
|
||
| final bool hasFlexWeights = _carouselState!._flexWeights?.isNotEmpty ?? false; | ||
| index = index.clamp(0, _carouselState!.widget.children.length - 1); | ||
| final int itemCount = |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
If we use the lazy loading constructors, and if widget.itemCount is not specified, itemCount will default to 0 and then index.clamp(0, itemCount - 1) will have an invalid upper limit.
| int leadingIndex = carouselState._consumeMaxWeight ? index : index - maxWeightIndex; | ||
| leadingIndex = leadingIndex.clamp(0, _carouselState!.widget.children.length - 1); | ||
| final int itemCount = carouselState.widget.itemCount ?? carouselState.widget.children.length; | ||
| leadingIndex = leadingIndex.clamp(0, itemCount - 1); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Same here.
d9c0832 to
0d208c7
Compare
|
@QuncCccccc Updated PR based on all your feedback. |
QuncCccccc
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM with nits. Thanks for your contribution:)
| expect(secondItemWidth, surfaceWidth * secondWeight / totalWeight); | ||
| }); | ||
|
|
||
| testWidgets('CarouselView.builder creates items lazily', (WidgetTester tester) async { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can we also add one more unit test for CarouselView.buildWeighted?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure. will add..
| /// This example shows how to create a weighted carousel with lazy loading: | ||
| /// | ||
| /// ```dart | ||
| /// CarouselView.buildWeighted( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe CarouselView.weightedBuilder? Just to be consistent with others.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure, will update.
0d208c7 to
7c87bb4
Compare
QuncCccccc
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM.
carousel_test.dart might need to reformat to fix the linux_analyze test
justinmc
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks for writing this. I think this is a pretty cool use of Carousel and I'm glad we're going to support it.
I'm curious about what the story is here for an infinite carousel. Is it supported? I left some comments in the docs about my confusion over when itemBuilder should return null. I think knowing whether infinite carousels are supported will inform how we should explain those things in the docs. Also if they are supported, could you add a test for an infinite carousel too?
| /// The [itemBuilder] should return null if asked to build an item with an | ||
| /// index greater than or equal to [itemCount]. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Elsewhere your docs say that this will never happen though?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yup, forgot to update doc. This was for initial implementation.
| /// Will be called only for indices greater than or equal to zero and less than [itemCount]. | ||
| /// | ||
| /// Must return a non-null widget for valid indices. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Below you say:
If null, the carousel will continue to build items until [itemBuilder] returns null.
Does that contradict these two sentences?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think my intention was different but updating to make it simple.
| await tester.pump(); | ||
|
|
||
| // Should have built new items, not the initial ones. | ||
| expect(builtItems.isNotEmpty, isTrue); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think you can do something like this and get a better error message when a failure happens:
expect(builtItems, isNotEmpty);7c87bb4 to
a504486
Compare
|
I don't think currently infinite carousel is supported, but I am planning. to add support for that once this get merged. |
| /// This example shows how to create a carousel with 1000 items using lazy loading: | ||
| /// | ||
| /// ```dart | ||
| /// CarouselView.builder( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could these be extracted to actual samples that have tests and are interactive in the API docs?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Sure, I have updated API docs.
a504486 to
1041be3
Compare
1041be3 to
97f99b0
Compare
Piinks
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM, thank you for converting those samples!
| /// This example shows how to create a carousel with 1000 items using lazy loading: | ||
| /// | ||
| /// ** See code in examples/api/lib/material/carousel/carousel.1.dart ** | ||
| /// {@end-tool} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: you could add a See also: here that refers to the other constructors.
| /// }, | ||
| /// ) | ||
| /// ``` | ||
| /// {@end-tool} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: ++ for See also breadcrumbs.
97f99b0 to
1c965c9
Compare
Roll Flutter from 908012d58baa to e11e2c11288b (39 revisions) flutter/flutter@908012d...e11e2c1 2025-10-08 vegorov@google.com Configure FfiNative resolver on dart:io (flutter/flutter#176621) 2025-10-08 fluttergithubbot@gmail.com Marks Linux_pixel_7pro service_extensions_test to be unflaky (flutter/flutter#176700) 2025-10-08 matt.boetger@gmail.com Keyboard Animation Fix (flutter/flutter#176418) 2025-10-08 34465683+rkishan516@users.noreply.github.com Feat: Add carousel view builder (flutter/flutter#172837) 2025-10-08 engine-flutter-autoroll@skia.org Roll Skia from d10a0d877ff4 to ea7cdbc6b986 (15 revisions) (flutter/flutter#176686) 2025-10-08 engine-flutter-autoroll@skia.org Roll Fuchsia Linux SDK from jJr3my9C6TwYWPygi... to xrIAL91ngrd-wNr9S... (flutter/flutter#176682) 2025-10-08 bruno.leroux@gmail.com Fix InputDecoration helper/error padding is not compliant (flutter/flutter#176353) 2025-10-08 sokolovskyi.konstantin@gmail.com Fix PopupMenu does not update when PopupMenuTheme in Theme changes. (flutter/flutter#175513) 2025-10-07 iinozemtsev@google.com Roll Dart SDK to 3.10.0-290.1.beta (flutter/flutter#176629) 2025-10-07 bkonyi@google.com [ Tool ] Output `app.dtd` and `app.devTools` in machine mode (flutter/flutter#176655) 2025-10-07 15619084+vashworth@users.noreply.github.com Rename UIScene integration test projects and fix Xcode compatibility (flutter/flutter#176635) 2025-10-07 21270878+elliette@users.noreply.github.com Selecting an implementation widget with the on-device inspector opens the code location for the nearest project widget (flutter/flutter#176530) 2025-10-07 32538273+ValentinVignal@users.noreply.github.com Migrate to `WidgetStateInputBorder` (flutter/flutter#176386) 2025-10-07 34871572+gmackall@users.noreply.github.com Make it clear that you need to install clangd in VSCode intellisense c++ config (flutter/flutter#176609) 2025-10-07 paulberry@google.com Bump the customer tests to pick up an update to Zulip's tests. (flutter/flutter#176463) 2025-10-07 engine-flutter-autoroll@skia.org Roll Packages from d3ef88b to 8ca6416 (2 revisions) (flutter/flutter#176633) 2025-10-07 15619084+vashworth@users.noreply.github.com Add fallback for 'scene:willConnectToSession:options' (flutter/flutter#176580) 2025-10-07 engine-flutter-autoroll@skia.org Roll Skia from d09786dfb854 to d10a0d877ff4 (11 revisions) (flutter/flutter#176616) 2025-10-07 bkonyi@google.com [ Widget Preview ] Rework UI and theming (flutter/flutter#176581) 2025-10-07 15619084+vashworth@users.noreply.github.com Handle FlutterEngine registration when embedded in Multi-Scene apps (flutter/flutter#176490) 2025-10-07 robert.ancell@canonical.com Fix code style in Linux embedder template (flutter/flutter#176256) 2025-10-07 15619084+vashworth@users.noreply.github.com Add tooling to migrate to UIScene (flutter/flutter#176427) 2025-10-06 danny@tuppeny.com Bump customer tests.version to 986c4326b4e4bb4e37bc963c2cc2aaa10b943859 (flutter/flutter#176594) 2025-10-06 43959652+TDuffinNTU@users.noreply.github.com Fix typo in pages.dart (flutter/flutter#176438) 2025-10-06 34465683+rkishan516@users.noreply.github.com Fix: Update anchorRect for overlayBuilder when anchor moves (flutter/flutter#169814) 2025-10-06 engine-flutter-autoroll@skia.org Roll Fuchsia Linux SDK from Zm6K_3gP3VCaMy9rH... to jJr3my9C6TwYWPygi... (flutter/flutter#176591) 2025-10-06 eternalkaif@gmail.com Fix deprecated configureStatusBarForFullscreenFlutterExperience for Android 15+ (flutter/flutter#175501) 2025-10-06 30870216+gaaclarke@users.noreply.github.com updates docs for flutter engine footprint (flutter/flutter#176217) 2025-10-06 bkonyi@google.com [ Widget Preview ] Fix `WidgetInspectorService` override (flutter/flutter#176550) 2025-10-06 bruno.leroux@gmail.com Fix NavigatorBar lacks visual feedback (flutter/flutter#175182) 2025-10-06 engine-flutter-autoroll@skia.org Roll Packages from e401aeb to d3ef88b (4 revisions) (flutter/flutter#176582) 2025-10-06 engine-flutter-autoroll@skia.org Roll Dart SDK from 898380a41c90 to 6b0193498f09 (2 revisions) (flutter/flutter#176576) 2025-10-06 engine-flutter-autoroll@skia.org Roll Skia from bc7cf194f4ee to d09786dfb854 (1 revision) (flutter/flutter#176577) 2025-10-06 jason-simmons@users.noreply.github.com Roll vulkan-deps to a9e2ca3b (flutter/flutter#176322) 2025-10-06 15619084+vashworth@users.noreply.github.com Add an AppDelegate callback for implicit FlutterEngines (flutter/flutter#176240) 2025-10-06 engine-flutter-autoroll@skia.org Roll Skia from 45191c22b15c to bc7cf194f4ee (2 revisions) (flutter/flutter#176572) 2025-10-06 bkonyi@google.com [ Widget Preview ] Fix type error when retrieving flags from persistent preferences (flutter/flutter#176546) 2025-10-06 engine-flutter-autoroll@skia.org Roll Skia from 1fd0ca1f2120 to 45191c22b15c (3 revisions) (flutter/flutter#176556) 2025-10-05 engine-flutter-autoroll@skia.org Roll Dart SDK from 016a8c0045fd to 898380a41c90 (1 revision) (flutter/flutter#176549) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-packages Please CC muhatashim@google.com,stuartmorgan@google.com on the revert to ensure that a human is aware of the problem. ...
Add carousel view builder named constructor
Fixes: #170692
Pre-launch Checklist
///).