CODEWITHSUNDEEP
flutterdartflutter-layoutflutter-widget
Tom3652
Tom3652

Reputation: 2957

Bring widget to front in flutter on touch

I am very new to Flutter and i am coming from Android development and i would like to do something equivalent to the bringToFront() method to put a Widget on top of the "View hierarchy", above the others.

I have 5 Widgets on the same page displayed next to each other and when i touch one of them i would simply like to display it in full screen above the others.

I am using the Stack widget so far but the order is fixed by the Widgets positions within the Stack and i have tried using a dynamic List<Widget> updated in the onPressed() method of each widget. This is very laggy and not what i want.

Is this possible to achieve a very simple bringToFront() when any Widget is touched in Flutter ?

EDIT :

To specify a bit better my structure :

As far as i know the Navigator, it will go to a new page and the animation may not be smooth.

What i have is 4 Container in each angle of the phone + one centered in the middle with a scaled size of 30% of the phone's width.

When i click on one of them, i want to scale it from 0.3 to 1 for a smooth animation and especially make it above all of the others because it is selected.

UPDATE :

My problem with the simple tap gesture is solved by the HeroWidget as @yellowgray suggested.

But i also need to have the scaling of the widget following my finger (GestureDetector). And in this case, the widget is still under others when it grows...

The question is really about making a Widget above others when your finger touches it on the screen, no matter which gesture is performed after.

Upvotes: 4

Views: 4678

Answers (1)

Tom3652
Tom3652

Reputation: 2957

I have found the global answer in this post : Flutter Stack change depth

The trick is to use the GlobalKey() method to identify the Widgets you want to bring to front. In my tests i was creating a new instance.

Hope this helps others.

Upvotes: 3

Related Questions