Reputation: 328
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
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
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
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
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