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
Related
I need the best way to place elements on my Profile page. Everything is explained on the image.
Everything in red does not exists on the app, it's only to understand better
So I used first a Row and inside I placed 3 Expanded Widget. Then inside the second Expanded I used a column for my Name, Bio and Row(3 text with borders). I need that to be optimized on Android and iOS
My questions :
Is Expanded the best way here ? (I want to give a height to the box)
What is the best widget to wrap a text around a box with borders and background colors ?
What is the best way to place the Name at the start of the box while other children are on the middle ?
What is the best way to place the Parameters icon at the top of the box ?
For the profile pic, is the CircleAvatar the best Widget?
Thanks !
Problem summary
I'm building simple animation in which, simply, a panel expands to the right on a onTap event. The layout can be summarized as follows:
The panel has many tiles. Each tile has its own:
leading icon
title text
trailing icon
Each tile, when expanded, shows the three widgets above
Each tile, when shrinked, just shows the leading icon
The panel is scrollable to hold many icons such as these
At the end of the panel there's a simple icon which, when tapped, triggers the "expand" or "shrink" animation
The animation is built with an AnimatedContainer on the panel and a SizeTransition on the single tiles (via one single controller on the parent class)
The problem is simple: when the tiles shrink, their inner text overflows in the row.
Sample code
I just made this reproducible example on DartPad.
The obvious solution isn't helping me out
The most obvious solution is to simply wrap the Text inside a Flexible Widget: this advised by Flutter's docs and it makes sense, but unluckily it completely breaks my Layout.
Flexible introduces a flex factor that in this context is 100% unwanted.
I want my leading icons to be always at the end of the row, so my Spacer widget should "prevail" there.
I can't just play with flex factors there, as it would unintendedly hide text depending on its value.
Another code smell
Another thing I really don't like is the fact that I have to build a controller on the parent class, but I'm not actually using it on the parent class (I'm just exploiting it so I can give it to the children).
I'm new to animations in Flutter so I'm kinda confused on how I should orchestrate the whole thing here.
Any help will be appreciated / upvoted / accepted. Thank you!
As far as I understood you in a right way you just need set sizes for Row inside of SizeTransition instead of Container sizes
Here is your modified sample https://dartpad.dev/?id=a2408d29a1e8c6ce7a1cef8f21e7491d
I'd try an OverflowBox or a FittedBox (wrapping your text), depending on the result you want to achieve.
So I am not looking for filters but I am looking for scroll widget. I have tried generating listview items abd getting position of listview to give items ratio but I wasn't able to get any functionality while in certain index position. Any help would be helpfull. Naming of the widget or special widgets that can make me do this etc.
You can use ListView or ListView.builder to do that, but with circle-shaped widgets as the children.
You can check out this tutorial to do the horizontal list. And you can check out this StackOverflow question, to create a circle button. Or instead of a button, you want to use the CircleAvatar (to add an image in it), you can check out this official doc.
I would like to have a tab bar that looks like this:
Note the center "My ID" button.
So here is my main problem:
Obviously I need a SafeArea to deal with irregular shaped screens, which itself need to be embedded in a Container so I can give the bar its background color. But, by doing this, how can I create the "oversized" button at the center?
After spending several hours banging my head against the wall, found a not so elegant solution. (Hey, but it works)
Here's a picture of the result.
So the way I made it work is actually by having two layers.
On the base of the widget tree is a Stack which contains everything that is currently seen on this page.
The actual bar widget has the text and icons, (the My ID part has only text no icon, but a placeholder SizedBox is used in place of the icon otherwise would be there)
By using the stack, I am able lay the round icon on top of the entire bar much like a FloatingActionButton
How can I make a custom circular progress indicator like the ones in the below image in Flutter? The out of box one does not allow adding text in the center.
Screenshot of Example
I think you have two ways.
first put CircularProgressIndicator and Text widgets into Stack and place them as you want(Text in the center and CircularProgressIndicator cover all stack space). Stack widget is key point here for you to understand...
the second way and more flexible way is to this action with CustomPaint Widget.
this link will help you to achieve the goal...
https://medium.com/#NPKompleet/creating-an-analog-clock-in-flutter-i-68def107d9f4