Flutter Scale UI according to different screen sizes

Since we have full control on all the pixels, we might want to draw a rectangle like this.

Container(
 height: 60,
 width: 80,
),

We have a rectangle, but now, look at what happens if we display it on an iPhone 5s (4″ Display) and on an iPhone XS Max (6,46″ Display).

You can Download Source Code via Github.

got it, but how can I fix it?

Start creating a new dart file called ‘size_config.dart’, within it, define the SizeConfig class.


import 'package:flutter/widgets.dart';

class SizeConfig {
   	static MediaQueryData _mediaQueryData;
	static double screenWidth;
	static double screenHeight;
	static double blockSizeHorizontal;
	static double blockSizeVertical;
			
	static double _safeAreaHorizontal;
	static double _safeAreaVertical;
	static double safeBlockHorizontal;
	static double safeBlockVertical;
			
	void init(BuildContext context) {
	_mediaQueryData = MediaQuery.of(context);
	screenWidth = _mediaQueryData.size.width;
	screenHeight = _mediaQueryData.size.height;
	blockSizeHorizontal = screenWidth / 100;
	blockSizeVertical = screenHeight / 100;
				
	_safeAreaHorizontal = _mediaQueryData.padding.left + 
	_mediaQueryData.padding.right;
	_safeAreaVertical = _mediaQueryData.padding.top 
         +_mediaQueryData.padding.bottom;
	safeBlockHorizontal = (screenWidth -
	_safeAreaHorizontal) / 100;
	safeBlockVertical = (screenHeight -_safeAreaVertical) / 100;
	}
}

This is all that’s left to do is to instantiate this object in your home screen.

@override
Widget build(BuildContext context) {
 return Center(
  child: Container(
   height: SizeConfig.blockSizeVertical * 20,
   width: SizeConfig.blockSizeHorizontal * 50,
   color: Colors.orange,
  ),
 );
}

main.dart

import 'package:flutter/material.dart';
import 'package:scale_ui/SizeConfig.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Scale UI to different multiple display sizes',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Scaffold(
      body: Center(
        child: Container(
          height: SizeConfig.safeBlockVertical * 25,
          width: SizeConfig.safeBlockHorizontal * 40,
          color: Colors.yellow,
        ),
      ),
    );
  }
}

class TextScalePage extends StatefulWidget {
  @override
  _TextScalePageState createState() => _TextScalePageState();
}

class _TextScalePageState extends State<TextScalePage> {
  @override
  Widget build(BuildContext context) {
    SizeConfig().init(context);
    return Scaffold(
      body: Center(
        child: Text(
          'Scaling text!',
          style: TextStyle(
            fontSize: SizeConfig.safeBlockHorizontal * 10,
          ),
        ),
      ),
    );
  }
}

You can Download Source Code via Github.

