Pasar de diseño a Flutter – con Adobe XD

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.

Agregamos las librerías necesarias que usa el plugin al generar el código
Adobe XD ( https://pub.dev/packages/adobe_xd/install ) y
Flutter SVG ( https://pub.dev/packages/flutter_svg )

// 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) {

Para eso se importa su version con el null safety : flutter_svg: ^0.20.0-nullsafety.3 ( https://stackoverflow.com/questions/66098977/flutter-dependency-error-flutter-svg-0-19-21 )

Probamos y obtenemos este error

E/AndroidRuntime(10045): FATAL EXCEPTION: main
E/AndroidRuntime(10045): Process: com.example.xd2flutter, PID: 10045
E/AndroidRuntime(10045): java.lang.RuntimeException: Unable to start activity ComponentInfo{com.example.xd2flutter/com.example.xd2flutter.MainActivity}: android.content.res.Resources$NotFoundException: File res/drawable-v21/launch_background.xml from drawable resource ID #0x7f040000

El cual indica que no encuentra el recurso launch_background, para resolverlo, se puede comentar el meta en android manifest

 <meta-data
              android:name="io.flutter.embedding.android.SplashScreenDrawable"
              android:resource="@drawable/launch_background"
              />

O en el archivo launch_background.xml, editando el ?android/colorbackground por @android:color/white

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />

    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/ic_launcher" />
    </item>
</layer-list>

y corre ok

Obtener por widget de Adobe XD para Flutter

En Adobe XD, abrir o crear un diseño, luego ir a menu>complementos> XD to Flutter

Y aparecera un panel izquierdo, el cual mostrará un previo del elemento seleccionado, luego click en “Copy Selected”

Si se ve en blanco, agrupar los elementos

y ya aparece en el previo

Copiando el widget, modifique el main para renderizarlo desde un metodo _getAdobeWidget1

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(toolbarHeight: 0),
      body: _getAdobeWidget1(),
    );
  }

  Widget _getAdobeWidget1() {
    return SizedBox(

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

Widget _getAdobeWidget1() {
    return SizedBox(
      width: 381.0,
      height: 312.0,
      child: Stack(
        children: <Widget>[
          Pinned.fromSize(
            bounds: Rect.fromLTWH(0.0, 0.0, 381.0, 312.0),
            size: Size(381.0, 312.0),
            pinLeft: true,
            pinRight: true,
            pinTop: true,
            pinBottom: true,
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(35.0),
                color: const Color(0xffffffff),
                boxShadow: [
                  BoxShadow(
                    color: const Color(0x14000000),

Obtener un Widgets mas complejo

Probando un elemento un poco mas complejo

Las imágenes las pasa como SVG y los pinta con la librería Flutter SVG

// Adobe XD layer: 'Item' (group)
      SizedBox(
    width: 124.0,
    height: 113.0,
    child: Stack(
      children: <Widget>[
        Pinned.fromSize(
          bounds: Rect.fromLTWH(0.0, 0.0, 124.4, 112.7),
          size: Size(124.4, 112.7),
          pinLeft: true,
          pinRight: true,
          pinTop: true,
          pinBottom: true,
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(5.0),
              color: const Color(0xffffffff),
              border: Border.all(width: 2.0, color: const Color(0xfff9c229)),
              boxShadow: [
                BoxShadow(
                  color: const Color(0x59bbbbbb),
                  offset: Offset(0, 7),
                  blurRadius: 11,
                ),
              ],
            ),
          ),
        ),
        Pinned.fromSize(
          bounds: Rect.fromLTWH(9.9, 82.6, 104.0, 20.0),
          size: Size(124.4, 112.7),
          pinLeft: true,
          pinRight: true,
          pinBottom: true,
          fixedHeight: true,
          child: Text(
            'Movimientos',
            style: TextStyle(
              fontFamily: 'Rubik',
              fontSize: 17,
              color: const Color(0xff686868),
              fontWeight: FontWeight.w500,
            ),
            textAlign: TextAlign.center,
          ),
        ),
        Pinned.fromSize(
          bounds: Rect.fromLTWH(30.0, 13.2, 65.1, 65.1),
          size: Size(124.4, 112.7),
          pinLeft: true,
          pinRight: true,
          pinTop: true,
          fixedHeight: true,
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.all(Radius.elliptical(9999.0, 9999.0)),
              color: const Color(0x5cffee9b),
            ),
          ),
        ),
        Pinned.fromSize(
          bounds: Rect.fromLTWH(42.0, 24.4, 41.6, 43.1),
          size: Size(124.4, 112.7),
          child:
              // Adobe XD layer: 'icon' (group)
              Stack(
            children: <Widget>[
              SvgPicture.string(
                '<svg viewBox="11.8 90.8 41.6 43.1" ><path  d="M 25.75422286987305 108.2598648071289 C 25.85722923278809 108.0872268676758 25.91364479064941 107.9320526123047 25.91364479064941 107.8038787841797 C 25.91364479064941 94.99887084960938 32.45513534545898 92.0467529296875 34.02599716186523 91.07327270507812 C 34.29887771606445 90.91349792480469 34.28226852416992 90.84697723388672 33.96943664550781 90.84697723388672 C 23.84692001342773 90.84697723388672 17.59330558776855 98.11896514892578 17.59330558776855 107.8038787841797 C 17.59330558776855 107.9621658325195 17.59762001037598 108.1138763427734 17.60567855834961 108.2598648071289 L 11.76902770996094 108.2598648071289 L 21.75347328186035 121.0432281494141 L 31.7379207611084 108.2598648071289 L 25.75422286987305 108.2598648071289 Z" fill="#f9c229" stroke="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" /><path transform="translate(-251.76, -170.23)" d="M 305.1342163085938 286.807373046875 L 295.1497802734375 274.0239868164062 L 285.1653442382812 286.807373046875 L 291.1480407714844 286.807373046875 C 291.0456848144531 286.9793701171875 290.9896240234375 287.1339111328125 290.9896240234375 287.2616577148438 C 290.9896240234375 300.068359375 284.4481201171875 303.018798828125 282.8772583007812 303.9922485351562 C 282.6043701171875 304.1536560058594 282.6209716796875 304.2202453613281 282.933837890625 304.2202453613281 C 293.0563354492188 304.2202453613281 299.3099365234375 296.9465637207031 299.3099365234375 287.26171875 C 299.3099365234375 287.10400390625 299.3056335449219 286.952880859375 299.2976379394531 286.8074340820312 L 305.1342163085938 286.8074340820312 Z" fill="#f9c229" stroke="none" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" /></svg>',
                allowDrawingOutsideViewBox: true,
              ),
            ],
          ),
        ),
      ],
    ),
  );

Repositorio:
https://github.com/JavierSolis/AdobeXD_to_Flutter_by_widget

Exportar todo el diseño AdobeXD a Flutter

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.

Repositorio:
https://github.com/JavierSolis/AdobeXD_to_Flutter_complete

Actualizar diseño y actualizar widget generado

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.

Referencias:

Blog de Adobe XD donde anuncian el plugin para generar código para Flutter
https://blog.adobe.com/en/2019/12/11/xd-flutter-plugin-generate-dart-code-design-elements.html#gs.xbnowk
https://blog.adobe.com/en/2020/09/10/xd-flutter-plugin-now-available.html#gs.xcpvma

Repositorio del plugin de Adobe XD
https://github.com/AdobeXD/xd-to-flutter-plugin

Solución al error con Flutter SVG
https://stackoverflow.com/questions/66098977/flutter-dependency-error-flutter-svg-0-19-21

Post de como usar Flutter SVG
https://dev.to/mightytechno/render-svg-in-flutter-app-4kan

Repositorio de flutter generado por widget
https://github.com/JavierSolis/AdobeXD_to_Flutter_by_widget

Repositorio de flutter generado de todo el diseño
https://github.com/JavierSolis/AdobeXD_to_Flutter_complete

Pasar del diseño a Flutter – SuperNova

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.

Primero descargue SuperNova https://download.cnet.com/developer/supernova-studio/i-11246412, actualmente es gratuito, si pide una actualización, proceda y obtendrá la versión completa.

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

Edición Básica

Pueden revisar un tutorial mas completo en el canal de Angaa : https://youtu.be/51Jq4umRxfI – de Angga Risky

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.

Pueden descargar el proyecto generado desde github
https://github.com/JavierSolis/SuperNova_example_beep

Referencias:
Tutorial de uso de SuperNova
https://youtu.be/51Jq4umRxfI – de Angga Risky

Documentación No encontrada de SuperNova
https://help.supernova.io/docs/preview-window

Documentación aún publica de SuperNova
https://help.supernova.io/docs/components

Descarga alternativa de SuperNova
https://download.cnet.com/developer/supernova-studio/i-11246412

Adobe XD
https://www.adobe.com/la/products/xd.html

Flutter Espaciado en Lista de columna

Column, spacing

Cuando queremos un espacio entre los hijos children del widget Column, normalmente usan SizeBox, pero con Wrap se puede usar un atributo para el spaceado entre los hijos

Wrap(
  spacing: 20, // to apply margin in the main axis of the wrap
  runSpacing: 20, // to apply margin in the cross axis of the wrap
  children: <Widget>[
     Text('child 1'),
     Text('child 2')
  ]
)

Flutter Stack posiciones

Como indicar posiciones a los hijos en un widget stack

Stack(
  children: <Widget>[      
    Positioned.fill(
      child: Align(
        alignment: Alignment.centerRight,
        child: ....                
      ),
    ),
  ],
),

Flutter box shadow – sombreado

Aplicar sombra a un container con decoration

return Container(
  margin: EdgeInsets.only(left: 30, top: 100, right: 30, bottom: 50),
  height: double.infinity,
  width: double.infinity,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(10),
        topRight: Radius.circular(10),
        bottomLeft: Radius.circular(10),
        bottomRight: Radius.circular(10)
    ),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 5,
        blurRadius: 7,
        offset: Offset(0, 3), // changes position of shadow
      ),
    ],
  ),
)

Crear librerías comunes entre aplicaciones Flutter

Desarrollando un sistema, que consta de dos apps según el rol del usuario, ( conductor y pasajero, vendedor y comprador, administrador y empleado, etc ), percate que si bien ya puedo desplegar en ambas plataformas, hay partes de la interfaz y la API que se repite, solo la lógica parece única, entonces surge la necesidad de compartir este código común.

La primera solución fue copiar el código en un paquete dentro de lib, pero como esta en desarrollo se repetirá muchas veces ese paso lo cual suena doloroso, así que probare el concepto de cómo compartirlo entre ambas apps.

bueno, al código.

Creamos 3 aplicaciones: Cliente1, Cliente2 y Librería

$ flutter create --org=com.example.cliente1 Cliente1
$ flutter create --org=com.example.cliente2 Cliente2
$ flutter create --org=com.example.libreria Libreria

Trabajaré en la aplicación Cliente1 agregando la librería y luego repetiré lo mismo en la Cliente2 para comprobarlo.

Lo que necesito probar en este caso es :
– Si se puede compartir widgets
– Si la librería tiene dependencias, estas deben cargarse en la principal o se puede obviar.
– Si se puede configurar variables en la librería desde el cliente.

Tomando el caso del sistema, una parte común entre ambas apps, es el chat.

Primero trabajaremos en la librería

Librería

Para probar cada requerimiento se hará:

– Si se puede compartir widgets.
Se implementará un widget del botón que iniciara el chat que cada cliente colocara donde lo necesite.

– Si la librería tiene dependencias, estas deben cargarse en la principal o se puede obviar.
Se usará un paquete de iconos en la librería.

– Si se puede configurar variables en la librería desde el cliente
Se seteará un parámetro que es global en la librería, para ver como se comporta en el cliente..

Primero implementé como si fuera un proyecto normal para verificar su funcionamiento, separando los componentes que serán reusables.

Repositorio:

https://github.com/JavierSolis/Flutter_DemoLibreria_Libreria

Los cambios para hacerlo librería son:

Crear un archivo “lib_chat.dart” donde indican que archivos serán expuestos para los clientes. ( nota: aún no tengo ni he visto un convención para los nombres, por el momento le colocare el prefijo de lib_*)
Al momento de usarlo en cliente, no se puede usar las dependencias que se uso en la librería, pero si se exponen, por ejemplo “flutter_icons.dart”, se pueden usar en el cliente.
Se creo un nuevo widget “widget_button_chat.dart”, solo para encerrar en una clase el botón del chat y usarlo en el cliente.

library lib_chat;

//expone el wiget button
export 'widget/widget_button_chat.dart';
//expone la página del chat
export 'page/chat_page.dart';
//expone la configuración que usa el chat
export 'constants.dart';

//agregado después para exponer la dependencia que se uso en la librería
export 'package:flutter_icons/flutter_icons.dart';

import 'package:Libreria_chat/page/chat_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_icons/flutter_icons.dart';

class ButtonChatWidget extends StatelessWidget {
  final String urlContactPhoto;
  final String nameContact;
  const ButtonChatWidget({Key key, this.nameContact, this.urlContactPhoto})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: () {
        Navigator.pushReplacement(
            context,
            MaterialPageRoute(
                builder: (BuildContext context) => ChatPage(
                    contactName: this.nameContact,
                    urlContactPhoto: this.urlContactPhoto)));
      },
      child: Icon(AntDesign.message1),
    );
  }
}

