Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

flutter

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.

like image 978
mcloud79 Avatar asked Sep 12 '25 00:09

mcloud79


1 Answers

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"),
      ),
    );
  }

}
like image 194
C-Spydo Avatar answered Sep 14 '25 13:09

C-Spydo