Make SafeArea Responsive in Flutter – Responsive Widget Tutorial

📗 Learn from the written tutorial 👇👇

🎯 The biggest Flutter conference in Europe:

📧 Get Flutter news 📰 and resources:

👨‍💻 Do you write good code? Find out now!

We all know how to use the MediaQuery to get the size of the whole screen's width and height. More often than not though, you don't want to adjust the size of a widget based on the dimensions of the whole screen. The most alarming of example of this need is a SafeArea, where we want to adjust its children not based on the whole screen size, but rather on the "cropped" size of the safe area!

Go to my website for more information, code examples, and articles:

Follow me on social media:

[yoancarlosmachadoespinosa]

Very good tutorials Thank you very much.

[matthewreevesdavis]

Amazing video, thank you! I am pretty new to Flutter so I have a question if you don't mind? How would I access size in an extracted widget nested inside ResponsiveSafeArea?

[maheshbhattarai]

How can we develop not dismissible notification in flutter.Your tutorials are lit. Thank you .

[aytunch]

Hi Matej, Thanks for the tutorial. Quick question: at 03:42 you say we need the context in order to use it inside of MediaQuery. And that's why we need a builder widget(on line 12). However don't we already have the context inside of the build method(on line 7)? Are those two different contexts?

[SullyS]

Thank you for the helpful video, you said that " Size of a widget based on the dimensions of the whole screen that most people know"...well i don't i'm new to coding with zero background...and i need to learn how to do the size for the widget based on the dimensions of the whole screen, so can you please make a video about it soon?

[Fanaro]

Shouldn't this `ResponsiveSafeArea` be a package? I think it would be useful to many people.

[emwagner]

When I have seen constructors, I have never seen @required, just required. Why did you use the @ sign before the required keyword?

[nicoap]

Hi sir, what is extension you use for that white line in your vscode? I mean that white 'L' line at line 8, 9, 11, 13...?

[sergiofranklin]

what "typedef" does here? in which of your tutorial you have explained it?