Cómo crear gráficos de barras con charts_flutter

Introducción

La charts_flutterbiblioteca es una “biblioteca de visualización de datos de Material Design escrita de forma nativa en Dart”. Puedes usar esta biblioteca en tu aplicación Flutter para mostrar datos como gráficos de barras, gráficos de líneas, gráficos de dispersión, gráficos circulares y más.

En este artículo, utilizará datos sobre el número de suscriptores de World of Warcraft entre los años 2008 y 2015 y los mostrará como un gráfico de barras utilizando charts_flutter.

Prerrequisitos

Para completar este tutorial, necesitarás:

• Para descargar e instalar Flutter .
• Para descargar e instalar Android Studio o Visual Studio Code .
• Se recomienda instalar complementos para su editor de código:
  • Fluttery Dartcomplementos instalados para Android Studio.
  • Flutterextensión instalada para Visual Studio Code.

Este tutorial fue verificado con Flutter v1.22.2, Android SDK v31.0.2 y Android Studio v4.1.

Paso 1: Configuración del proyecto

Una vez que haya configurado su entorno para Flutter, puede ejecutar lo siguiente para crear una nueva aplicación:

flutter create charts_flutter_example

Navegue hasta el nuevo directorio del proyecto:

cd charts_flutter_example

El uso flutter createproducirá una aplicación de demostración que mostrará la cantidad de veces que se hace clic en un botón.

Paso 2: Agregar el charts_fluttercomplemento

A continuación, necesitaremos agregar el charts_fluttercomplemento dentro de nuestro pubspec.yaml:

archivo pubspec.yaml

dependencies:  flutter:    sdk: flutter  charts_flutter: ^0.10.0

Ahora podemos continuar y ejecutar esto en el simulador o dispositivo iOS o Android de su elección.

Paso 3: Andamiaje de la aplicación

Ahora, ábrelo main.darten tu editor de código.

Reemplace todo en este archivo con un MaterialAppque apunte a un HomePageque se puede encontrar en home.dart:

lib/main.dart

import 'package:flutter/material.dart';import 'package:charts_flutter_example/home.dart';void main() {  runApp(MyApp());}class MyApp extends StatelessWidget {  @override  Widget build(BuildContext context) {    return MaterialApp(      debugShowCheckedModeBanner: false,      home: HomePage(),    );  }}

A continuación, cree un nuevo home.dartarchivo y agregue las siguientes líneas de código:

lib/inicio.dart

import 'package:flutter/material.dart';class HomePage extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        backgroundColor: Colors.red,        title: Text("World of Warcraft Subscribers"),      ),      body: Center(        child: Text("charts_flutter_example"),      ),    );  }}

Ahora que hemos establecido una aplicación base, podemos continuar y crear el modelo para nuestros datos de gráfico de barras.

Paso 4: creación del modelo de suscriptor

Nuestro gráfico de barras se centrará en mostrar la cantidad de suscriptores de World of Warcraft para un año en particular.

A continuación, cree un nuevo subscriber_series.dartarchivo y agregue las siguientes líneas de código:

lib/serie_de_suscriptores.dart

import 'package:flutter/foundation.dart';import 'package:charts_flutter/flutter.dart' as charts;class SubscriberSeries {  final String year;  final int subscribers;  final charts.Color barColor;  SubscriberSeries(    {      @required this.year,      @required this.subscribers,      @required this.barColor    }  );}

Esto nos permite representar nuestros datos de yeary subscribers.

Paso 5: Creación de los datos

Para los fines de este tutorial, los datos se crearán dentro de HomePagecomo ListSubscriberSeries:

Revise home.darty agregue las siguientes líneas de código:

lib/inicio.dart

import 'package:flutter/material.dart';import 'package:charts_flutter/flutter.dart' as charts;import 'package:charts_flutter_example/subscriber_series.dart';class HomePage extends StatelessWidget {  final ListSubscriberSeries data = [    SubscriberSeries(      year: "2008",      subscribers: 10000000,      barColor: charts.ColorUtil.fromDartColor(Colors.blue),    ),    SubscriberSeries(      year: "2009",      subscribers: 11000000,      barColor: charts.ColorUtil.fromDartColor(Colors.blue),    ),    SubscriberSeries(      year: "2010",      subscribers: 12000000,      barColor: charts.ColorUtil.fromDartColor(Colors.blue),    ),    SubscriberSeries(      year: "2011",      subscribers: 10000000,      barColor: charts.ColorUtil.fromDartColor(Colors.blue),    ),    SubscriberSeries(      year: "2012",      subscribers: 8500000,      barColor: charts.ColorUtil.fromDartColor(Colors.blue),    ),    SubscriberSeries(      year: "2013",      subscribers: 7700000,      barColor: charts.ColorUtil.fromDartColor(Colors.blue),    ),    SubscriberSeries(      year: "2014",      subscribers: 7600000,      barColor: charts.ColorUtil.fromDartColor(Colors.blue),    ),    SubscriberSeries(      year: "2015",      subscribers: 5500000,      barColor: charts.ColorUtil.fromDartColor(Colors.red),    ),  ];  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        backgroundColor: Colors.red,        title: Text("World of Warcraft Subscribers"),      ),      body: Center(        child: Text("charts_flutter_example"),      ),    );  }}

