[Flutter Favorite] device_preview 예시코드

 

안녕하세요? 플러터로 앱을 개발하다보면 기기마다 UI가 다르게 표현되는 것을 확인할 수 있습니다. 

플러터 개발자시면 실기기로 테스트하기 전까지 알 수없어 당황한 경험이 다들 있으실 겁니다. 

device_preview 패키지를 사용하시게되면 다른 기기에서 앱이 어떻게 보이고 작동하는 지를 대략적으로 파악하는데 도움이 됩니다. 

사용법은 매우 간단합니다. 

 

먼저 pubspec.yaml 파일에 추가해줍니다. 

dependencies:
  device_preview: ^1.1.0

 

다음으로 MyApp 바로 상단에 DevicePreview로 감싸줍니다. 

import 'package:device_preview/device_preview.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

void main() => runApp(
      DevicePreview(
        enabled: !kReleaseMode,
        builder: (context) => MyApp(), // Wrap your app
      ),
    );

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      useInheritedMediaQuery: true,
      locale: DevicePreview.locale(context),
      builder: DevicePreview.appBuilder,
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: HomePage(),
    );
  }
}

pub.dev device_preview 참고 이미지