Flutter/dart MediaQuery를 써야하는 이유 by 코딩파파 / TIL # 54

 

회사에서 다음 앱을 출시하는 동안,

 

앞으로 많이 사용하게 될 MediaQuery에 대해 공부한 내용을 적는다.

 

유튜브 코딩 파파를 참고했다.

 

 

MediaQuery

반응형의 따른 앱 내의 패키지이다.

 

css에서 쓰인다.

 

보통 디바이스마다 가로나 세로 길이가 다르기 때문에

 

앱에 사이즈에 맞는 가로나 세로의 값을 가져오는 것이 일반적이다.

 

---

보통의 사용법

MediaQuery.of(context).size.witdh //앱 디바이스의 가로길이
MediaQuery.of(context).size.height //앱 디바이스의 세로길이

 

보통 다이얼로그나 혹은 사이즈를 넣어줘야 하는 Container나 Text 등등, 

 

앱마다 각각 다른 사이즈로 화면에 표시된다.

 

그래서 위와 같은 사이즈를 두어, 디바이스의 크기에 대한 대응을 할 수 있다.

 

---

간혹, MediaQuery가 사이즈를 가져오지 못해,

 

화면에 위젯이 표시가 되지 않을 때가 있는데,

 

이러한 상황을 위한 해결법은 아래 코드에 있다.

 

  @override
  Widget build(BuildContext context) {
	return FutureBuilder<double>(
      future: tillGetSource(Stream<double>.periodic(Duration(milliseconds: 100),
              (_) => MediaQuery.of(context).size.width)),
      builder: (context, snapshot) {
        if(snapshot.hasData){
        Size size = MediaQuery.of(context).size; //안전 빵
        return Scaffold()
        ...
        }
      }

build 메서드 안에 앱 구현을 위한 Scaffold가 있는데, FutureBuilder를 두어,

 

0.1초마다 Stream으로

 

미리 만들어 둔 tillGetSource메서드 안에

 

MediaQuery에 사이즈를 넘겨준다.(가로 사이즈만 넘겨주어도 된다)

 

Future<double> tillGetSource(Stream<double> source) async{
    print(source);
    await for (double value in source){
      if(value > 0)
        return value;
    }
  }

 

tillGetSource메서드는 다음과 같다.

 

0.1초마다 넘어온 MediaQuery 사이즈를 Stream <double> 값으로 받아

 

이 값이 0보다 클 때, (사이즈 값이 있을 때)

 

value값을 return 해준다.

 

그러면 다시 아래 코드에서

 

 @override
  Widget build(BuildContext context) {
	return FutureBuilder<double>(
      future: tillGetSource(Stream<double>.periodic(Duration(milliseconds: 100),
              (_) => MediaQuery.of(context).size.width)),
      builder: (context, snapshot) {
        if(snapshot.hasData){
        Size size = MediaQuery.of(context).size; //안전 빵
        return Scaffold()
        ...
        }
      }

snapshot.hasData로 값이 있는지 체크를 하고, (값이 있을 때 아래 코드를 return)

 

아래 Scaffold를 실행해 준다.

 

혹시 모르니 안전빵으로, MediaQuery 사이즈를 안에다가 초기화해주어 사용한다.

 

값이 없을 때는 

 

 }else{
         return CircularProgressIndicator();
        }

 

CircularProgressIndicator() 메서드로

 

로딩바를 리턴해준다.

 

이로써, MediaQuery의 사이즈의 값이 있을 때,

 

비로소 위젯의 표시가 가능하게 되는 것이다.