¡Ahora que tenemos nuestros datos, todo lo que necesitamos es crear el gráfico de barras!

Paso 6: Creación del gráfico de barras

Ahora, crea un nuevo subscriber_chart.dartarchivo y agrega las siguientes líneas de código:

lib/subscriber_chart.dart

import 'package:flutter/material.dart';import 'package:charts_flutter/flutter.dart' as charts;import 'package:charts_flutter_example/subscriber_series.dart';class SubscriberChart extends StatelessWidget {  final ListSubscriberSeries data;  SubscriberChart({@required this.data});}

Este código crea un nuevo StatelessWidgetnombre SubscriberChartque toma el SubscriberSeriescomo un prop.

Luego podemos usar esto datapara construir nuestro proyecto charts.Seriesasí:

lib/subscriber_chart.dart

import 'package:flutter/material.dart';import 'package:charts_flutter/flutter.dart' as charts;import 'package:charts_flutter_example/subscriber_series.dart';class SubscriberChart extends StatelessWidget {  final ListSubscriberSeries data;  SubscriberChart({@required this.data});  @override  Widget build(BuildContext context) {    Listcharts.SeriesSubscriberSeries, String series = [      charts.Series(        id: "Subscribers",        data: data,        domainFn: (SubscriberSeries series, _) = series.year,        measureFn: (SubscriberSeries series, _) = series.subscribers,        colorFn: (SubscriberSeries series, _) = series.barColor      )    ];  }}

Los domainFny measureFnse utilizan para comparar los subscribersdatos de ese year.

También lo usamos colorFnpara pasar potencialmente un barColor.

Recordemos cómo home.dartse utiliza barColor:

SubscriberSeries(  year: "2008",  subscribers: 10000000,  barColor: charts.ColorUtil.fromDartColor(Colors.blue),),

Es posible que queramos hacer que la barColoropción tenga un valor predeterminado Colors.blue(o un color de su elección) en una aplicación de producción. En este tutorial, una barra será de color rojo y las otras serán de color azul.

Actualicemos la buildfunción para devolver nuestro gráfico:

lib/subscriber_chart.dart

import 'package:flutter/material.dart';import 'package:charts_flutter/flutter.dart' as charts;import 'package:charts_flutter_example/subscriber_series.dart';class SubscriberChart extends StatelessWidget {  final ListSubscriberSeries data;  SubscriberChart({@required this.data});  @override  Widget build(BuildContext context) {    Listcharts.SeriesSubscriberSeries, String series = [      charts.Series(        id: "Subscribers",        data: data,        domainFn: (SubscriberSeries series, _) = series.year,        measureFn: (SubscriberSeries series, _) = series.subscribers,        colorFn: (SubscriberSeries series, _) = series.barColor      )    ];    return Container(      height: 400,      padding: EdgeInsets.all(20),      child: Card(        child: Padding(          padding: const EdgeInsets.all(8.0),          child: Column(            children: Widget[              Text(                "World of Warcraft Subscribers by Year",                style: Theme.of(context).textTheme.body2,              ),              Expanded(                child: charts.BarChart(series, animate: true),              )            ],          ),        ),      ),    );  }}

Este código agrega marcado al charts.BarChartrodearlo con un Card.

Lo más importante a tener en cuenta es que estamos pasando seriescomo requiredparámetro a charts.BarChart:

charts.BarChart(series, animate: true)

En este punto, sus datos y gráficos están listos para usarse.

Paso 7: Visualización del gráfico

Por último, vuelve a visitar home.darttu editor de código y cambia buildpara utilizar SubscriberChart:

lib/inicio.dart

import 'package:flutter/material.dart';import 'package:charts_flutter/flutter.dart' as charts;import 'package:charts_flutter_example/subscriber_series.dart';import 'package:charts_flutter_example/subscriber_chart.dart';class HomePage extends StatelessWidget {  // ...  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        backgroundColor: Colors.red,        title: Text("World of Warcraft Subscribers"),      ),      body: Center(        child: SubscriberChart(          data: data,        )      ),    );  }}

Guarde los cambios y ejecute la aplicación en un simulador:

Su aplicación ahora utiliza charts_flutterun gráfico de barras para mostrar datos.

Conclusión

En este artículo, utilizó datos sobre el número de suscriptores de World of Warcraft entre los años 2008 y 2015 y los mostró como un gráfico de barras utilizando charts_flutter.

Si desea obtener más información sobre Flutter, consulte nuestra página de temas de Flutter para ver ejercicios y proyectos de programación.