device_frame_plus

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

DeviceFramePlus는 Android, iOS, Web, macOS, Windows, Linux용 실제 사전 설계된 기기 프레임 내에서 앱 인터페이스를 표시할 수 있도록 해주는 Flutter 패키지입니다. 인기 있는 기기의 사용자 정의 가능한 모크업을 제공하여 UI 미리보기를 간소화하고, 다양한 화면 크기와 방향에서 앱이 어떻게 보이는지 시각적으로 확인할 수 있게 도와줍니다. 발표, 문서화, 초기 디자인 검토에 적합하며 최소한의 설정으로 개발 워크플로우를 향상시킵니다. 이 패키지는 pub.dev를 통해 Flutter 프로젝트에 쉽게 통합할 수 있습니다.

사용 사례

앱 UI 미리보기
디자인 문서
프레젠테이션 자료
크로스 플랫폼 테스트
개발자 데모

주요 기능

사전 정의된 장치 템플릿
사용자 정의 가능한 프레임 스타일
다중 플랫폼 지원
간편한 통합
반응형 레이아웃 렌더링

적합한 대상

UI/UX 디자이너
Flutter 개발자
제품 관리자
기술 작가

고려 사항

정적 모크업으로 제한
인터랙티브 장치 동작 없음
시각적 참조용으로만
기능 테스트를 위한 것이 아님

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

Mockups for common devices.

Quickstart

Wrap any widget in a DeviceFrame widget and give it a device (multiple devices are available from the Device accessors).

DeviceFrame(
    device: Devices.ios.iPhone11,
    isFrameVisible: true,
    orientation: Orientation.portrait,
    screen: Container(
        color: Colors.blue,
        child: Text('Hello'),
    ),
)

Examples

Usage

Displaying a virtual keyboard

To display a generic simulated virtual keyboard, simply wrap any widget in a VirtualKeyboard.

DeviceFrame(
    device: Devices.ios.iPhone11,
    orientation: orientation,
    screen: VirtualKeyboard(
        isEnabled: true,
        child: // ...
    ),
)

Maintain device media query and theme in an encapsulated app

To make sure that a WidgetsApp uses the simulated MediaQuery from the simulated devices, set its useInheritedMediaQuery property to true.

DeviceFrame(
    device: Devices.ios.iPhone11,
    orientation: orientation,
    screen: Builder(
        builder: (deviceContext) => MaterialApp(
            useInheritedMediaQuery: true,
            theme: Theme.of(context),
        ),
    ),
),

Creating a custom generic device

Various generic devices are available as DeviceInfo factories to make it easy to create custom device instances.

Phone

DeviceInfo.genericPhone(
    platform: TargetPlatform.android,
    name: 'Medium',
    id: 'medium',
    screenSize: const Size(412, 732),
    safeAreas: const EdgeInsets.only(
      left: 0.0,
      top: 24.0,
      right: 0.0,
      bottom: 0.0,
    ),
    rotatedSafeAreas: const EdgeInsets.only(
      left: 0.0,
      top: 24.0,
      right: 0.0,
      bottom: 0.0,
    ),
)

Tablet

DeviceInfo.genericTablet(
    platform: TargetPlatform.android,
    name: 'Medium',
    id: 'medium',
    screenSize: const Size(1024, 1350),
    safeAreas: const EdgeInsets.only(
      left: 0.0,
      top: 24.0,
      right: 0.0,
      bottom: 0.0,
    ),
    rotatedSafeAreas: const EdgeInsets.only(
      left: 0.0,
      top: 24.0,
      right: 0.0,
      bottom: 0.0,
    ),
)

Desktop monitor

DeviceInfo.genericDesktopMonitor(
    platform: TargetPlatform.windows,
    name: 'Wide',
    id: 'wide',
    screenSize: const Size(1920, 1080),
    windowPosition: Rect.fromCenter(
      center: const Offset(
        1920 * 0.5,
        1080 * 0.5,
      ),
      width: 1620,
      height: 780,
    ),
)

Laptop

DeviceInfo.genericLaptop(
    platform: TargetPlatform.windows,
    name: 'Laptop',
    id: 'laptop',
    screenSize: const Size(1920, 1080),
    windowPosition: Rect.fromCenter(
      center: const Offset(
        1920 * 0.5,
        1080 * 0.5,
      ),
      width: 1620,
      height: 780,
    ),
)

Available devices

Screenshots for all available devices are available in the test/devices directory

Contributing

Edit device frames

All frames are designed in a Figma file.

패키지, 저장소 및 앱 카테고리 검색