device_frame_plus

Visão geral do pacote

Orientação gerada a partir de informações públicas. Apenas para referência.

DeviceFramePlus é um pacote Flutter que permite aos desenvolvedores exibir as interfaces do aplicativo dentro de molduras realistas e pré-definidas para Android, iOS, Web, macOS, Windows e Linux. Ele simplifica as visualizações de UI oferecendo mockups personalizáveis de dispositivos populares, ajudando a visualizar como o aplicativo aparece em diferentes tamanhos de tela e orientações. Ideal para apresentações, documentação e revisões iniciais de design, ele melhora o fluxo de trabalho de desenvolvimento com configuração mínima. O pacote se integra perfeitamente aos projetos Flutter por meio do pub.dev.

Casos de uso

Pré-visualizações da interface do aplicativo
Documentação de design
Materiais de apresentação
Testes multiplataforma
Demonstrações de desenvolvedor

Principais recursos

Modelos de dispositivo pré-definidos
Estilos de quadro personalizáveis
Suporte multiplataforma
Integração fácil
Renderização de layout responsivo

Indicado para

designers de UI/UX
Desenvolvedores Flutter
gestores de produto
redator técnico

Considerações

Limitado a protótipos estáticos
Nenhum comportamento de dispositivo interativo
Melhor para referência visual apenas
Não destinado a testes funcionais

README original

Snapshot do README original do repositório-fonte vinculado. Consulte o repositório para o conteúdo mais recente.

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.

Buscar pacotes, repositórios e categorias de apps