Flutter: Is it possible to auto-scale (whole) ui based on device size?

Question

iOS native apps auto-scale the whole ui based on device size (width). Is there a similar behaviour with flutter? I want to design a ui (with font sizes, paddings, etc) for a master device (iphone xs) and scale the whole ui to all other devices. Wondering if that is possible as i couldn't find any information about it. Just responsive sizing that needs me to configure breakpoints etc.

Answer 1

I usually obtain device size on Widget build, and then use a fraction of the width and height for each widget: Something like this:

import 'package:flutter/material.dart';

Size deviceSize;

class Welcome extends StatefulWidget {
  WelcomeState createState() => WelcomeState();
}

class WelcomeState extends State<Welcome> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    deviceSize = MediaQuery.of(context).size;
    return Scaffold(
      backgroundColor: color3,
      body: Container(
        height:deviceSize.height*0.5,
        width:deviceSize.width-50.0,
        child: Text("Welcome"),
      ),
    );
  }

}

Answer 2

Yes, this indeed is possible. All you need is a ratio-scaling approach with which you scale your entire GUI. Check out this ratio-scaling solution given to another SO answer relating to the Flutter UI scaling issue.

Answer 3

Check out this package: https://pub.dev/packages/scaled_app

Replace runApp with runAppScaled, the entire UI design will be scaled automatically.

Helpful when you want adapt to different screen sizes quickly