tzorelas
Reputation: 25
how to resize my flutter app according to every screen size?
Im trying to create a page to convert Weight but the screen size from the Android emulator and my phone are different,so how can i adjust my screen size for every ocasion?I tried to use Media Query but i don't know how exactly it works and I left it,idk if I need to use Media Query or something else...its my first project :<
The Android emulator
and my phone
The Widget
class Weight extends StatefulWidget {
@override
_WeightState createState() => _WeightState();
}
class _WeightState extends State<Weight> {
bool value = true;
List<String> x = ["Pounds", "Kilograms", "Centrigrams"];
List<bool> y = [false, false, false];
String temp = "";
var userQuestion = '';
var userAnswer = '';
@override
Widget build(BuildContext context) => Scaffold(
backgroundColor: Colors.deepPurple[100],
appBar: AppBar(
backgroundColor: Color.fromRGBO(50, 70, 205, 1),
title: const Text('Weight and Mass'),
actions: <Widget>[
Container(
padding: EdgeInsets.symmetric(vertical: 3),
height: 50,
child: LiteRollingSwitch(
//initial value
value: true,
textOn: 'Light',
textOff: 'Night',
colorOn: Colors.yellow[600],
colorOff: Colors.grey[900],
iconOn: Icons.wb_sunny,
iconOff: Icons.brightness_3,
textSize: 20.0,
onChanged: (bool state) {
value = state;
print('Current State of SWITCH IS: $state');
},
),
)
],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
alignment: Alignment.center,
child: buildMenuItem(
text: x[0],
icon: Icons.arrow_drop_down,
onPressed: () {
y[0] = true;
openBottomSheet(context);
},
),
),
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white70,
border: Border.all(color: Colors.deepPurple[900], width: 3.0),
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
child: Text(userQuestion,
style: TextStyle(color: Colors.black, fontSize: 22)),
),
Container(
alignment: Alignment.center,
child: buildMenuItem(
text: x[1],
icon: Icons.arrow_drop_down,
onPressed: () {
y[1] = true;
openBottomSheet(context);
},
),
),
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white70,
border: Border.all(color: Colors.deepPurple[900], width: 3.0),
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
child: Text(userAnswer,
style: TextStyle(color: Colors.black, fontSize: 23)),
),
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
width: 300,
height: 75,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
MyButton(
buttonTapped: () {
setState(
() {
userQuestion = '';
userAnswer = '';
},
);
},
color: Colors.green,
buttonText: "C",
textColor: Colors.white,
),
MyButton(
buttonTapped: () {
setState(
() {
userQuestion = userQuestion.substring(
0, userQuestion.length - 1);
if (userQuestion.length >= 1) {
converter();
} else {
userAnswer = '';
}
},
);
},
color: Colors.red,
buttonText: "⌫",
textColor: Colors.white,
),
],
),
),
Container(
width: 500,
height: 75,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '7';
converter();
},
);
},
color: Colors.white,
buttonText: "7",
textColor: Colors.deepPurple,
),
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '8';
converter();
},
);
},
color: Colors.white,
buttonText: "8",
textColor: Colors.deepPurple,
),
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '9';
converter();
},
);
},
color: Colors.white,
buttonText: "9",
textColor: Colors.deepPurple,
),
],
),
),
Container(
width: 500,
height: 75,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '4';
converter();
},
);
},
color: Colors.white,
buttonText: "4",
textColor: Colors.deepPurple,
),
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '5';
converter();
},
);
},
color: Colors.white,
buttonText: "5",
textColor: Colors.deepPurple,
),
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '6';
converter();
},
);
},
color: Colors.white,
buttonText: "6",
textColor: Colors.deepPurple,
),
],
),
),
Container(
width: 500,
height: 75,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '1';
converter();
},
);
},
color: Colors.white,
buttonText: "1",
textColor: Colors.deepPurple,
),
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '2';
converter();
},
);
},
color: Colors.white,
buttonText: "2",
textColor: Colors.deepPurple,
),
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '3';
converter();
},
);
},
color: Colors.white,
buttonText: "3",
textColor: Colors.deepPurple,
),
],
),
),
Container(
width: 300,
height: 75,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '0';
converter();
},
);
},
color: Colors.white,
buttonText: "0",
textColor: Colors.deepPurple,
),
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '.';
converter();
},
);
},
color: Colors.white,
textColor: Colors.deepPurple,
buttonText: ".",
),
],
),
)
],
),
)
],
),
);
Upvotes: 0
Views: 2415
Answers (4)
Rajasekaran K
Reputation: 51
Use MediaQuery and minus the rest from it.
double screenHeight = 0.0;
double screenWidth = 0.0;
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
// To Get AppBar Preferred Size
AppBar appBar = AppBar(
title: const Text("Screen new"),
elevation: 0,
);
@override
Widget build(BuildContext context) {
screenHeight = MediaQuery.of(context).size.height - // Total screen height
appBar.preferredSize.height - // Reducing Appbar height
MediaQuery.of(context).padding.top; // This is the top status bar
screenWidth = MediaQuery.of(context).size.width; // Total screen width
return SafeArea( // To remove overlap with status bar on top
child Scaffold(
appBar: appBar,
body: Container(
//If need to reduce height use screenHeight * 0.2 (* 1.0 is the full height)
height: screenHeight,
width: screenWidth,
child: ...... Add rest of the code Here ....
)
)
);}
Upvotes: 0
Arbiter Chil
Reputation: 1285
I created a class to retrieve the sizes:
class SizexGet {
static MediaQueryData _mediaQueryData;
static double screenwidth;
static double screenheight;
static double defaultsize;
static Orientation orientation;
void init(BuildContext context) {
_mediaQueryData = MediaQuery.of(context);
screenheight = _mediaQueryData.size.height;
screenwidth = _mediaQueryData.size.width;
orientation = _mediaQueryData.orientation;
}
}
double getProportionHieght(double inputhieght) {
double screeHights = SizexGet.screenheight;
return (inputhieght / 812.0) * screeHights;
}
double getProportionWidth(double inputwidth) {
double screenwidths = SizexGet.screenwidth;
return (inputwidth / 375.0) * screenwidths;
}
You can use the class as the following:
class Profile extends StatelessWidget {
@override
Widget build(BuildContext context) {
SizexGet().init(context);
return Scaffold(
backgroundColor: backColorPrimary,
body: SafeArea(
child: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(left: 20, right: 20, top: 5),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: getProportionHieght(200),
width: getProportionWidth(200),
),
],
),
),
),
),
);
}
}
Now the Widget will resize automatically when it is in landscape.
Upvotes: 0
Mehran Ullah
Reputation: 792
you just wrap the whole body with SingleChildScrollView as I did in below code. Actually this is not good practice but your all containers are hardcoded height and width so in this situation, you need SingleChildScrollView
class _WeightState extends State<Weight> {
bool value = true;
List<String> x = ["Pounds", "Kilograms", "Centrigrams"];
List<bool> y = [false, false, false];
String temp = "";
var userQuestion = '';
var userAnswer = '';
var _width,_height;
@override
Widget build(BuildContext context) {
_width=MediaQuery.of(context).size.width;
_height=MediaQuery.of(context).size.height;
return Scaffold(
backgroundColor: Colors.deepPurple[100],
appBar: AppBar(
backgroundColor: Color.fromRGBO(50, 70, 205, 1),
title: const Text('Weight and Mass'),
actions: <Widget>[
Container(
padding: EdgeInsets.symmetric(vertical: 3),
height: 50,
child: LiteRollingSwitch(
//initial value
value: true,
textOn: 'Light',
textOff: 'Night',
colorOn: Colors.yellow[600],
colorOff: Colors.grey[900],
iconOn: Icons.wb_sunny,
iconOff: Icons.brightness_3,
textSize: 20.0,
onChanged: (bool state) {
value = state;
print('Current State of SWITCH IS: $state');
},
),
)
],
),
body: Container(
height: _height-AppBarTheme.of(context).toolbarHeight,
width: _width,
child: SingleChildScrollView(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Container(
alignment: Alignment.center,
child:
buildMenuItem(
text: x[0],
icon: Icons.arrow_drop_down,
onPressed: () {
y[0] = true;
// openBottomSheet(context);
},
),
),
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white70,
border: Border.all(
color:
Colors.deepPurple[900],
width: 3.0),
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
child: Text(userQuestion,
style: TextStyle(color: Colors.black, fontSize: 22)),
),
Container(
alignment: Alignment.center,
child: buildMenuItem(
text: x[1],
icon: Icons.arrow_drop_down,
onPressed: () {
y[1] = true;
openBottomSheet(context);
},
),
),
Container(
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.white70,
border: Border.all(color: Colors.deepPurple[900], width: 3.0),
borderRadius: BorderRadius.all(
Radius.circular(10),
),
),
child: Text(userAnswer,
style: TextStyle(color: Colors.black, fontSize: 23)),
),
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Container(
width: 300,
height: 75,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
MyButton(
buttonTapped: () {
setState(
() {
userQuestion = '';
userAnswer = '';
},
);
},
color: Colors.green,
buttonText: "C",
textColor: Colors.white,
),
MyButton(
buttonTapped: () {
setState(
() {
userQuestion = userQuestion.substring(
0, userQuestion.length - 1);
if (userQuestion.length >= 1) {
converter();
} else {
userAnswer = '';
}
},
);
},
color: Colors.red,
buttonText: "⌫",
textColor: Colors.white,
),
],
),
),
Container(
width: 500,
height: 75,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '7';
converter();
},
);
},
color: Colors.white,
buttonText: "7",
textColor: Colors.deepPurple,
),
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '8';
converter();
},
);
},
color: Colors.white,
buttonText: "8",
textColor: Colors.deepPurple,
),
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '9';
converter();
},
);
},
color: Colors.white,
buttonText: "9",
textColor: Colors.deepPurple,
),
],
),
),
Container(
width: 500,
height: 75,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '4';
converter();
},
);
},
color: Colors.white,
buttonText: "4",
textColor: Colors.deepPurple,
),
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '5';
converter();
},
);
},
color: Colors.white,
buttonText: "5",
textColor: Colors.deepPurple,
),
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '6';
converter();
},
);
},
color: Colors.white,
buttonText: "6",
textColor: Colors.deepPurple,
),
],
),
),
Container(
width: 500,
height: 75,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '1';
converter();
},
);
},
color: Colors.white,
buttonText: "1",
textColor: Colors.deepPurple,
),
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '2';
converter();
},
);
},
color: Colors.white,
buttonText: "2",
textColor: Colors.deepPurple,
),
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '3';
converter();
},
);
},
color: Colors.white,
buttonText: "3",
textColor: Colors.deepPurple,
),
],
),
),
Container(
width: 300,
height: 75,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '0';
converter();
},
);
},
color: Colors.white,
buttonText: "0",
textColor: Colors.deepPurple,
),
MyButton(
buttonTapped: () {
setState(
() {
userQuestion += '.';
converter();
},
);
},
color: Colors.white,
textColor: Colors.deepPurple,
buttonText: ".",
),
],
),
)
],
),
)
],
),
),
),
),
);
}
}
Upvotes: 0
Youness
Reputation: 21
you can call :
double sizeHeight = MediaQuery.of(context).size.height;
double sizeWidth = MediaQuery.of(context).size.width;
example :
return Container(
height : sizeHeight * 0.5,
width : sizeWidth * 0.5
);
Upvotes: 2
Related Questions
- How to make flutter app responsive, for all kind of screens?
- How to make flutter app responsive according to different screen size?
- How to resize flutter widgets depending on screen size?
- Flutter screens sizes
- How can I make a Flutter app responsive according to different screen size?
- How can i fix my flutter app to be responsive in different screen sizes?
- How to rescale an app depending on screensize in flutter
- How to make this flutter screen responsive according to different screen sizes?
- How to make flutter application height and width adapt to different screen sizes?
- flutter: how to suit all the screen sizes with the same program?