Cómo crear gráficos ondeantes en la plataforma Android

Prerrequisitos

Dado que este es un proyecto de Android, uso Android Studio como un IDE. Ya instalé los complementos Flutter y Dart. También configuré un emulador de Android para probar los cambios de código.

Prepara el backend

  • Crea un nuevo proyecto de Flutter y selecciona una aplicación de Flutter. Por lo tanto, incluya Kotlin como lenguaje de plataforma.
  • Abre el MainActivity.kt y elija «Abrir para editar en Android Studio» en una nueva ventana. El cliente y el código de la plataforma estarán en dos ventanas separadas.
  • Reemplaza el contenido del archivo con nuestro código:

Tenga en cuenta que debemos proporcionar un archivo MethodChannel. Debe coincidir con el de Flutter MethodChannel, que configuraremos más adelante. De esta manera podemos enviar mensajes del lado del cliente que coincidan con los métodos del lado de la plataforma. También podemos recibir llamadas a métodos del lado de la plataforma y enviar el resultado al front-end.

Aquí hemos especificado un método getData() que será llamado por el cliente. Este es el lugar donde normalmente obtiene datos, por ejemplo, una base de datos SQLite. Depende de usted decidir cómo recuperar los datos. Para simplificar, codificaremos algunos valores.

Suponga que desea ver sus gastos para los años entre 2015 y 2019. He ingresado algunos datos en un archivo HashMap.

Hemos terminado con la parte de la plataforma.

Prepara la parte delantera

Ir al archivo lib directorio del proyecto en una ventana separada de Android Studio.

  • Primero, importemos la biblioteca charts_flutter agregando una nueva dependencia en el archivo pubspec.yaml archivo:
charts_flutter: ^0.9.0
  • Creemos nuestro DTO creando un nuevo archivo Dart llamado dto.dart:

Solo necesitamos un año y un gasto para nuestras clasificaciones. Para mostrar los datos en orden descendente del año, usaremos el compareByYear(LinearExpenses expenses) método.

  • Implemente el gráfico circular creando un nuevo archivo Dart llamado piechart.dart:

Mira, hemos definido el archivo. MethodChannel Aquí.

Dado que llamaremos a un método asincrónico para mantener la GUI receptiva, necesitamos devolver un archivo FutureBuilder con nuestra lista de gastos del backend.

Elegí un gráfico circular de anillos con colocación automática de etiquetas. Si la etiqueta encaja en el gráfico, aparecerá en el interior; de lo contrario, fuera. Puede cambiar esta propiedad configurando el ArcLabelPosition.

Definiendo el arcWidth, el gráfico circular tiene la forma de una rosquilla. Si omite esta propiedad, obtendrá un gráfico circular simple.

los animate crea una animación cuando se renderiza el gráfico. Le agrega un efecto agradable. También puede especificar un tiempo de duración para la animación.

  • Implementar el gráfico de barras creando un archivo barchart.dart archivo:
  • Crear un util.dart archivo para preparar las tarjetas.
  • Este es el código del gráfico circular:
  • La implementación del gráfico de barras es ligeramente diferente:

Tenga en cuenta que vuelve List<charts.Series<LinearExpenses, String>>, como regresa el gráfico circular List<charts.Series>.

  • Eliminar el contenido generado automáticamente del archivo main.dart archivo para reemplazarlo con el nuestro.

Necesitamos estas importaciones:

  • También creamos un archivo enum para nuestros tipos de gráficos porque es más elegante:
enum ChartType { PIE, BAR }
  • Luego creamos el archivo MyApp es MyHomePage widget:
  • Crea el archivo _MyHomePageState artilugio:

Aquí hemos definido el mismo canal que la plataforma.

Tendremos un menú desplegable donde podremos seleccionar el tipo de gráfico que queremos mostrar. El valor predeterminado es PIE.

los _getAsyncData() recuperará los resultados que queremos ver desde el lado de la plataforma invocando los nuestros getData() método.

  • Construimos el nuestro MyHomePage artilugio:

Como quiero mostrar varios widgets en la misma pantalla, estoy usando un archivo Container con dos Columns. Uno es para el menú desplegable y el otro es para los gráficos.

  • A continuación, se explica cómo crear el menú desplegable:

Tenga en cuenta que Dart enum mostraría el valor como ChartType.BAR. Sin embargo, se verá mejor si sacamos los nombres, en este caso «PIE» y «BAR». Por eso estoy usando el split() método.

Cuando el usuario selecciona un valor de la lista, el onChanged() se llama al método y cambiamos el tipo de gráfico según la selección.

  • Pegue este código para crear el gráfico:

¡Eso es todo! Ahora comencemos nuestra aplicación y probémosla.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *