flutter web 브라우저별 다르게 출력될때- MediaQuery

엣지에서는

엣지 브라우저- 플러터 웹 화면

 

크롬에서는

크롬- 플러터 웹 화면

이렇게 크게 출력된다.

 

어떻게 하지?

 

MediaQuery를 사용한다. 

textScaleFactor를 1 로 

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      builder: (context, child) {
        return MediaQuery(
            data: MediaQuery.of(context).copyWith(textScaleFactor: 1),
            child: child!);
      },
      title: 'Flutter Demo',
      theme: ThemeData(
          primarySwatch: Colors.blue,
          textTheme: Theme.of(context).textTheme.apply(fontFamily: 'OpenSans')),
      home: const HomeView(),
    );
  }
}

 

firebase deploy 하고 확인하면 

짜잔! 크롬 브라우저에서도 정상적인 크기로 출력된다 .

 

다음에 MediaQuery가 뭐하는 용도인지 알아보자