[Flutter] MediaQuery 위젯

@override

Widget build(BuildContext context) {

  Size size = MediaQuery.of(context).size;

  return Scaffold(

      ....

}

이렇게 사용하는 경우 스마트 기기의 종류에 따라 내가 원하는 레이아웃이 나오지 않는 경우가 있다

그런 경우는 MediaQuery에서 응답이 오기 전에 MediaQuery의 실행이 지나가 버려서 size에 이상한 값이 들어있는

경우이다

이것을 해결하기 위해 응답 대기인 Future를 사용한다.

 

Future<double> whenNotZero(Stream<double> source) async {

  aswait for (double value in source ) {

    if( value > 0) {

      return value;

    }

  }

}

스트림의 source에서 가져온 값이 0 보다 클 때까지 대기한다.

 

이제 스트림의 source를 정의하자

@override

Widget build(BuildContext context) {

  return FutureBuilder<double> {

    future: whenNotZero(Stream<double>.periodic(Duration(milliseconds: 100 ),  // source 생성위해 0.1초 주기수행

      (x) => MediaQuery.of(context).size.width)),    // Stream.periodic

    builder: (context, snapshot) {          

      if(snapshot.hasData) {

        Size size = MediaQuery.of(context).size;

        return Scaffold(

         ....

      }

      else {

        return CircularProgressIndicator();  // MediaQuery에서 데이터가 없으면 실행된다

     }

   }

이렇게 하면 MediaQuery에서 데이터를 가져온 후에 수행함으로 정성적인 레이아웃이 적용됨

참고 영상) www.youtube.com/watch?v=TEIyMX1us3U&list=PLwUg6hFuXV86arSYNF9x_5Vm_lKdIBpf9&index=3&t=69s

 

 

참고) 다른 적용 방식도 있다

Material App -> MediaQuery.of(context) 순서로 사용하면 문제가 되지 않는다

아래처럼 MaterialApp()으로 wrapping 하라

 

class Loading extends StatelessWidget {
// This widget is the root of your application.

@override
Widget build(BuildContext context) {
  return MaterialApp(
    title: 'Loading Page',
    theme: ThemeData(
    primarySwatch: Colors.blue,
    ),
    home: LoadingPage(),
    );
  }
}

참고) medium.com/codespace69/flutter-error-mediaquery-of-called-with-a-context-that-does-not-contain-a-mediaquery-3a1d50e5c9cf