다양한 화면 크기 및 방향에서 앱 확인

모바일 앱을 성공적으로 만들었습니다. 이제 화면 크기가 다른 다른 장치에서 어떻게 작동하는지 확인해야 합니다. 친구의 휴대폰을 잡고 앱을 설치하세요. 오른쪽?

flutter package ecosystem에는 device_preview라는 놀라운 패키지가 있어 이를 도와줄 수 있습니다. 이를 통해 다양한 폼 팩터(휴대폰, 노트북, 태블릿, 데스크톱) 및 다양한 운영 체제에서 앱을 볼 수 있습니다.



기기 미리보기로 실행 중인 앱

패키지 추가

이 자습서에서는 device_preview을 pubspec.yaml 파일로 가져와야 합니다.

dependencies:
flutter:
sdk: flutter
device_preview: ^0.7.1

설정

다음으로 패키지를 main.dart 파일로 가져와야 합니다.

import 'package:device_preview/device_preview.dart';

다음으로 DevicePreview에서 루트 위젯을 래핑해야 합니다. 즉, runApp 내부에 DevicePreview를 넣고 builder 매개변수에 루트 위젯을 제공해야 합니다.

void main() {
runApp(
DevicePreview(
builder: (context) => MyApp(),
),
);
}

다음으로 MaterialApp의 로케일 및 빌더 매개변수를 DevicePreview와 함께 제공된 것으로 변경해야 합니다.

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
locale: DevicePreview.locale(context),// Add locale
 builder: DevicePreview.appBuilder, // Add builder
 title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(),
);
}
}

지금 앱을 실행하면 영광스러운 DevicePreview 패키지를 볼 수 있습니다.



MacBook에서 실행 중인 앱을 보여주는 장치 미리보기

패키지와 함께 제공되는 하단 표시줄에는 몇 가지 옵션이 있습니다. 첫 번째 토글을 사용하면 장치 미리보기를 완전히 끌 수 있습니다.

두 번째 옵션은 장치를 변경하는 것입니다. 여기에는 여러 iPhone, Android 장치, iMac Pro, MacBook 및 Linux, Windows 시스템 중에서 선택할 수 있는 옵션이 있습니다. 자유 형식 장치를 선택할 수 있는 옵션도 있습니다.

세 번째는 로케일입니다. 여기에서 로케일을 변경하면 실제 장치에서 변경된 대로 앱에서 변경됩니다.

그리고 다음은 오리엔테이션입니다. 이 옵션을 사용하면 다른 방향, 즉 가로에서 앱이 어떻게 보이는지 확인할 수 있습니다.



가로 모드에서 iPad를 보여주는 장치 미리보기

그런 다음 장치 프레임 숨기기, 키보드 표시 등의 옵션이 있습니다. 설명이 필요하지 않습니다.

다음 옵션은 장치 테마를 변경하는 것입니다. 토글하면 실제 장치에서 동일한 효과를 시뮬레이트합니다.

플러그인

장치 미리보기 패키지에는 정말 멋진 플러그인 시스템이 있습니다. 스크린샷 플러그인, 파일 탐색기 플러그인, SharedPreferences 뷰어 등이 있습니다. 그리고 직접 빌드할 수 있는 옵션도 있습니다. 방법here을 찾을 수 있습니다.

플러그인을 추가하려면 Device Preview의 플러그인 배열을 추가해야 합니다.

void main() {
runApp(
DevicePreview(
plugins: [
ScreenshotPlugin(),
],
builder: (context) => MyApp(),
enabled: !kReleaseMode,
),
);
}

위의 코드는 앱에 스크린샷 기능을 추가합니다. 이제 하단 바에 제공되는 스크린샷 버튼을 클릭하면 스크린샷이 찍히고 이를 볼 수 있는 URL이 제공됩니다.

이 모든 것을 통해 앱이 다른 장치에서 어떻게 보이는지 테스트할 수 있습니다.

여기서 유용한 정보를 찾으셨기를 바랍니다.

나는 항상 제안에 열려 있습니다!

DM으로 제안 및 의견을 알려주시거나 [email protected] 메일을 보내주세요.

너그러운 마음이 든다면 Buy Me a Coffee 을 통해 저를 후원해 주세요.

마지막으로 이 내용이 도움이 되셨다면 더 많은 사람들이 혜택을 받을 수 있도록 공유해 주세요. 그리고 이와 같은 더 많은 게시물을 얻으려면 저를 팔로우하세요 😉.