En pubspec.yaml no es necesario ningún cambio, pero para poder identificarlo mejor, cambie el nombre a “libreria_chat“, eso conllevo cambiar el paquete en algunos archivos.

name: Libreria_chat
description: Libreria de chat
...

import 'package:Libreria_chat/constants.dart';
import 'package:Libreria_chat/widget/widget_chat.dart';
import 'package:flutter/material.dart';

class ChatPage extends StatelessWidget {

Repositorio:

https://github.com/JavierSolis/Flutter_DemoLibreria_Libreria_refactorizado

Cliente 1

Para usar la librería en el Cliente 1, se agrega la dependencia en pubspec.yaml. indicando el nombre “Libreria_chat” y la ruta “path:“

...
dependencies:
  flutter:
    sdk: flutter
  Libreria_chat:
    path: ../LibreriaRefactorizado #ruta a la librería

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.0
...

En main.dart , agregue el botón button_chat_widget y un icono de una dependencia de la librería Icon(AntDesign.message1) ( esto se pudo después de exponerlo en la librería por defecto sus dependencias no están disponibles) y se configuro la variable constante en la librería CHAT_USER_NAME.

import 'package:Libreria_chat/constants.dart';
import 'package:Libreria_chat/widget/widget_button_chat.dart';
import 'package:flutter_icons/flutter_icons.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Cliente 1'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    CHAT_USER_NAME = "Javier Solis";
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Icon(AntDesign.message1),
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
        floatingActionButton: ButtonChatWidget(
          urlContactPhoto:
              "https://crop-circle.imageonline.co/images/picture.png",
          nameContact: "Raul",
        ));
  }
}

