Handling various screen sizes with Flutter

Transcript

1. Handling various screen sizes with Flutter Google Developer Space
2. 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 sutun1020@gmail.com
3. 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
4. Responsive UI for different screen sizes
5. MediaQuery LayoutBuilder OrientationBuilder SafeArea AspectRatio Flexible These are some of widgets in Flutter that especially come in handy for responsive design. Expanded FractionalSizedBox
6. Media Query Includes the MediaQueryData property. Returns information about the app’s window.
7. Media Query Half of the screen width 30% of the screen width
9. 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
10. SafeArea Wrap body in Scaffold
11. SafeArea Specify which dimensions you want:
12. FractionallySizedBox Here is an example of a button with 70% of the parent container’s size:
13. 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.
14. Expanded & Flexible
15. Expanded
16. Flexible Flexible does not require the child to fill the available space.
17. Flexible
18. Handling Portrait and Landscape Orientations
19. Orientation builder Change the UI based on the orientation of the parent widget.
20. Let’s see a real usecase of OrientationBuilder
23. Do you have any questions? Thank you! Email Address suthwethwetun@gmail.com