Flutter에서 여러 기기의 화면을 보는 법

DevicePreview

플러터로 크로스 플랫폼 앱을 만들다 보니 화면 크기에 따라 어떻게 보이는지를 바로바로 확인하고 싶어졌다.

그래서 찾아보니 좋은 패키지가 역시 있었다!

DevicePreview

사용법

void main() {
  runApp(
    DevicePreview(
      enabled: !kReleaseMode, // 디버그 모드에서만 보이게 하기 위해
      builder: (context) => const MyApp(),
    ),
  );
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      useInheritedMediaQuery: true, // 미리보기 외에 추가기능 사용을 위해
      home: HomePage(),
    );
  }
}

최상위 위젯을 DevicePreview로 감싸주고 builder에 최상위 위젯을 넣기만 하면 된다.

기기 종류나 해상도뿐만 아니라 지역이나 테마도 바로바로 바꿔볼 수 있다.

지역을 실시간으로 바꿔볼 수 있는 게 정말 꿀기능인 것 같다.

이외에도 다양한 옵션들이 존재한다.

GetX와 함께?

미리보기 외에 추가적인 기능들을 사용하기 위해서는 MaterialApp 위젯에 있는 useInheritedMediaQuery라는 속성을 true로 설정해줘야 한다.

하지만 현재 GetX의 GetMaterialApp 위젯에는 해당 속성이 없어서 기능을 사용할 수 없다.

그래서 검색해보았더니 이미 PR이 있었다.

충돌을 해결하고 병합한다고 하니 기다려봐야겠다.

jonataslaw/getx - add useInheritedMediaQuery property #2031

+

4.6.0 버전에 추가되었다!