flutter_base_project

Proyecto base de Flutter

• Esta es una plantilla de proyecto que incluye varias bibliotecas para ayudar en el proceso de desarrollo de un proyecto Flutter utilizando la arquitectura MVVM. La plantilla incluye diferentes capas como base, constantes, extensiones, init y base de visión. También incluye bibliotecas para gestión estatal, localización, caché, red y serialización, entre otros. La plantilla tiene un código predefinido para construir vistas y modelos de visión, lo que facilita a los desarrolladores centrarse en los diseños de páginas y la lógica comercial.

Pasos de entrega

• 1-) Abra el archivo "flutter_base_project". (No con VScode, Android Studio, etc.)
• 2-) Copie los archivos 'lib', 'activos' y 'scripts' y péguelos en su propio proyecto.
• 3-) Integre las bibliotecas y activos en la carpeta "PubSpec.yaml".
• 4-) Reemplace las importaciones en los cierres con el nombre de su propio proyecto y arregle las importaciones.

Bibliotecas de proyectos de Base Flutter

• Gestión estatal

  • mobx => https://pub.dev/packages/mobx
  • flutter_mobx => https://pub.dev/packages/flutter_mobx
  • Provider => https://pub.dev/packages/provider
  • mobx_codegen => https://pub.dev/packages/mobx_codgen
  • build_runner => https://pub.dev/packages/build_runner

• Localización

  • easy_localization => https://pub.dev/packages/easy_localization

• Cache

  • Shared_preferences => https://pub.dev/packages/shared_preferences

• Red

  • dio => https://pub.dev/packages/dio

• Serializable

  • json_serializable => https://pub.dev/packages/json_serializable

Capas de proyecto

• Base

  • Se puede trasladar de un proyecto a otro. Las estructuras que contiene se pueden usar suavemente en cada proyecto.

  • En un proyecto basado en la arquitectura MVVM, creamos las estructuras básicas de las capas de modelo-View-ViewModel desde aquí.

• Constantes

  • Carpeta donde se mantienen los valores que no cambiarán a lo largo de la aplicación y se pueden usar de principio a fin.

  • Incluye nombres de navegación que serán utilizados por la ruta de la aplicación, valores de enum, constantes de imagen, rutas de navegación.

• Extensiones

  • Las extensiones que se pueden usar en cada parte del proyecto en términos de mentalidad de código limpio son esenciales.

  • context_extension => El lugar donde los valores como el ancho, la altura, el relleno y la duración se mantienen dentro de la aplicación.

• Inicio

  • El lugar donde los controles importantes como caché, lang, navegación, red, notificador y tema se gestionan para una aplicación móvil.

  • Cache => Contiene un administrador local para administrar la caché de la aplicación en esta sección.

  • lang => Contiene el administrador de idiomas para la localización. Para la localización, los idiomas que se localizarán deben colocarse en carpetas como en-us.json, tr-tr.json bajo activos/lang. Después de cualquier cambio realizado en estas carpetas, el comando "Flutter Pub ejecuta Easy_Localization: Generar -O Lib/Core/Init/Lang -f Keys -o locale_keys.g.dart -s activos/lang" debe escribirse en el terminal.

  • Navegación => El lugar donde se proporcionan el servicio de navegación y las rutas de navegación.

  • Network => Utilizado para administrar operaciones de raspado web desde sitios web utilizando DIO

  • Notificador => Maneja cambios de tema entre temas oscuros y claros con notificador de tema.

  • tema => utilizado para administrar el tema de la aplicación.

View-ViewModel Base

• Después de completar los procesos de desarrollo arquitectónico especificados en la sección Capas del proyecto, podemos comenzar a llenar las vistas y los modelos de vista de la aplicación en general.

• En esta sección, vemos cómo podemos usar las vistas de nuestra aplicación y ViewModels de manera integrada con el código que escribimos en la capa base.

  Viewmodel

  • Cuando comenzamos a hacer la sección ViewModel, primero comenzamos a generar un código ViewModel usando el fragmento MOBX. ( Tenga en cuenta que build_runner_watch está activo durante este proceso).

  • Después de completar este proceso, MOBX_CODEGEN comienza a escribir los códigos generados en la carpeta ViewModel.g.Dart en nuestro nombre.

  • Mientras desarrollamos nuestro Modelo ViewModel, utilizamos el Base_View_Model que hicimos en la sección base. Para este proceso, agregamos la clase con la estructura Store, BaseViewModel a la clase para derivarla de la clase BaseViewModel.

  • Después de agregar estas estructuras, integramos nuestras funciones setContext () e init () de nuestra base_view_model ".

  

  Vista

  • Cuando comenzamos a llenar la sección Vista, primero utilizamos el View_Base que desarrollamos en la sección base.

  • Para dibujar nuestra página, agregamos nuestro BaseView a la sección de retorno, pero este BaseView debe derivarse del ViewModel (por ejemplo: BaseView ())

  • Después de integrar el BaseView, comenzamos a completar el código que escribimos en la sección Base_View aquí.

  • ViewModel => damos el Modelo ViewModel de la página que dibujamos como se explicó anteriormente.

  • onModelready => Controlamos la interacción contexto del modelo que dimos.

  • onpagebuilder => Esta es la sección donde comenzamos a dibujar nuestra página.

  

  Publicar en Android

  Créditos

  • Gracias al canal de YouTube de HardWareandro => https://www.youtube.com/@hardwareandro
  • Gracias a Veli Bacık, quien proporciona estos entrenamientos para contribuir a mi aprendizaje sobre estos temas. => https://github.com/vb10