You say you are great, I do not believe it, I will verify it myself. Here are some attempts to use Flutter.
| App Store Card | Yin Yang Switch | Grid Paper Expansion | Water Wave | Creative Stitching | Sliver AppBar Expansion | Absorb Stack | Future Button | Text Expansion | Scroll View Jump Top | Side Panel | Color Picker | Nav To List View Auto Scroll | Combine List View | Story Swiper | Flutter Web View | Platform View | Fireworks | Custom Grid View | Surround Square View | Follow View | Listenable Test View | Vertical Turn Back List View | Tab Page Linked Scroll View | Tab Bar Expansion | Slider View | Shader Mask Test View | Search Delegate Test View | Positioned Not In Stack View | Bottom Sheet Test View | Animated Scan View | Woven Grid | Scroll View Float | Menu View | Positioned Center View |
Next, let the picture dance.
Realize the animation of the Today tab page card of the Apple App Store.
Use clipper method to achieve irregular shapes.
Expansion of flutter widget GridPaper.
Web demo for Grid Paper Expansion
Combining mathematical trigonometric functions and physical waves to achieve a water wave effect.
Explore the possible feasibility of Flutter in image manipulation.
Web demo for Creative Stitching
Expansion of flutter widget SliverAppBar, suppert after pinned can switch title leading actions and brightness in app bar widget.
If the initial background color and the pinned background color after scrolling big different, the same app bar cannot adapt to the two backgrounds. At this time, you need to automatically switch the appbar to adapt to the new background.
The conversion process has achieved a transparent gradient, which can be viewed in the web demo.
Web demo for Sliver AppBar Expansion
Enable the Stack to respond to gestures at the specified level, remove the restriction of priority response to the outermost layer.
Disable the button before the end of this future response.
Text expand and collapse widget.
Wrap the scroll view so that it scrolls to a certain position and the upward button automatically appears, so it can return to the top of the view.
Web demo for Scroll View Jump Top
Customize the sidebar panel. Simple color picker.
Web demo for Side Panel && Color Picker
Navigate to the listview and automatically scroll to the specified index to the middle of the view.
Web demo for Nav To List View Auto Scroll
In the listview, provide two lists for it, so that the sub-list is inserted into the main list every few items.
Web demo for Combine List View
A very interesting Swiper from UdaraWanasinghe, I expanded on this. Reference By Story Swiper
Web demo for Story Swiper View
A Flutter plugin of that provides a WebView widget. on pub I tried the old version a long time ago and will try the latest version in the future.
The latest version:
Version used this time: 2.0.4
Try host native platform views within Flutter app by Platform view. And communication between the two platforms (use Method Channel)
Flutter -------- Method Channel --------> Native
Native -------- Method Channel --------> Flutter
Everything can be painted. Use CustomPainter to draw a firework.
Implement irregular GridView layout through custom delegate.
Try to customize the RenderObject to achieve the effect.
Try use ScrollController(Listenable) driver Painter.
[ValueListenable]、[ValueNotifier]、[ChangeNotifier]、[Animation]、[AnimationController], these are actually [Listenable]. Listenable is magic that fascinates me.
Web demo for Listenable Test View
A list view between ListView and GridView. Vertical Turn Back List View a special display view.
Web demo for Vertical Turn Back List View
Use the center key provided by CustomScrollView to implement this master-detail scrolling view in a simple and low-cost way.
Web demo for Tab Page Linked Scroll View
Expansion for Tab Bar. Add [tabSpacing]、[tabDecoration]、[direction]、[indicatorPainter], focus on tab decorators and indicator decorators and layout direction.
Web demo for Tab Bar Expansion
A slider that is often seen when adjusting brightness style.
Use shaders with animation to make it fascinating.
Web demo for Shader Mask Test View
For common search behaviors, the flutter official has implemented a set of logic for this. Here, try it by implementing its delegation.
Web demo for Search Delegate Test View
After an exception occurs when Positioned is not included in the Stack. Maybe this solution can solve it.
Web demo for Positioned Not In Stack View
The BottomSheet is not only used in the routing of showModalBottomSheet, for example, it can use own AnimationController driver AnimatedBuilder and FractionalTranslation achieve the same effect on all inside pages.
Web demo for Bottom Sheet Test View
Scan animation implemented using the stops property in the colors gradient of the decoration.
Web demo for Animated Scan View
Web demo for Scroll View Float
Use zero size SizedOverflowBox.
Web demo for Positioned Center View
The inevitable thing is that I also found some issues in Flutter.
Current Dev Evn: Flutter (Channel stable, 3.0.0, on macOS 12.3.1 21E258 darwin-x64, locale zh-Hans-CN)
I have also create some issues, but finally found similar ones, whichever is the earliest.
| Issue ID | Description | About | Status |
|---|---|---|---|
| 24786 | ReorderableListView#onReorder passes an incorrect new index. | ReorderableListView | Closed We've decided not to correct this issue because the obvious fix introduces a backwards incompatibility that can't be automatically corrected. |
| 60594 | The target Hero widget is build three times. | Hero | Closed |
| 13937 | Unable to call a platform channel method from another isolate. | Isolate | Open |
| 59143 | Tabbar initialIndex indicator image not working. | TabBar Indicator Image Decoration | Open |