Servicio de dardos: página web de flutter

Formación

La última vez terminamos con el hecho de que nuestro servidor web recibe un nombre de dominio y aprendimos a establecer una conexión segura con el cliente. Sin embargo, todavía no tenemos absolutamente nada que mostrar a nuestro futuro usuario. Aunque ya podemos compartir la idea de una startup y anunciar la fecha de lanzamiento del MVP . Una página web informativa es adecuada para esta tarea. Escribámoslo en Dart usando el marco FlutterWeb. Todas las aplicaciones de nuestros clientes del servicio se convertirán en una extensión de esta página en particular. Intentaremos realizar el desarrollo de la forma más adaptativa y estructurada posible, de modo que el desarrollo y los ensamblajes para las plataformas requeridas (web-android-iOS) se conviertan en una rutina.







Comencemos instalando Flutter:

• Instalar git
• Clonamos el repositorio con la versión beta de Flutter con el comando

  git clone https://github.com/flutter/flutter.git -b beta

• Para ejecutar comandos de flutter desde la línea de comandos, debe especificar la ruta a sus archivos ejecutables en el sistema operativo. Vamos a abrir las variables del SO, para esto comenzamos a ingresar "cambio de las variables de entorno del usuario actual" en la barra de búsqueda,
  
  
  
  
  
  
  
  en la ventana seleccionamos la variable Path y pulsamos Cambiar . En la lista que se abre, cree una nueva línea con la dirección de los archivos ejecutables de flutter en el sistema de archivos, por ejemplo C: \ flutter \ bin
• Instalar la extensión VScode para flutter
• Reinicie VScode (para que se apliquen las nuevas variables del sistema operativo) y en la terminal verifique el estado de flutter con el comando
  
  
  
  

  flutter doctor

  
  
  
  
  
  
  lo más importante aquí es que flutter está instalado en la versión beta (con soporte de desarrollo web)
• Ahora activamos el desarrollo web con el equipo
  
  
  
  

  flutter config --enable-web

Crea un nuevo proyecto y comienza a depurar

Creamos un nuevo proyecto con un equipo

flutter create < >

Abrámoslo inmediatamente en VScode con el comando

code < >

Abramos el archivo main.dart en la carpeta lib y comencemos a depurar con el comando F5 :







Quizás, cuando comiences a depurar, deberás seleccionar Chrome como dispositivo para depurar:







Elimina el contenido del archivo main.dart . Agregue un método principal vacío y la clase raíz de la aplicación, que devuelve una instancia de MaterialApp en el método build () : A continuación, cree el siguiente conjunto de subcarpetas del proyecto: Describa brevemente el propósito de cada una de ellas:

• di es un mecanismo de comunicación entre los componentes de la aplicación. Aquí se crearán y registrarán todos los servicios, repositorios, clientes de red necesarios para que la aplicación funcione. Usaré la biblioteca GetIt
• dominio - objetos de datos. Clases de presentación de datos
• res : colores, líneas, importaciones de rutas a imágenes y fuentes. Todo lo relacionado con los recursos estáticos.
• servicio : servicios para trabajar con datos
• ui - interfaz
• utils - clases de utilidad

Agregue las dependencias requeridas en el archivo pubspec.yaml:

Preparación para escalar elementos de la interfaz de usuario

Se asume que nuestra página debe adaptarse en función del tamaño de pantalla del dispositivo cliente y su ubicación (modo vertical u horizontal).



Comencemos con las imágenes de fondo. Su preparación está más allá del alcance del artículo, por lo que dejaré estos dos enlaces aquí:

• Pixabay.com - repositorio de fotos de contenido
• Paint.net - editor gráfico

Coloque las imágenes terminadas en la carpeta / assets / images, agregue esta ruta a los recursos en el archivo pubspec.yaml:







prefiero el acceso a los recursos en forma de árbol con parámetros. En este caso, la ruta a la imagen de fondo del código auxiliar:

images.background(bool isPortrait).stub

Para ello, en la carpeta res , creamos un archivo llamado images.dart con clases de direcciones de imagen:







Para escalar los tamaños de la interfaz y las fuentes, conectamos la librería ScreenUtil . Su funcionalidad se reduce a dos cosas:

• Registro del tamaño de pantalla "base". Aquí debe establecer el ancho y la altura de la pantalla para la que se realiza el diseño principal y la necesidad de escalar las fuentes.
• Un conjunto de extensiones para aplicar un factor de escala a los números (num). Por ejemplo, 100.w significa que el resultado de esta expresión será para una pantalla de 1920dp => 100dp, y para una pantalla de iPhone8 con un ancho de 414dp => 100x (414/1920) = 21.6dp. Es decir, cinco veces menos. También hay extensiones para la altura y el tamaño de la fuente.