Video:

Repositorio:

https://github.com/JavierSolis/Flutter_DemoLibreria_Cliente_1

y listo.

Tenemos una librería que podemos rehusar. Ahora podemos tener una librerías de utilitarios que podemos usar en todas nuestras app ( notificaciones, login, control de permisos , etc) que ahorrara tiempo en configurar, en grupo de apps conductor/cliente, etc.

Notas adicionales:

Si tengo abierto la librería y hago un cambio, luego haces hotreload en el cliente, los cambios en la librería se cargarán.
No implemente el cliente 2, porque los pasos son los mismos al cliente 1.
La librería también se puede publicar en pub.dev o referenciar desde github.

Referencias:

Iconos de ejemplo
https://pub.dev/packages/flutter_icons

Lista
https://googleflutter.com/flutter-add-item-to-listview-dynamically/

Border rounded
https://stackoverflow.com/a/57778500

Parte 4 – Configurar Proyecto Flutter para escuchar las notificaciones

Este post es parte del tutorial Flutter agregar push notificaciones para IOS y Android

En main importar el paquete

import 'package:firebase_messaging/firebase_messaging.dart';

En _MyHomePageState , agregar una variable de firebase messaging y configurar sus listener.

...
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  final FirebaseMessaging _firebaseMessaging = FirebaseMessaging();
  
  @override
  void initState() {
    super.initState();
    _firebaseMessaging.configure(
      onMessage: (Map<String, dynamic> message) async {
        print("onMessage: $message");
      },
      onLaunch: (Map<String, dynamic> message) async {
        print("onLaunch: $message");
      },
      onResume: (Map<String, dynamic> message) async {
        print("onResume: $message");
      },
    );
    _firebaseMessaging.requestNotificationPermissions(
        const IosNotificationSettings(
            sound: true, badge: true, alert: true, provisional: true));
    _firebaseMessaging.onIosSettingsRegistered
        .listen((IosNotificationSettings settings) {
      print("Settings registered: $settings");
    });
    _firebaseMessaging.getToken().then((String token) {
      assert(token != null);
      print("Token: $token");
    });
  }
