CODEWITHSUNDEEP
flutter
mcloud79
mcloud79

Reputation: 328

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

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.

Upvotes: 4

Views: 8201

Answers (4)

AJwarrior
AJwarrior

Reputation: 21

It's better to use MediaQuery.of(context).size, because while using external package, you won't be able to maintain the size of widgets on orientation change which might be a big downfall if your application required orientation change for better visual effects:

Widget build(BuildContext context) {
AppBar appBar = AppBar(title: const Text("My Dashboard"));
height = MediaQuery.of(context).size.height -
    appBar.preferredSize.height -
    MediaQuery.of(context).padding.top; // for responsive adjustment
width = MediaQuery.of(context).size.width; // for responsive adjustment
debugPrint("$height, width: ${MediaQuery.of(context).size.width}");
return Scaffold(appBar: appBar, body: ResponsivePage(height,width));
}

Upvotes: 1

LastMonopoly
LastMonopoly

Reputation: 41

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

Upvotes: -1

SilSur
SilSur

Reputation: 509

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.

Upvotes: 2

C-Spydo
C-Spydo

Reputation: 799

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

}

Upvotes: 3

Related Questions