Cree un archivo /utils/screen_util_ext.dart y un método de inicialización estático en él: agregue una







llamada al método de inicialización de zoom al método build () del widget raíz:







amplíe la funcionalidad de la biblioteca de zoom con varias extensiones adicionales en el archivo /utils/screen_util_ext.dart :

Inyección de dependencia

Es hora de implementar un mecanismo para crear y registrar componentes de aplicaciones utilizando la biblioteca GetIt . En la carpeta lib / DI / , cree el archivo di_container.dart . En él escribiremos un método estático getItInit () e inicializaremos una instancia del contenedor GetIt . Registremos el primer componente, una instancia de la clase Images :







agregue la llamada del método de inicialización a main () : El







acceso al componente Images se verá así:







De la misma manera, registremos una clase con recursos con cadenas.

Página de resguardo

Ahora, en la carpeta UI , cree un archivo stub.dart con la clase de página stub StubScreen , amplíe la clase base StatelessWidget y anule su método build () abstracto . Nuestra página es una imagen de fondo y dos bloques de información al frente, colocados en función de la orientación de la pantalla.

Repositorios y servicio

Para mostrar dinámicamente el tiempo restante antes del lanzamiento, debe:

1. Obtenga la configuración del servidor con las fechas de inicio del desarrollo y lanzamiento
2. Crear flujo de eventos para el cambio de tiempo restante
3. Combine estos datos pasándolos al flujo de salida para mostrarlos en la interfaz de usuario

Describamos los objetos de dominio (POJO) para estos datos:











Repositorios para recibir configuraciones y crear un flujo de eventos:











Servicio para lógica de eventos:







Registre estos componentes en un contenedor DI:

Widget de tiempo restante

El tiempo restante antes del lanzamiento se puede representar como 4 números: días, horas, minutos, segundos. Representemos estos parámetros como una enumeración:







Agreguemos funcionalidad a los parámetros usando la extensión: Se







animará el widget para mostrar el dial, número y firma, para esto ampliaremos la clase StatefulWidget . Su peculiaridad es que el elemento (la vista construida y mostrada) no corresponde al widget en sí, sino a su estado ( State ). El estado, a diferencia del widget, es mutable. Es decir, sus campos se pueden cambiar sin volver a crear completamente la instancia.











Necesito aclarar aquí qué son Animation , AnimationController y TickerProviderStateMixin... Entonces AnimationController es un contenedor sobre un parámetro de valor doble simple . El valor de este parámetro cambia linealmente en el rango de 0.0 a 1.0 (también se puede cambiar en la dirección opuesta o restablecer a 0.0). Sin embargo, para cambiar este parámetro, se usa un objeto TickerProviderStateMixin especial , que es un parámetro requerido para AnimationController y le dice que el motor gráfico está listo para construir un nuevo marco. Habiendo recibido tal señal, AnimationController calcula cuánto tiempo ha pasado desde el cuadro anterior y calcula cuánto cambiar el valor de su valor . Los objetos de animación se suscriben a AnimationControllery contienen alguna función de dependencia del valor de salida en el cambio lineal (en el tiempo) del valor AnimationController .



El método de inicialización de estado initState () se llama una vez después de la creación:







Cuando se destruye el estado del widget, se llama al método dispose () :











El widget estará representado por una pila ( Stack ), con el AnimatedBuilder para el número y la escala colocados en él :







Queda por implementar la primitiva gráfica en forma de arco:







Suma 4 Tales widgets en la pantalla son stubs:

Construir y lanzar

Antes de compilar la aplicación, debe reemplazar el nombre y la descripción de la aplicación en los archivos ./web/index.html ./web/manifest.json y pubspec.yaml .



Detenga la depuración y cree la versión de la aplicación con el comando

flutter build web

La aplicación terminada se encuentra en el directorio ./build/web/ . Tenga en cuenta que los archivos .last_build_id y main.dart.js.map son archivos de servicio y se pueden eliminar.

Coloquemos la aplicación en el servidor preparada en el artículo anterior. Para hacer esto, simplemente copie el contenido del directorio ./build/web/ a / public / en nuestro servidor:

scp -r ./* root@91.230.60.120:/public/

Resultado



Código fuente github Las



preguntas y comentarios son bienvenidos. Puedes chatear con el autor en el canal de Telegram .

En lugar de una conclusión

Nuestra aplicación cliente ya está lista para recibir los primeros datos del servidor: información sobre la fecha de lanzamiento. Para hacer esto, en el cuarto artículo crearemos una aplicación de servidor esqueleto y la colocaremos en el servidor.