Viendo el proyecto, se agrego la carpeta pagination
usando cada uno, los estilos resultantes son: **tomar en cuenta que en mi página ya tengo estilos personalizados, por lo cual podrían verse diferente**
Buscando opciones de como pasar del diseño al código ( ver como pasar del diseño en Sketch o Adobe XD a android, react, ios o flutter) , encontré otra opción de hacerlo desde Adobe XD, a diferencia de SuperNova, se puede pasar por partes y no es necesario hacer ajustes al código, al menos para que se vea igual al diseño.
Instalar plugin Adobe XD a Flutter
En Adobe XD menu>complementos>Administrar Complementos
Click en la pestaña “Explorar” y escribir Flutter, instalar “XD to Flutter” > Instalar
Indicara que lo instalo, luego crear o abrir algún diseño de adobe XD
Crear y configurar el proyecto Flutter
flutter create --org=com.example xd2flutter
All done!
In order to run your application, type:
$ cd xd2flutter
$ flutter run
To enable null safety, type:
$ cd xd2flutter
$ dart migrate --apply-changes
Your application code is in xd2flutter/lib/main.dart.
// in pubspec.yaml
dependencies:
adobe_xd: ^1.0.0
#flutter_svg: ^0.17.1
flutter_svg: ^0.20.0-nullsafety.3
Si se usa el Flutter SVG que recomienda el tutorial de adobe, obtendrá un error como este
/Library/Flutter/flutter/packages/flutter/lib/src/widgets/localizations.dart:413:17: Context: Found this candidate, but the arguments don't match.
static Locale localeOf(BuildContext context) {
Tomar en cuenta agrupar los texto con el rectangulo del boton para que haga un widget y no dos superpuestos por stack
Básicamente usa Stack y Pinned, por lo cual agrupar es importante cuando se va ajustar Tiene tamaños fijos, se podría quitar el widget dentro del Pinned y jugar con Columns y Rows para hacerlo adaptables
Si no se selecciona un elemento, se exporta todo como widgets, se debe escoger un proyecto creado previamente, se puede indicar la ruta donde se guardará los widgets generados (por defecto lib), la ruta donde se guardara las imágenes (por defecto assets/images)
Luego la ruta del proyecto
Escoger y seleccionar “Continue”, después de un momento se generará en el proyecto los widgets
No olvidar agregar la ruta de assets en pubspec.yaml
assets:
- assets/images/
Por ejemplo para ver de adobeXD analitycs 8
Trabajar con imágenes para generar el código de AdobeXD a Flutter
Como mencione, se agrega el asset/images/ en la ruta del pubspec y es la misma ruta que se configura cuando se exporta en Adobe XD
Selecciona una imagen y asignar un nombre en el campo “image export name” y “image parameter”, en caso se quiera recibir como parámetro en Flutter y click en “export image”
Y la imagen se exportar en la carpeta indicada assets/images
Modificando el main.dart, para cargar el widget de la imagen, se muestra pero debe trabajarse para centrarlo
Y así se debe trabajar cada imagen, en caso de no hacerlo, cuando se muestre este widget, mostrará un error por no encontrar la imagen.
Si se actualiza un widget, solo no se deja seleccionado ningún elemento, y click en “export all widgets”, los widgtes, se generarán nuevamente, igual con las imágenes, OJO; se borrarán todos los cambios que halla realizado, para esto si lo modificó, en mi caso los copio en otro widget.
Añadiendo interacción en Adobe XD y transformarlo en navegación en Flutter
En AdobeXd, en la parte superior seleccionar “Prototipo” y presionar sobre la flecha azul de la foto y jalarlo hasta Analitycs-9 por ejemplo.
Luego seleccionar al vacío y en el panel del plugin , marcar “Prototype interactions” y click en “Export al images” y “Export all widgets”
Una vez exportado, se exporta o aplica hot reload y presionando sobre la foto, pasa a la pantalla Analitycs-9
Fin u.u
Listo, lo demás es experimentar, que tanto convendría, ya que los tamaños son fijos y es stack+Pinned, que se deben adaptar
Igual que en Supernova, dependerá que tan complejo es el widget, talves en los trabajosos, con sombras bordes y formas, sea conveniente, pero en los mas simples como títulos, sea mas rápido hacerlo directamente.
Buscando si había herramientas para pasar del diseño a código, encontré SuperNova, en youtube puede encontrar algunos tutoriales y su presentación oficial.
Advertencia: Actualmente en la fecha en que se hace este post, supernova ya no ofrece la descarga, sino registro para acceso a su nueva versión que “pronto” saldrá, no hay fecha, por eso si no puede obtenerlo, por lo cual talves continuar leyendo no le sea útil, incluso el código generado no es con las versiones actuales de los framework ( Android, IOS, Flutter y React)
Advertencia: Al trabajar el diseño en supernova, se vera bien, pero al momento de exportarlo, y abrirlo en su propia plataforma ( android studio, visual studio code para flutter, etc), presentará problemas por versiones y las pantallas no se mostrarán exactamente igual y necesitará ajustarlo para mostrarlo y compilar correctamente , … en su presentación no mostraron la parte de exportación.
Una ves registrado y abrir , le mostrará la pantalla de bienvenida
Probando el archivo de ejemplo obtuve errores, por lo cual probé con algunos archivos propios
Presione sobre “Import” y seleccione el archivo ( no encontré diferencias en el código generado si el diseño es de sketch o adobe XD )
Sobre las pestañas “Studio/Sketch/Adobe”, son solo los archivos recientes, studio son los archivos creados por Supernova, ya que los diseños importados, se trabajan antes de exportar.
Y los iconos de sol y luna son para cambiar el diseño claro y oscuro.
Cuando importe el archivo, preguntará cuales diseños desea importar, y seleccione la plataforma ( se puede cambiar despues)
Cargará los archivos
Cada parte: 1 ) Screens, muestra cada pantalla, Componentes, muestra el arbol de los elementos de la pantalla, y assets, son las imágenes que se usaron en el diseño.
2) Muestra el flujo de las pantalla establecidos en SuperNova
3) Muestra la pantalla selecciona
4) Con el botón play, pueden emular como esta quedando la pantalla en diferentes tamaños, modos landscape y portrait
El símbolo </>, muestra un previo del código generado, que bien puede copiarlo y pegarlo ( probado solo en flutter)
5) Con el penúltimo botón puede exportar, puede probar los otros, son configuraciones y documentación
Por ejemplo seleccionamos el boton “Create account”
En el panel de derecho pueden revisar los 4 circulos
Las lineas horizontales y verticales, es para indicar que mantenga su ancho o alto Los 4 puntos es para indicar que va a mantener su distancia actual a cada lado, es decir, si marco el punto derecho y abajo, el botón mantendrá esa distancia
Para ir de una pantalla a otra, selecciona el “botón”, hasta ahora solo era un elemento visual, para poder clickearlo, se tranforma en boton , click derecho>Convert component>Button
Luego agregar la interacción, click derecho > Create interaction>push>send money ( nombre de la pantalla que navegara )
Presiona sobre PLAY y podrá probar la interacción
Exportar proyecto
Presionar sobre el botón de exportar y pedirá algunas configuraciones, que puede cambiar o dejarlo
Click, sobre exportar ( en este ejemplo se hizo con flutter ), luego abrirlo en Visual Studio Code, obtener paquetes y ejecutar, se vera algo asi
Como se ve, no es igual al diseño, pero los widgets están creados y puede editarse para que quede igual, como se sabe diseñar en flutter es “sencillo y rapido”, dependiendo de la complejidad, por eso esta herramienta al menos en mi caso, la usare para widget complejos, como sombras o formas y copiar el código en el proyecto.
