How to make a widget that its children can expand over its parent not in the same stack? - flutter

I have a TextFormField which as I type in it consults a cities database and the results are shown in a ListView just like a Google Maps search box. In a attempt to make the results to hover over other elements I've tried to add the listview in a stack with clip behavior set to "none" and various other configurations but I still couldn't managed to make the results hover over the page. I intend to use it for flutter web and there will be other elements which the search results cannot displace them to fit the query. I could access a parent Stack and pass the position of the TextFormField so I would know where to build the result list but this tinkering its not very straight forward so I was wondering if I could punch a hole in the parent layer from a child to print the result list.

Related

how to avoid the overlapping of many overlay widget - flutter

0
in my case I have a bunch of questions and each question have a list to choose one of the existing answers displayed in overlay widget.
for my list i used an overlay.
the problem is if there is other overlay, they will hide each other same as stack order its child (the last child widget will be overlapping above the other children of stack) the
the result of my code looks like:
before click the first overlay to animate to the big size
after click the overlay widget
I cant use the entry.remove() cause I want the overlay stay shown but only the size will change to small size after user choose one of the displayed answers. (I'm using animatedContainer for that)
I'm looking for a way to make the selected widget overlay above the other overlay widgets
so any suggestions to solve this? or maybe the way of implementation is wrong ? and thanks
something like this (the selected one will always shown at the top)
https://pub.dev/packages/indexed

Flutter alphabetical list from a to z on right side

I want to implement an alphabetical list on the right side of the screen, i don't want to use a packages because they reorder my listview which i want to stay at same order, and i want to implement the onClick on a letter manualy.
So how do i implement this widget and make it stay on the side of the screen
I do NOT quite get when you say, "i don't want to use a packages because they reorder my listview which i want to stay at same order".
However, here is my implementation for your requirement.
https://github.com/thanikad/alphabetical_search.
The UI is arranged using Stack, ScrollablePositionedList, and a Column. Used ScrollablePositionedList to enable the search against the ListView and then jump to the index based on the search letter selected.

How can I create a Column widget with the functionality of an AnimatedListview in Flutter

I have a Column that I need to behave like an AnimatedList would: to animate the widgets when I add or remove them. The reason I can't use AnimatedList (as far as I can tell) is because my children are Cards wrapped in Flexible widgets. I only have 11 of these hard coded cards and I need them all to be visible should the user decide to have all of them "active".
Here's the desired effect but with terrible code:
I'm currently using the provider package to control the column's children. Adding in new Cards is simple enough, as they just run their animation on initState. Removing them involves a convoluted way of triggering the reverse animation, listening for when it finishes and then triggering a function that removes it from the Column.

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

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.