Shimmer control
#5828
Shimmer control
#5828
Conversation
Introduced a new Shimmer control in both Dart and Python SDKs for building skeleton loaders and animated placeholders. Added implementation, documentation, and usage examples, as well as updated relevant imports, exports, and documentation navigation. The shimmer package was added as a dependency in the Dart project.
Refactored haptic feedback and shake detector examples to simplify control instantiation and management. Introduced a 'services' list to BasePage for managing service controls, improving code organization and extensibility.
Refined visual styles in basic_placeholder.py by adjusting colors, adding icon content, and improving opacity usage. Simplified and standardized block sizing and gradient stops in custom_gradient.py for a more consistent appearance.
Introduced a basic Shimmer control example with corresponding integration test and golden image. Updated the documentation to include the new example and adjusted the code sample in the Shimmer control docstring for consistency.
![sourcery-ai[bot]](https://avatars.githubusercontent.com/in/48477?s=60&v=4){kind=small}
There was a problem hiding this comment.
Pull Request Overview
This PR adds a new Shimmer control to Flet for creating skeleton loaders and animated placeholders. The implementation follows the Flet pattern by wrapping the Flutter shimmer package, providing both gradient-based and color-based shimmer effects.
Key Changes
- New
Shimmercontrol with support for custom gradients, directions, and animation parameters - Added
servicesfield toBasePagefor managing service-like controls - Updated examples to use the new
servicespattern forShakeDetector
Reviewed Changes
Copilot reviewed 16 out of 19 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| sdk/python/packages/flet/src/flet/controls/core/shimmer.py | Main Python implementation of Shimmer control with validation and properties |
| packages/flet/lib/src/controls/shimmer.dart | Flutter/Dart implementation wrapping the shimmer package |
| sdk/python/examples/controls/shimmer/*.py | Three example files demonstrating basic usage, placeholders, and custom gradients |
| sdk/python/examples/controls/shake_detector/basic.py | Updated to use new services pattern |
| sdk/python/examples/controls/haptic_feedback/basic.py | Modified but appears incomplete |
| sdk/python/packages/flet/docs/controls/shimmer.md | Documentation page for the new control |
| packages/flet/pubspec.yaml | Added shimmer dependency (v3.0.0) |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Deploying flet-docs with
|
| Latest commit: |
fa401a9
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://7b7c36f0.flet-docs.pages.dev |
| Branch Preview URL: | https://shimmer.flet-docs.pages.dev |
Updated the 'container' property in SemanticsControl to default to false if not specified. This prevents potential null errors and ensures consistent behavior.
| # just need hold a reference to ShakeDetector in the session store | ||
| page.session.store.set( | ||
| "shake_detector", | ||
| page.services.append( |
There was a problem hiding this comment.
Nice. Will this work for Audio and AudioRec too?
There was a problem hiding this comment.
Also, similar to page.add(), should we have a page.services.add()? so we dont have to call page.update() ourselves.
edit: ah, it wont be easily possible, since page.services is a list.
| "\n" | ||
| "Run this example with:\n" | ||
| " export FLET_SECRET_KEY=<some_secret_key>\n" | ||
| " uv run flet run --web " |
There was a problem hiding this comment.
I think we can safely remove uv run here, to be more general.
|
|
||
| def main(page: ft.Page): | ||
| page.overlay.append(hf := ft.HapticFeedback()) | ||
| hf = ft.HapticFeedback() |
There was a problem hiding this comment.
Please document Service base control, as we discussed, to explain the difference between Services we have, so users understand and know which approach to choose for each Service, and why.
Also, the description/docstring of our custom services should explain or point (through a link) to the approach to be used, explained in the base Service.
There was a problem hiding this comment.
Add integration test for this example?
There was a problem hiding this comment.
Add integration test for this example?
Co-authored-by: Copilot <[email protected]>
Co-authored-by: Copilot <[email protected]>
Removed 'uv run' from the example run command in pick_and_upload.py to simplify the instructions for running the file picker example.
Added new golden images and updated integration tests for Shimmer controls, including tests for basic placeholder and custom gradient examples. Updated documentation to include example images. Introduced 'skip_pump_and_settle' option to FletTestApp and test configuration for more flexible test setup. Fixed image output handling in test utilities.
| screenshots_similarity_threshold: float = 99.0, | ||
| use_http: bool = False, | ||
| disable_fvm: bool = False, | ||
| skip_pump_and_settle: bool = False, |
There was a problem hiding this comment.
Document prop in docstring.
Replaces static PNG images with animated GIFs for shimmer documentation and golden test outputs. Updates documentation references and image generation logic in flet_test_app.py to produce GIFs from PNG frames, improving visual representation of shimmer effects.
Summary by Sourcery
Add a new cross-platform Shimmer control with full Python and Dart implementations, integrate it into the SDK and extension, provide examples, docs, and tests, and refine related examples for consistency.
New Features:
Enhancements:
Documentation:
Chores: