Flutter Responsive UI With Sizer
Hi to everyone, in this article we are going to talk about how to do responsive ui in flutter and what is this.And we are going to use device preview package.
What are we going to learn?
- What is responsive design?
- What is Device Preview?
- What is Sizer and how to use it?
What packages are we going to use?
We will use sizer for responsive ui and device preview for to see our ui in other phones.
What is Responsive Design?
In all apps you need to design your app responsive because maybe you give an height to your sizedBox, it looks very good in your phone but not the others.Maybe on small phones it looks very bad so we need to do our app responsive.There are 2 approaches for responsive:
- Flutter’s own Responsive Widgets:
- AspectRatio
- CustomSingleChildLayout
- CustomMultiChildLayout
- FittedBox
- FractionallySizedBox
- LayoutBuilder
- MediaQuery
- MediaQueryData
- OrientationBuilder
2. Use Developers-made packages:
- responsive_framework
- sizer
- flutter_responsive
- responsive_sizer etc.
What Is Device Preview Package?
Previewing how your app looks or works on different devices.It is hard to look all devices at the same time.You need to create virtual devices and it is not a good thing to do.So in this situation we use device preview package to save us.
And it is very simple to implement.Just wrap your myApp with DevicePreview.It looks like this.
It works in app like this:
What is Sizer?
A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Which means you can write a simple code and it works on every phones, tablets etc. Absolutely brilliant right? :)
I wrote some simple code i will show below and than describe it.
You can see in this code bloc i wrote height with .h, it means i want to %30 height of the screen for sizedBox. This package actually like this. You can give some size numbers and place .h if it is height, width .w, for text size .sp. And sizer do the rest for you. It is simple and clear.
It looks like this on normal phone:
And on tablet page looks like this:
After Login i created listview.builder here is the code:
On tablet:
On phone:
Sizer is a very simple package to do responsive ui and you can see it is very effective.
For codes you can check this link below:
