Cómo visualizar datos en Flutter con fl_chart y Back4App

introducción la visualización de datos es un aspecto crucial de las aplicaciones modernas, ayudando a los usuarios a entender datos complejos a través de gráficos y diagramas intuitivos en este tutorial, aprenderás cómo crear gráficos interactivos y visualmente atractivos en tu aplicación flutter utilizando el fl chart paquete además, integrarás back4app—una plataforma de backend como servicio (baas) impulsada por parse server—para almacenar y recuperar datos para tus gráficos al final de este tutorial, tendrás una aplicación flutter completamente funcional que muestra datos dinámicos obtenidos de back4app utilizando varios tipos de gráficos como gráficos de líneas, de barras y de pastel requisitos previos para completar este tutorial, necesitarás una cuenta de back4app si no tienes una, puedes registrarte para obtener una cuenta gratuita en back4app https //www back4app com/ flutter sdk instalado en tu máquina local puedes seguir la guía de instalación oficial de flutter https //flutter dev/docs/get started/install para tu sistema operativo conocimientos básicos de dart y flutter si eres nuevo en flutter, considera revisar la documentación de flutter https //flutter dev/docs para familiarizarte con los conceptos básicos parse server sdk para flutter agregado a tu proyecto puedes aprender cómo configurarlo siguiendo la guía de sdk de flutter de back4app https //www back4app com/docs/flutter/parse flutter sdk un ide o editor de texto como visual studio code o android studio paso 1 – configuración del backend de back4app en este paso, crearás una nueva aplicación de back4app y configurarás una clase de datos para almacenar los datos de tu gráfico 1 1 crear una nueva aplicación de back4app inicia sesión en tu panel de back4app https //dashboard back4app com/ haz clic en "crear nueva app" ingresa un nombre para tu aplicación, por ejemplo, "flutterchartapp" , y haz clic en "crear" 1 2 configurar el modelo de datos en el panel de control de tu aplicación, navega a la "base de datos" sección en la barra lateral izquierda haz clic en "crear una clase" en la parte superior de la página en el modal que aparece selecciona "personalizado" ingresa "datosdeventas" como el nombre de la clase haz clic en "crear clase" 1 3 agregar columnas a la clase en la clase "datosdeventas" , haz clic en "+" para agregar una nueva columna agrega las siguientes columnas mes tipo cadena ventas tipo número tu modelo de datos ahora está configurado para almacenar datos de ventas mensuales, que visualizarás en tu aplicación flutter paso 2 – población de la base de datos con datos de ejemplo antes de obtener datos en tu aplicación, necesitas algunos datos de ejemplo en tu base de datos de back4app aún en la clase "datosdeventas" , haz clic en "+" para agregar una nueva fila ingresa los siguientes datos de ejemplo repite los pasos anteriores para agregar todas las entradas de datos de ejemplo paso 3 – configuración del proyecto flutter en este paso, crearás un nuevo proyecto de flutter y agregarás las dependencias necesarias 3 1 crear un nuevo proyecto de flutter abre tu terminal y ejecuta flutter create flutter chart app navega al directorio del proyecto cd flutter chart app 3 2 agregar dependencias a pubspec yaml abre pubspec yaml y agrega las siguientes dependencias dependencies flutter sdk flutter fl chart ^0 60 0 parse server sdk flutter ^4 0 1 ejecuta flutter pub get para instalar los paquetes paso 4 – inicializando parse en tu aplicación flutter para conectar tu aplicación flutter con back4app, necesitas inicializar el sdk de parse 4 1 obtén las credenciales de la aplicación de back4app en tu panel de control de back4app, navega a "configuración de la aplicación" > "seguridad y claves" anota tu id de aplicación y clave de cliente 4 2 inicializa parse en main dart abre lib/main dart y modifícalo de la siguiente manera import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'home page dart'; // you'll create this file in the next step void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your application id'; const keyclientkey = 'your client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize( keyapplicationid, keyparseserverurl, clientkey keyclientkey, debug true, ); runapp(myapp()); } class myapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( title 'flutter chart app', theme themedata( primaryswatch colors blue, ), home homepage(), ); } } reemplace 'your application id' y 'your client key' con las credenciales que obtuvo de back4app paso 5 – recuperando datos de back4app en este paso, recuperará los datos de ventas de back4app utilizando el sdk de parse 5 1 crear home page dart cree un nuevo archivo lib/home page dart y agregue el siguiente código import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk dart'; import 'package\ fl chart/fl chart dart'; class homepage extends statefulwidget { @override homepagestate createstate() => homepagestate(); } class salesdata { final string month; final double sales; salesdata(this month, this sales); } class homepagestate extends state\<homepage> { list\<salesdata> chartdata = \[]; @override void initstate() { super initstate(); fetchsalesdata(); } future\<void> fetchsalesdata() async { final querybuilder\<parseobject> query = querybuilder\<parseobject>(parseobject('salesdata')); final parseresponse apiresponse = await query query(); if (apiresponse success && apiresponse results != null) { setstate(() { chartdata = apiresponse results! map((data) { final month = data get\<string>('month') ?? ''; final sales = data get\<num>('sales')? todouble() ?? 0 0; return salesdata(month, sales); }) tolist(); }); } else { // handle errors print('error fetching data ${apiresponse error? message}'); } } @override widget build(buildcontext context) { return scaffold( appbar appbar( title text('sales chart'), ), body chartdata isempty ? center(child circularprogressindicator()) padding( padding const edgeinsets all(16 0), child linechart( linechartdata( miny 0, maxy 250, titlesdata fltitlesdata( lefttitles axistitles( sidetitles sidetitles(showtitles true), ), bottomtitles axistitles( sidetitles sidetitles( showtitles true, gettitleswidget bottomtitlewidgets, interval 1, ), ), ), griddata flgriddata(show true), borderdata flborderdata( show true, border border all(color colors grey), ), linebarsdata \[ linechartbardata( spots chartdata asmap() entries map((e) => flspot( e key todouble(), e value sales)) tolist(), iscurved true, barwidth 3, colors \[colors blue], dotdata fldotdata(show true), ), ], ), ), )); } widget bottomtitlewidgets(double value, titlemeta meta) { const style = textstyle( fontsize 12, ); widget text; int index = value toint(); if (index >= 0 && index < chartdata length) { text = text(chartdata\[index] month substring(0, 3), style style); } else { text = text('', style style); } return sidetitlewidget( axisside meta axisside, child text, ); } } explicación clase salesdata una clase de modelo simple para contener el mes y los datos de ventas fetchsalesdata() obtiene datos de la clase salesdata en back4app y actualiza la lista chartdata linechart utiliza fl chart para crear un gráfico de líneas basado en los datos obtenidos bottomtitlewidgets() personaliza las etiquetas del eje inferior para mostrar las abreviaturas de los meses paso 6 – ejecutando la aplicación ahora que has configurado el frontend y el backend, es hora de ejecutar tu aplicación en tu terminal, navega a tu directorio de proyecto ejecuta la aplicación usando flutter run deberías ver un gráfico de líneas que muestra los datos de ventas de cada mes paso 7 – agregar interactividad y personalización para hacer que tu gráfico sea más interactivo y visualmente atractivo, puedes personalizarlo aún más 7 1 personalizar la apariencia del gráfico modifica el linechartbardata en tu build método linechartbardata( spots chartdata asmap() entries map((e) => flspot( e key todouble(), e value sales)) tolist(), iscurved true, barwidth 3, colors \[colors blue], belowbardata barareadata( show true, colors \[colors blue withopacity(0 3)], ), dotdata fldotdata( show true, ), ) belowbardata agrega un área llena debajo de la línea dotdata muestra puntos en cada punto de datos 7 2 habilitar interacciones táctiles puedes habilitar interacciones táctiles para mostrar tooltips agrega lo siguiente a tu linechartdata touchdata linetouchdata( touchtooltipdata linetouchtooltipdata( tooltipbgcolor colors blueaccent, ), ), paso 8 – mostrando diferentes tipos de gráficas también puedes mostrar otros tipos de gráficas usando fl chart 8 1 ejemplo de gráfica de pastel reemplaza el linechart en tu build método con un piechart piechart( piechartdata( sections chartdata map((data) { return piechartsectiondata( value data sales, title data month substring(0, 3), color colors primaries\[chartdata indexof(data) % colors primaries length], ); }) tolist(), sectionsspace 2, centerspaceradius 40, ), ) piechartsectiondata define cada sección del gráfico circular conclusión en este tutorial, aprendiste cómo usar el fl chart paquete para visualizar datos en tu aplicación flutter integraste back4app como una solución de backend para almacenar y recuperar datos utilizando el sdk de parse al obtener datos de back4app y mostrarlos utilizando varios tipos de gráficos, ahora puedes construir visualizaciones de datos dinámicas e interactivas en tus aplicaciones flutter para mejorar aún más tu aplicación, considera explorar otros tipos de gráficos proporcionados por fl chart , como gráficos de barras y gráficos radar también puedes implementar actualizaciones de datos en tiempo real integrando consultas en vivo de back4app recursos adicionales documentación de back4app https //www back4app com/docs paquete fl chart en pub dev https //pub dev/packages/fl chart guía del sdk de parse para flutter https //docs parseplatform org/flutter/guide/ documentación oficial de flutter https //flutter dev/docs asegúrate de reemplazar los valores de marcador de posición como 'your application id' y 'your client key' con tus credenciales reales de back4app ¡feliz codificación!