Más
Cómo visualizar datos en Flutter con fl_chart y Back4App

24min
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.
Flutter SDK instalado en tu máquina local. Puedes seguir la guía de instalación oficial de Flutter para tu sistema operativo.
Conocimientos básicos de Dart y Flutter. Si eres nuevo en Flutter, considera revisar la documentación de Flutter 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.
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.
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:
Bash
flutter create flutter_chart_app
flutter create flutter_chart_app
﻿
Navega al directorio del proyecto:
Bash
cd flutter_chart_app
cd flutter_chart_app
﻿
3.2. Agregar Dependencias a pubspec.yaml
Abre pubspec.yaml y agrega las siguientes dependencias:
YAML
dependencies:
  flutter:
    sdk: flutter
  fl_chart: ^0.60.0
  parse_server_sdk_flutter: ^4.0.1
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:
Dart
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(),
    );
  }
}
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:
Dart
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,
    );
  }
}
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:
Bash
flutter run
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:
Dart
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,
  ),
)
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:
Dart
touchData: LineTouchData(
  touchTooltipData: LineTouchTooltipData(
    tooltipBgColor: Colors.blueAccent,
  ),
),
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:
Dart
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,
  ),
)
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﻿
﻿Paquete fl_chart en pub.dev﻿
﻿Guía del SDK de Parse para Flutter﻿
﻿Documentación Oficial de Flutter﻿
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!
Actualizado 23 Jan 2025
¿Esta página le fue útil?
Cómo construir un juego de carrera infinita avanzado utilizando Flutter, el kit de herramientas para juegos casuales y Back4app
Guía Completa de Autenticación de Terceros en Flutter con Parse en Back4App