I am trying to animate many widgets such as Text(), Image.asset() and other stuff when they are visible. I tried multiple libraries for checking visibilty of Widgets inside a SingleChildScrollView() but all solutions were either very complicated or it takes a lot of coding to achieve it for multiple widgets. The question that is most similar to mine is this, but it is simple for one or two widgets, but it will be messy for many Widgets. Can someone help me in achieving this requirement?
Edit:
I found that 'flutter_animate' depends on controllers, such as ScrollController, but no documentation about it was mentioned.
enter link description here
Related
I'm working on a custom calendar package but I'm having some performance difficulties while doing that.
My calendar layout is built from PageViews and each pageview contains a Gridview and each GridView contains 42 children representing the days of the month. Like this:-
Issue -
The problem is with scrolling the pageview. When I scroll to the new PageView the new PageView gets build and it builds its GridView and GridView builds its Children. All these tasks while scrolling leads to jank in scrolling animation.
Note: Scrolling to previous PageViews is smooth because I'm using AutomaticKeepAlives in PageView which stops PageView from rebuilding constantly on scroll.
DartPad -
The example DartPad for the above calendar can be found here - https://dartpad.dev/?id=762d835c5b9acadd785ee9269294c1e6
Now, what I'm looking for are the ways through which I can improve its performance.
Maybe I can somehow reuse the components for GridView children's dates by manually caching them by storing them as fields somewhere. But I don't know if that would work as these date styles have non-constant properties like the trailing one has different colors and the general one has a different one.
Maybe I can somehow preload pageviews in advance? I don't know if that would work when swiping fast.
Also, if it matters, currently I'm using Riverpod in my package for managing the calendar state.
So, if there is any way to improve the performance then please help me with that.
Current dirty solutions I found to this problem are:-
Setting viewportFraction: 0.99 in PageController of PageView. (It will help as it preloads the previous page and forward page). Suggested here #504337877.
Or use this preload_page_view package. Suggested here #636388237.
Currently, flutter doesn't support pre caching the PageView pages in advance but there are several issues about it on Github like this - #31191 , #45632 , and a closed pull request #42107 due to IOS related issue.
I failed to reuse the same widget in multiple places without rebuilding them.
And even if I succeed with the above I might fail to reuse states of child widgets of PageView as changing Pages means the whole child of PageView to be rebuilt as the index is new. So I cannot cache child widgets until I can reuse states in PageView.builder and GridView.Builder. A similar case for ListView is described in #49126.
If I'm wrong about the reusing same widget at multiple places then please correct me with a working small example as I'm more than happy to learn more. You can use this DartPad as starting point. The task is to bring the rebuild of customContainer from 42 to 1.
Not accepted as an answer as there could be more great answers to this in the future.
Consider the case that I have 3 adjacent list view with each list view having a sized widget of some height. Each list view has around 24 child items. I'm trying to scale the widget using onScaleUpdate in GestureDetector.
onScaleUpdate I want to change the height of each child item of all the 3 listviews.
Is rebuilding all child better or should I rebuild the whole widget?
As #Yeasin Sheikh pointed out, using ListView.builder is good because it builds only the needed children (the ones inside the screen and just a few ones outside as precaution). And as to actually answering your question, I'm no Flutter expert, but using ListView.builder I don't think it makes that much difference, Flutter is intelligent enough to solve this by itself.
I've run into large scrolling lists. Sometimes you need to write multiple recursive SliverLists.
I used one package (https://pub.dev/packages/sliver_tools) to solve this problem but you can't use MutliSliverList as Builder.
This doesn't work properly if you have 10,000 items (lazy loading, etc.)
Also, you can't add a background color for Sliver Lists, which is a little problematic.
Let's find a new way to implement this or something like that?
(https://github.com/flutter/flutter/issues/97107)
Hello I have a ListView with different Widgets of different height. Now I want to know which of those Widgets are at the moment visible in the ListView. Does anyone has an idea how to do it. I can't use to scroll_to_widget package because it interferes other implementations.
Try using https://pub.dev/packages/visibility_detector maybe you can create a separate list and store true according to index, based on their visibility?
I have two questions with and "if" regarding the first question. As the title says I know it's better to have one MaterialApp in an App in Flutter and making Scaffold widgets for screens. But in a situation like this App which I followed for learning purposes and it's really written well and very clean. but it uses "TabBarView" as a default home for the entire app. So if I want to add another screen like "LoginSreen" that's not part of the "TabBarView" it's not inheriting the "MaterialApp" widget features. So I have to add a "MaterialApp" widget independently for that screen.
So the question is, is it ok to have two "MaterialApp" widgets in a situation like this?
if yes does it affect any variables that's shared among the screens like "SharedPreference"? or what does it affect?
If it's a bad behavior to have two "MaterialApp" widgets to in an App, Then how can you get rid of the "NavScreen()" and implement the TabBarView in the screens, Because I have tried many ways and looked at many of open source projects like this they have "TabBarView" widget as the body and start of the project.
yes you can definitely have two mat apps. but its not recommended.