OverlayPortal (Widget of the Week)

OverlayPortal is a widget that simplifies creating overlays in Flutter.
OverlayPortal documentation → goo.gle/47QICVi
Get more tips → goo.gle/Flutte...
Subscribe to Flutter → goo.gle/FlutterYT
#Flutter #WidgetOfTheWeek

[@flutterdev]

Subscribe to Flutter → goo.gle/FlutterYT

[@ulasbirsozu4940]

Nice to see widget series again! Game development things are cool but not practical and u guys should make more "daily usacase" videos. For example performance tricks, advanced usage of widgets, more in depth etc. I think many devs are looking something like that. Good luck and looking forward!

[@venir_dev]

Oh my god, I can't believe i lost hours trying to make `Overlay` work, just to see there was this widget available. This is huge

[@Tarek360]

Mostly the child position needs to be relative to its parent. Will be helpful to have the parent bounds in the overlyChildBuilder().

[@nidalbakir4720]

see, CompositedTransformTarget and CompositedTransformFollower.

[@TarrenHassman]

Found this in the overlayPortal docs' see also section: CompositedTransformFollower, which can be used to position the overlay child in relation to the linked CompositedTransformTarget widget.

[@Mempler]

this is one of the things i unironically need just now.

[@laudijksterhuis]

Amazing, exactly what I needed

[@lukas.pierce]

Nice, I was just recently looking for something like this

[@kalilbarry3773]

Niiice ! Been a few days I've been looking for something like this to make a Notion type "Context Menu"

[@glrbrasil]

I needed this for a website I built a while ago, it's going to save a lot of time.

[@sirk3v]

been using some really crazy hacks with the stack widget, thanks a lot, this is exactly what we needed

[@rhet-t7h]

just saw this on twitter and thought how this widget has made it easier for the new user orientation process on using the app

[@Gabeyre]

This is way overdue! When was this introduced? We had to resort to community packages in the past and they didnt always work well.

[@aadnsdiy6287]

Super helpful, this simplifies things a lot. Thank you!

[@fluxpert]

That's awesome. We can use it in the Onboarding Screen of App to show tips and how to use things like things. Awesome. There are many more usages 0:59

[@jeromearenas8028]

Does it handles overlay transition?

[@xXxBladeStormxXx]

The music at the end makes me think of Riders on the Storm by The Doors.

[@izazahamed7173]

We can show this in the stack what's the usecase

[@alexw1306]

Can we somehow use this also as an alternative for stack? Or are the use cases totally different?

[@ezeaguprincewill7005]

Wow! Thanks for the info

[@waqasroy5801]

I was searching this from last 2 days hahaha Ohh Allah, ❤️❤️❤️😍 Thanks Flutter Team💗

[@ХүрэлхуягМ]

Can we make it relative to parent widget?

[@sqrlware]

I've been using visibility and stack widget but now i know

[@devkasunlakshitha]

Really useful widget ❤

[@fluxpert]

Explanation is Good 1:13

[@athulv9476]

Does this appear above the appbar also?

[@lesleysin3344]

I want develop flutter with this team ❤

[@raglandasir6885]

It is open source

[@mcgyverbasaya6748]

wow very nice widget

[@dawidoszubski3440]

What is a diff between this and a stack

[@jlnrrg5864]

Stack is within the widgets boundary, overlay is not bound by it

[@TarrenHassman]

Imagine a row of Cards that hold stack widgets. When you click the card you want a tooltip to pop up that extends past the border of the Card. Overlay portal is for that

[@athulv9476]

Does this appear above the appbar also?

[@ulasbirsozu4940]

​ @athulv9476 Does not matter what widget it is, basically it portals given widget where ever you want within the widget boundaries

[@allenrichardyeager8449]

This is what i waiting for.

[@jay87529]

Awesome!!

[@uzixCode]

Add overlay portal inside the overly portal then so on

[@saqqara6361]

So cool!

[@jacksonlee3616]

Wow, this is what I need... currently I have a stack at the highest level

[@gizemmalcok]

Awesome 💙

[@SaiyanJin85]

I don't get it

[@chasingcharbo]

1:16

[@anlumo1]

Well, that's one thing that's simply impossible with CSS.

[@dushes_botalov]

Nice 😍

[@HelloWorld-fh2ge]

GREAT

[@LukaLunin-t3q]

Сделал сотку но лимиты не дают больше, сейчас 7 рублей на дороге не лежат

[@01adindadavinaalmecca38]

cool!

[@yusufnadaroglu4108]

Finally!!!!!

[@SKTTWkartrider]

position: absolute;

[@anlumo1]

No, more like position:fixed;, but with attachment to the parent.

[@MrPanksi]

@anlumo1 Meaning, position: absolute; 😂

[@ganeshdevkar9155]

Hello core2web

[@arabmidia]

Goood

[@kumailraza260]

👍

[@borneoviral6379]

lol just like kivy FloatLayout

[@MrMEEDO92513]

First time ⌚

[@lorrimang]

Terrible naming. IDK it seems like someone has been trying to sabotage Flutter right from the beginning, from the horrible docs and tutorials to the horrific naming. A portal is like something to another place or language, eg. a frame for a video overlay or webview etc. This is NOT a portal.

[@shazmunchdylbertoid]

seems intuitive to me. it's an overlay but includes an element that provides an anchor/method of accessing the overlay.. calling that the overlay portal seems logical. naming things something that's intuitive to a range of people is one of the hardest challenges in programming, I think the flutter team is doing better than most

[@ProbeOfTech]

Very Useful!!

[@flipside-games]

how can you make the position relative instead of absolute?