...

Lanzar el emulador IOS, en caso no sepa como hacerlo, en los siguientes link se describe como:

Corriendo debera notar que imprime un token

Con el token podemos dirigir la notificación para este dispositivo, esto es opcional ya que sino lo especificamos enviara a todos, pero lo haremos así para poder probar mas rápido porque las notificaciones pueden demorar hasta 1 semana según la documentación.

Vamos a firebase > Cloud Messaging > send your first message

Luego llenamos el formulario y click en “Enviar mensaje de prueba”

Pegamos el token en la ventana luego click en boton “+” y click en “probar”

Revisando el output en visual studio code, se vera la notificación

flutter: onMessage: {from: 1064278709680, collapse_key: com.example.demoNotifications, notification: {body: Contenido de prueba, title: Prueba, e: 1, tag: campaign_collapse_key_5758946879053100963}}

Parte 3 – Creamos proyecto en Firebase

Este post es parte del tutorial Flutter agregar push notificaciones para IOS y Android

Creamos proyecto en firebase desde https://console.firebase.google.com/ y luego click en “Agregar proyecto“

En este caso lo nombraremos demo-notifications-flutter

seguir los siguientes pasos, continue hasta crear el proyecto,

En el panel que se muestra, escogemos IOS

En el formulario de registro, pedirá el Id del proyecto, para obtenerlo abrir el proyecto en xcode, abrir el archivo Runner.xcworkspace

