Explorando a visualização do dispositivo | guia do flutter

Este pacote de terceiros é uma joia completa e uma excelente invenção para desenvolvedores Flutter. Agora, você não precisa conectar dispositivos diferentes simultaneamente para visualizar a aparência do aplicativo; em vez disso, podemos usar as listagens de dispositivos fornecidas pelo pacote na própria caixa suspensa e visualizá-las diretamente. Não é simplesmente incrível? Vamos explorar isso mais profundamente…

Aproxime a aparência e o desempenho do seu aplicativo em outro dispositivo.

O que vamos cobrir?

• Instalação do pacote
• Vantagens oferecidas
• Implementação

Instalação do pacote

Redirecione para o terminal do seu projeto e adicione este comando

flutter pub add device_preview

Ele instalará a versão necessária e ajustará a conta ao seu projeto. OU

Instale manualmente:

device_preview | Flutter package

Approximate how your Flutter app looks and performs on another device.

Dart packages

Vamos para as vantagens oferecidas pelo pacote.

Vantagens Oferecidas

De acordo com o pacote. Oferece:

Qualquer visualização de dispositivo para dispositivo

Suporte dinâmico para temas, layout adaptável

Exibição de resolução ajustável (visualização de forma livre)

Suporte para exibição de orientação

Mantém o estado do aplicativo

No meu ponto de vista, esta é a melhor ferramenta que acabei de explorar e pensei em anotar outro artigo. Além disso, é uma extensão da facilidade.

Vamos para a seção de implementação.

Implementação

Vá para o arquivo raiz — main.dart e importe o pacote como:

import 'package:device_preview/device_preview.dart';

Agora, pouco antes de aplicarmos o Widget, precisamos envolvê-lo com a visualização do dispositivo e aplicar suas propriedades como:

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

Observação: também podemos ajustar ativado como específico da plataforma.

Em seguida, em MaterialApp, precisamos aplicar outras 3 propriedades:

1. useInheritedMediaQuery
2. locale
3. builder

useInheritedMediaQuery
Essa propriedade ajuda a manter os estados durante a visualização em diferentes dispositivos, área segura, etc.

locale
Isso ajuda a manter o modelo de localização aplicado em diferentes dispositivos.

builder
Substituindo o construtor padrão do MaterialApp pelo Device Preview um.

Aqui está o trecho modificado

useInheritedMediaQuery: true,
locale: DevicePreview.locale(context),
builder: DevicePreview.appBuilder,
title: 'Flutter Demo',

Aqui, terminamos a implementação. É hora de visualizar nosso aplicativo.

Esta é a visualização no meu dispositivo real. Parece impressionante!

Aqui o video.

Um exemplo do package