Handling
various
screen sizes
with Flutter
Google Developer Space
Slide 2
Slide 2 text
Su Thwe Thwe Tun
Android Developer,
@Greenlight, USA
I’m passionate about building mobile apps to achieve
easier and better lifestyles in our everyday lives.
I have been working as a mobile developer for 9 years
with Android and Flutter.
Currently, I'm attending Master's degree and working in
USA.
Email Address
[email protected]
Slide 3
Slide 3 text
Handling Portrait and Landscape Orientations
Handling various screen sizes with Flutter
Responsive UI for different screen sizes
Today, I am going to talk about how to use flutter widgets for
Slide 4
Slide 4 text
Responsive UI
for different
screen sizes
Slide 5
Slide 5 text
MediaQuery
LayoutBuilder
OrientationBuilder
SafeArea
AspectRatio
Flexible
These are some of
widgets in Flutter
that especially
come in handy for
responsive design.
Expanded
FractionalSizedBox
Slide 6
Slide 6 text
Media Query
Includes the MediaQueryData property.
Returns information about the app’s window.
Slide 7
Slide 7 text
Media Query
Half of the screen width
30% of the screen width
Slide 8
Slide 8 text
No content
Slide 9
Slide 9 text
SafeArea
Avoid widgets such as the status bar, notches, navigation bar, etc.
It is basically a padding widget, would add padding around the app, as
required.
Without Safearea With Safearea
Slide 10
Slide 10 text
SafeArea
Wrap body in Scaffold
Slide 11
Slide 11 text
SafeArea
Specify which dimensions you want:
Slide 12
Slide 12 text
FractionallySizedBox
Here is an example of a button with 70% of the parent container’s size:
Slide 13
Slide 13 text
Expanded & Flexible
Expanded widget is a widget that expands a child inside a Row or a
Column.
Flexible widget is basically the same as the Expanded widget, but there is
a slight difference.
Slide 14
Slide 14 text
Expanded & Flexible
Slide 15
Slide 15 text
Expanded
Slide 16
Slide 16 text
Flexible
Flexible does not require the child to fill the available space.
Slide 17
Slide 17 text
Flexible
Slide 18
Slide 18 text
Handling Portrait
and Landscape
Orientations
Slide 19
Slide 19 text
Orientation builder
Change the UI based on the orientation of the parent widget.
Slide 20
Slide 20 text
Let’s see a real usecase of OrientationBuilder
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Do you have any
questions?
Thank you!
Email Address
[email protected]