Seleccionar según la imagen Runner>Runner>General y copiar lo que indica en Bundle identifier

Volvemos al registro de firebase y llenamos los datos, click en “Registrar app“

Descargamos el archivo GoogleService-Info.plist

Copiar el archivo según indica, ojo: copiarlo en la carpeta no tendrá efecto, debe copiarse en el proyecto en xcode, click en siguiente

En este paso se agregaría la librería de firebase, pero eso lo hicimos en un paso previo

Luego ejecutar pod install, flutter ya instancio el pod, para eso ubicarse en la carpeta ios desde la terminal y ejecutar pos install

Si todo va bien debería mostrar un mensaje así.

SI Xcode muestra una advertencia puede cerrarlo, será necesario abrirlo luego.

Ignoraremos el siguiente paso, ya que estamos en un proyecto flutter, eso lo haremos en el proyecto flutter en el siguiente paso, click en Siguiente

y click en “Ir a consola”.

Parte 2 – Agregar dependencias de Firebase Messaging

Este post es parte del tutorial Flutter agregar push notificaciones para IOS y Android

Abrir el proyecto flutter en Visual studio code

Ahora buscamos los paquetes que necesitaremos en https://pub.dev y buscar firebase messaging

https://pub.dev/packages/firebase_messaging

Click en “Installing” y seguir las instrucciones, para esta versión indica, agregar firebase_messaging: ^7.0.3 en el archivo pubspec.yaml las dependencias

...
dependencies:
  flutter:
    sdk: flutter
  firebase_messaging: ^7.0.3
...

Guardar el archivo y Visual Studio comenzará a obtener las dependencias, esperar que termine.

Si todo va bien debe mostrar el siguiente mensaje

Listo.

Flutter agregar push notificaciones para IOS y Android

Nota: Revisar la fecha y las dependencias usadas, ya que por políticas de las plataformas o nuevas versiones de estas librerías las indicaciones pueden variar

Para los que pueden guiarse de la documentación oficial, solo necesitan:

Crear un proyecto flutter
Instalar el paquete https://pub.dev/packages/firebase_messaging/install
Seguir la guía que indica en el readme según la plataforma
Para android: https://pub.dev/packages/firebase_messaging#android-integration
Para IOS: https://pub.dev/packages/firebase_messaging#ios-integration

Sino pueden ver paso a paso.