Managing Nested Horizontal Lists in Flutter - flutter

So I am at a beginner level in flutter and currently ran into a blocking point , I have 2 singeltons loading 2x jsons then displaying them into my app, the blocking point is that I am currently trying to figure out if I can display the data using Nested ListViews(1 Vertical with Horizontal children).
The problem is I have 50 categories of Item Lists, I use a ListView.builder to build a list of Horizontal Lists,issue is when nesting ListView.builders the Parent ListView.builder builds all the Child lists with 4 elements each and thus there is a delay when loading the screen and when switching pages.
I cannot find a way to manage this in an elegant manner, I would like to find a way to show a loading progress indicator or similar instead of having that delay just show an empty screen, so I would appreciate any suggestions.
My current Build is something like this:
Main Screen: Column -> Widgets[
... Bunch of Widgets(),
CategoryList(),
]
where
CategoryList() is a vertical List built using:
ListView.builder of CategoryListItems()
where
CategoryListItems() is a horizontal List built using :
ListView.builder of CategoryItem() (this is basically a card with text and an Image) ,

Use FutureBuilder to show progress indicator as I am assuming that the processing is being done asynchronously. Return circular progress indicator when the task is not complete.

Related

How interactive can a component be inside of a widget?

my job is to create a few widgets using widgetkit and swiftui, however the main project is build on uikit so I am not very good with swiftUI. Nevertheless, I would like to know whether I can add a graph inside of, for example, medium sized widget, and can the graph be scrollable to reveal more information? Or could it only be clickable? Thank you.
I know how widgets work, just interested in whether it is possible to create a scrollable graph inside of a medium sized widget.
I'm only just getting started with widgets myself, so happy to be corrected. But interactivity with widgets is very limited - effectively to taps and nothing else. They're designed more to be informational displays than interactive user interfaces.
If your widget is larger than the small size (the square one that takes up the same space as 2x2 app icons on the iPhone home screen), you can have multiple tap targets. For example, if your widget had a list of calendar items, you could set it up so that a user tapping on a specific item opened the app with a view showing that item in more detail.
So no, a scrollable graph isn't feasible. But what you can do is create a graph that shows a snapshot of data that a user is most likely to find useful when glancing at their home screen – and making sure that if they tap on it, they go straight through to a more interactive version of the same data.

Flutter how to implement multiple scrolling items is same screen

I have a screen with a column that contains 2 items and a list below.
i want to make the first item (1) always scroll up below the appbar or down, doesn't care if the list is empty or full.
the second item (2) should always be visible while scrolling the list items.
see image how can i implement this in flutter
What I suggest you do is to look at Sliver* series of built-in Flutter classes. They give you a great amount of flexibility when it comes to scrolling behavior. Here is a great documentation that demonstrates what I mean: https://docs.flutter.dev/development/ui/advanced/slivers

SliverList inside SliverList

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)

How to keep the scrolling position when adding a new elements in the top using ListView or CustomScrollView in Flutter

Is it possible to add new elements into the top of the ListVeiw or CustomScrollView and keep the scroll position as it's with Flutter
I've tried the following
extentAfter = _scrollController.position.extentAfter;
_scrollController.jumpTo(_scrollController.position.maxScrollExtent - extentAfter);
but this won't work well with SliverAppBar - floating and its actually not optimal solution.
Actually the cleanest way would be to add those items only when user scrolls back to the top of the ListView. You can cache them in memory for the moment user is far enough from the top (in your case) of the list.

What's the alternative to using a StreamBuilder inside of a column or row?

I am trying to build a page that shows a hierarchy of data. The top of the page is built by passed in data. But the dependencies need to query a db and post their results.
For example Team A has players. Under the heading of team A I want to show a list of players on the team. But if I try to add a streamBuilder as a part of screen, I get all sorts of nasty message about some part of the build process not having a height. Its seems that streamBuilder only works as the highest level widget.
So there must be an alternative for building those widgets, can anyone point me to an example of that being used?
An alternative to a StreamBuilder is FutureBuilder - where you can use a Future callback instead of a Stream to fetch a data snapshot for the children Widgets inside it.
However, if you're getting "unbounded height" errors, this is usually thrown by children Widgets with undefined height inside a ListView or Scrollable widget. You'll be needing to set a height for those List items to fix that error.