649 Replies to “Flutter Scale UI according to different screen sizes”

  1. These are genuinely wonderful ideas in concerning blogging. You have touched some pleasant things here. Any way keep up wrinting. Dorris Ave Canute

  2. I have read so many articles or reviews about the blogger lovers except this article is actually a pleasant piece of writing, keep it up. Clareta Pavlov Myron

  3. I visit each day a few sites and information sites to read content, except this website provides feature based articles. Jacquelynn Kareem Ardyth

  4. What’s Going down i am new to this, I stumbled upon this I
    have found It absolutely helpful and it has helped me out loads.
    I am hoping to contribute & help different users like
    its aided me. Good job.

  5. We’re a group of volunteers and starting a new scheme in our community.
    Your web site offered us with valuable info to work on. You have done a formidable activity and our whole community might be
    thankful to you.

  6. Great blog you have here but I was wanting to know if you knew of any community forums that cover the
    same topics talked about in this article? I’d really love to be a
    part of group where I can get feedback from other knowledgeable people that share the same interest.
    If you have any recommendations, please let me know.
    Many thanks!

  7. I really love your blog.. Excellent colors &
    theme. Did you build this web site yourself?
    Please reply back as I’m wanting to create my own personal site and would love to find out where you got this from or what the
    theme is named. Appreciate it!

  8. I got this web site from my buddy who shared with me on the topic of
    this web page and now this time I am browsing this
    web page and reading very informative articles at this place.

  9. I really like what you guys tend to be up too.
    This kind of clever work and coverage! Keep up the superb works guys I’ve
    included you guys to blogroll.

  10. Everything is very open with a very clear description of the challenges.
    It was truly informative. Your website is very useful.
    Thank you for sharing!

  11. Wow, wonderful blog layout! How long have you been blogging
    for? you made blogging look easy. The overall look of
    your site is wonderful, let alone the content!

  12. I’ve been surfing online more than 4 hours today, yet I never found any
    interesting article like yours. It’s pretty worth enough for me.
    Personally, if all site owners and bloggers made good
    content as you did, the web will be much more useful than ever before.

  13. It’s perfect time to make some plans for the future
    and it’s time to be happy. I’ve read this post
    and if I could I wish to suggest you some interesting things or advice.

    Maybe you could write next articles referring to this article.
    I desire to read more things about it!

  14. Hey there! Someone in my Myspace group shared this site with us so I came to look it over.
    I’m definitely enjoying the information. I’m book-marking and
    will be tweeting this to my followers! Fantastic blog and amazing design.

  15. It is the best time to make a few plans for the
    long run and it is time to be happy. I have learn this put up and
    if I may I want to recommend you few interesting things or advice.
    Maybe you could write next articles referring to
    this article. I wish to learn more things approximately it!

  16. Hello there! This article couldn’t be written much better!
    Looking through this article reminds me of my previous roommate!
    He always kept preaching about this. I’ll forward this post to him.
    Pretty sure he will have a very good read. Thank you for sharing!

  17. My spouse and I stumbled over here coming from
    a different page and thought I might check things out.
    I like what I see so now i’m following you. Look forward to checking out your web page repeatedly.

  18. I simply couldn’t go away your web site before suggesting that I extremely enjoyed the usual information a person supply for your visitors? Is going to be back incessantly in order to investigate cross-check new posts.

  19. Its like you learn my mind! You seem to understand a
    lot about this, such as you wrote the e book in it or something.

    I think that you simply can do with a few p.c. to drive the message home
    a little bit, however other than that, this is magnificent blog.
    An excellent read. I’ll definitely be back.

  20. Outstanding post however I was wondering if you could
    write a litte more on this subject? I’d be very thankful if you could elaborate a
    little bit more. Bless you!

  21. Hi! I’m at work surfing around your blog from my new iphone!
    Just wanted to say I love reading through your blog and
    look forward to all your posts! Carry on the superb work!

  22. Pretty nice post. I simply stumbled upon your weblog and wanted to mention that I have
    really loved surfing around your weblog posts. After all I will be subscribing on your rss feed and I’m hoping you write again very soon!

  23. It’s really a cool and useful piece of information. I’m glad that you shared this useful information with us. Please stay us up to date like this. Thank you for sharing.

  24. I have been surfing online more than 4 hours today, yet I never
    found any interesting article like yours. It’s pretty worth
    enough for me. Personally, if all webmasters and bloggers made good content as
    you did, the net will be much more useful than ever
    before.

  25. magnificent put up, very informative. I’m wondering why the opposite experts of this sector don’t understand this.

    You should continue your writing. I am confident, you have a huge readers’ base already!

  26. Hey there! I’ve been reading your site for a while now and finally got the bravery to go ahead and give you a shout out from New Caney Tx! Just wanted to tell you keep up the excellent job!

  27. whoah this blog is great i like studying your posts.
    Keep up the great work! You recognize, many individuals are searching around for this info, you can aid them
    greatly.

  28. It is in reality a nice and useful piece of info. I’m glad that you simply shared this useful information with us. Please stay us up to date like this. Thank you for sharing.

  29. I don’t even know the way I finished up here, but I thought this submit used to be
    great. I do not recognize who you might be but certainly you’re going to a famous blogger in the event you are
    not already. Cheers!

  30. It is truly a nice and useful piece of info.
    I am happy that you shared this useful information with us.
    Please stay us up to date like this. Thanks for sharing.

  31. This is very interesting, You are a very skilled blogger.
    I have joined your feed and look forward to seeking more of your wonderful post.
    Also, I have shared your website in my social networks!

  32. What’s up everyone, it’s my first go to see at this web page, and post
    is actually fruitful designed for me, keep up posting these types of articles.

  33. Very nice post. I just stumbled upon your weblog and wanted to say that I have really loved browsing your blog posts. After all Ill be subscribing in your feed and I am hoping you write again very soon!

  34. Hi! I’m at work surfing around your blog from my new iphone 4! Just wanted to say I love reading your blog and look forward to all your posts! Keep up the superb work!

  35. We’re a group of volunteers and starting a new scheme in our community.
    Yourr website offered us with valuable information to work on. You have done a formidable job and
    our whole community will be grateful to you.

  36. You made some decent points there. I looked on the net for additional
    information about the issue and found most people will go along with your views on this site.

  37. Hey! I’m at work browsing your blog from my new iphone 4!
    Just wanted to say I love reading your blog and look forward to all your posts!
    Carry on the excellent work!

  38. We are a bunch of volunteers and opening a brand new scheme in our community.
    Your website provided us with helpful info to
    work on. You’ve done a formidable activity and our whole neighborhood shall be grateful to you.

  39. I must thank you for the efforts you’ve put in writing this site.

    I am hoping to see the same high-grade content from you in the
    future as well. In fact, your creative writing abilities has encouraged me to get my own blog now 😉

  40. Good day very cool site!! Mann .. Excellent ..
    Superb .. I’ll bookmark your website and take the feeds also?

    I’m satisfied to search oout a lot of helpful info here wihin the post,
    we need develop extra techniques on this regard, thank
    you for sharing. . . . . .

  41. Howdy! This blog post could not be written any better!
    Looking at this article reminds me of my previous roommate!
    He always kept talking about this. I’ll forward this information to him.
    Fairly certain he’ll have a good read. I appreciate you for
    sharing!

  42. you are truly a good webmaster. The website loading
    velocity is amazing. It seems that you are doing any unique trick.
    In addition, The contents are masterwork. you have performed a excellent activity in this topic!

  43. Thanks for one’s marvelous posting! I truly enjoyed reading it, you happen to
    be a great author.I will be sure to bookmark your blog and will often come back in the foreseeable future.
    I want to encourage you continue your great posts, have a nice holiday
    weekend!

  44. What’s up it’s me, I am also visiting this website on a regular basis, this web site
    is actually good and the visitors are actually sharing
    nice thoughts.

  45. Wonderful work! That is the type of information that are supposed to be shared across the
    net. Disgrace on the search engines for now not positioning this submit upper!
    Come on over and visit my web site . Thank you =)

  46. Very great post. I just stumbled upon your blog and wished to say that I
    have truly enjoyed surfing around your weblog posts.
    After all I’ll be subscribing on your rss feed and I am hoping you write again soon!

  47. I have read a few just right stuff here. Certainly value bookmarking for revisiting. I surprise how a lot attempt you set to create such a great informative web site.

  48. I really like your blog.. very nice colors & theme. Did you design this website
    yourself or did you hire someone to do it for you?
    Plz reply as I’m looking to construct my own blog and would like to find
    out where u got this from. thanks a lot

  49. This is a great tip particularly to those new to the blogosphere.
    Short but very precise information… Thank you for sharing
    this one. A must read article!

  50. Heya i’m for the primary time here. I came across this
    board and I to find It really helpful & it helped me out much.
    I’m hoping to offer one thing back and aid others like you helped me.

  51. Hey There. I found your blog using msn. This is a really well
    written article. I’ll make sure to bookmark it and come back to
    read more of your useful info. Thanks for the post. I will certainly return.

  52. It’s actually a great and helpful piece of information. I am happy that you just shared this
    useful info with us. Please keep us up to date like this.

    Thanks for sharing.

  53. Wow that was unusual. I just wrote an very long comment but after I clicked submit my comment didn’t show up.
    Grrrr… well I’m not writing all that over again. Anyways, just wanted to say great
    blog!

  54. Somebody essentially help to make seriously articles I would state. This is the very first time I frequented your website page and thus far? I surprised with the research you made to create this particular publish amazing. Fantastic job!

  55. This is very fascinating, You are a very skilled blogger.

    I’ve joined your feed and look forward to in quest
    of more of your fantastic post. Additionally, I have shared
    your site in my social networks

  56. This is very interesting, You’re a very skilled blogger.
    I have joined your feed and look forward to seeking more of your excellent post.
    Also, I have shared your site in my social networks!

  57. Howdy! This article could not be written any better! Reading through this post reminds me
    of my previous roommate! He constantly kept preaching about
    this. I most certainly will send this article to him.
    Fairly certain he will have a good read. Thank you for sharing!

  58. I came across your site recently and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog.

  59. I have been surfing online greater than three
    hours these days, yet I by no means discovered any interesting
    article like yours. It is lovely price enough for me.
    In my view, if all web owners and bloggers made good content as you did,
    the net will probably be a lot more useful than ever before.

  60. Hi all, here every person is sharing these knowledge, therefore it’s nice to read this webpage, and I used to pay a visit this website everyday.

  61. My brother recommended I may like this blog. He was once
    entirely right. This publish truly made my day. You can not imagine simply how much time I had spent
    for this info! Thank you!

  62. I got this site from my buddy who told me on the topic of this site and at the moment this time I am visiting this web page and reading very
    informative posts at this time.

  63. Thank you very much for the post, I actually learned a lot from it.

    Incredibly quality content on this site. Always looking forward to new article.