Wednesday, June 10, 2020

Flutter - Adapt UI to different screen sizes


What is flutter?

If you are here, you probably have a good idea about what flutter is. Before reading this article, let me tell you that flutter allows you to have full control over every pixel of data displayed on the screen.

What this article is about?

Did you ever encounter a problem with the flutter UI when testing it on different screen sizes or you sometimes notice that the UI is entirely unlike when you run the application on the real device?
In this article, I'm going to solve these problems for you in the simplest way possible.

How can we fix this?

In this article, I am going to use flutter_screenutil, A flutter plugin for adapting screen and font size. And let your UI display a reasonable layout on different screen sizes!

I will also provide you with the piece of code that you can simply copy or paste in all your applications to make your world simpler.

Coding Part

Add Dependency

Please check the latest version on the site before installing
 dependencies:  
  flutter:  
   sdk: flutter  
  # add flutter_screenutil  
  flutter_screenutil: ^1.0.2  

Add the following import to your dart class.
 import 'package:flutter_screenutil/flutter_screenutil.dart';  

Direct Code


Now, whenever you need to provide sizing property to any widget just use Sizes.syour_size, and whenever you need to deliver sizing property to fonts only use FontSize.syour_size. For example, you need to provide 30 height to the widget Container you simply need to use Sizes.s30 in place of just 30 and similarly for fonts as well, i.e. use FontSize.s16 when you need a font of size 16.

Explanation


First, I initialized the default screen width and height which can be updated according to different screen sizes using the conditional checks using MediaQuery widget and then initialize it with ScreenUtil.instance and allow font scaling as true so that we can adjust it according to different screen sizes. If the app observes any change in screen sizes it adjusts all the sizes accordingly using the different functions defined in the class.

I have also declared the default sizes for the most widely used widgets in the flutter.

For the sample project using this concept visit my repository here.

Conclusion

We learned about how we can use a flutter_screenutil plugin to adjust the UI of the application according to different screen sizes of the screen. However, if you found this article useful consider bookmarking it.

Do you want more such articles in the future?
Previous Post
Next Post

post written by:

Hi, Navjyot Singh is a coder, content maker and a freelance developer who's pursuing an undergraduate Engineering degree in Computer Science. He started out as a web developer but later picked up the mobile as his favourite platform to develop applications. A Writer by day and coder by night is loathed to discuss himself as the third person but can be persuaded to do so from time to time.

0 comments: