[Flutter] 화면 가로 너비(width)와 세로 높이(height) 알아내기(MaterialApp, Getx)

Flutter 앱 개발할 때 padding 또는 width, height 등을 고정으로 잡아놓으면 결국 다른 해상도의 디바이스에서 실행할 때 화면이 다 깨져버린다. 프로토타입 만들 때는 고정으로 해도 되지만 실제로 배포하기 전에 각기 다른 해상도에서도 문제가 생기지 않도록 비율로 지정해놓는 것이 정신건강에 이롭다.

 

MaterialApp 내부에서 해당 screen의 높이와 너비는 MediaQuery를 이용해 알아낼 수 있다.

• double width = MediaQuery.of(context).size.width
• double height = MediaQuery.of(context).size.height

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {

    double width = MediaQuery.of(context).size.width;
    print("width: ${width}");
    //output: 392.72727272727275

    double halfwidth = width * 0.5; //50 % width of screen
    print("halfwidth: ${halfwidth}");
    //output: 196.36363636363637

    double height = MediaQuery.of(context).size.height;
    print("height: ${height}");
    //output: 737.4545454545455

    double smallheight = height * 0.2; //20 % of height of screen
    print("smallheight: ${smallheight}");
    //output: 147.4909090909091


    return Scaffold(
        appBar: AppBar(
          title: Text("MediaQuery Screen Height and Width"),
          backgroundColor: Colors.deepOrangeAccent,
        ),
        body: Container(
          padding: EdgeInsets.all(20),
          child: Container(
            color: Colors.blue,
            height: halfwidth,
            width: smallheight,
          ),
        )
    );
  }
}

Fig 1. MediaQuery Screen Size

 

GetMaterialApp 내부에서 해당 screen의 높이와 너비는 Get을 이용해 알아낼 수 있다.

• double width = Get.width
• double height = Get.height

 

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: Home(),
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {

    double width = Get.width;
    print("width: ${width}");
    //output: 392.72727272727275

    double halfwidth = width * 0.5; //50 % width of screen
    print("halfwidth: ${halfwidth}");
    //output: 196.36363636363637

    double height = Get.height;
    print("height: ${height}");
    //output: 737.4545454545455

    double smallheight = height * 0.2; //20 % of height of screen
    print("smallheight: ${smallheight}");
    //output: 147.4909090909091


    return Scaffold(
        appBar: AppBar(
          title: Text("GetX Screen Height and Width"),
          backgroundColor: Colors.greenAccent,
        ),
        body: Container(
          padding: EdgeInsets.all(20),
          child: Container(
            color: Colors.blue,
            height: halfwidth,
            width: smallheight,
          ),
        )
    );
  }
}

Fig 2. Getx Screen Size