Flutter: vista previa del dispositivo de la aplicación

Flutter obtuvo un paquete increíble llamado device_preview . Obtener una vista previa de cómo se ve o funciona su aplicación en diferentes dispositivos es una parte importante del desarrollo. Pero es un proceso frenético intentar probar en diferentes emuladores, pero aún así, como desarrollador individual, no será una tarea fácil para usted, sino que también requerirá mucho tiempo. El paquete de vista previa del dispositivo puede ayudarlo con esto. Puede obtener una vista previa de su aplicación en cualquier dispositivo usando esta biblioteca. 

Hemos creado una aplicación de muestra para mostrarle cómo se ve. 

Para usar la biblioteca, ajuste el widget raíz de la aplicación con DevicePreview, establezca la propiedad enable en true para habilitar la vista previa del dispositivo y, en su generador, consulte el widget raíz de su aplicación. Y eso es todo, ahora puede probar proyectos en cualquier dispositivo, ya sea Mac, iOS o Android. A continuación se muestra el fragmento de código junto con las imágenes de salida.

Implementación:

Paso 1: Agregar la dependencia

Primero, es importante agregar la dependencia en el archivo pubspec.yaml.

device_preview: ^1.0.0

Ahora, ejecute pub get en la terminal de su IDE para configurar esta dependencia. O ejecute el siguiente comando en la terminal:

flutter pub add device_preview

Paso 2: Importa la dependencia

Importe la biblioteca en el archivo principal para usar la biblioteca de vista previa del dispositivo.

import 'package:device_preview/device_preview.dart';

Paso 3: Funcionalidad

Dentro de la función principal del proyecto, use la función DevicePreview y actívela como verdadera. Dentro del constructor, proporcione el widget raíz de la aplicación, que en este caso es MyApp().

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

Ahora, cuando ejecutemos la aplicación, obtendremos la función de vista previa del dispositivo. Luego podemos obtener una vista previa de nuestra aplicación en las plataformas disponibles.

Vista previa del dispositivo en el emulador:

Vista previa del dispositivo en la Web:

Limitaciones:

También hay una limitación. Por supuesto, podemos obtener una vista previa de cómo se ve y funciona la aplicación en otros dispositivos. Pero eso no implica que estemos ejecutando el código en ese dispositivo en particular. Esto significa que ejecutamos aplicaciones virtualmente.