En este artículo vamos a aprender a crear un gráfico circular básico usando uno de mis paquetes favoritos en el pub.dev. Usando fl_chart: haremos un gráfico configurable para representar de forma mucho más agradable la información a nuestros usuarios.
También haremos un pequeño ejemplo de dejaré el código fuente para que puedas descargarlo y probarlo tú mismo. Siempre sostengo que la mejor manera de aprender a programar es programando, así que voy a dejarles una tarea adicional para que te asegures de manejar el proceso.
Instalando el paquete
Vamos a asumir que ya has creado el proyecto en tu computador, esto puedes hacerlo de la forma que creas necesario. Sin embargo, por cuestiones de seguridad, no recomiendo hacer las pruebas en un proyecto que ya tienes avanzado o en producción. Es mejor realizar las pruebas en un proyecto nuevo que servirá solo para practicar.
Una vez que tengas tu proyecto de práctica creado, vamos al archivo pubspec.yaml y buscamos la sección de dependencias y agregamos el paquete que usaremos para realizar este ejercicio. En la sección de la versión puedes usar la versión actual o directamente no poner nada y Flutter traerá la que crea conveniente.
Cuando guardes los cambios dentro del archivo pubspec.yaml se ejecutará el pub get packages y se instalará el nuevo paquete a tu proyecto. Ahora solo tenemos que usarlo dentro de nuestros archivos .dart. Para el ejemplo usaremos un botón que navegará a una pantalla de Flutter en donde mostraremos nuestro gráfico.
Creando página para el gráfico
La página en la que mostraremos nuestro gráfico se llamará PaiChartPage( ) y estará conformada por un Scaffold( ) con un AppBar( ) donde puedes poner el title que quieras. Lo importantes estará en body de nuestro Scaffold.
Pero antes vamos crear nuestra información de prueba. Para ello vamos a crear una lista en dart, la lista debe contener un tipo de clase específico, PieChartSectionData que es la clase de datos que interpretará nuestro gráfico. Creemosla:
List<PieChartSectionData> sectionsChart = [
PieChartSectionData(
value: 35,
title: "35%%",
showTitle: true,
color: Colors.orange,
radius: 100,
),
PieChartSectionData(
value: 45,
title: "45%%",
showTitle: true,
color: Colors.blue,
radius: 100,
),
PieChartSectionData(
value: 15,
title: "15%%",
showTitle: true,
color: Colors.red,
radius: 100,
),
PieChartSectionData(
value: 5,
title: "5%%",
showTitle: true,
color: Colors.purple,
radius: 100,
),
];
Cada PieChartSectionData será un valor en nuestra gráfica. En este punto se define el color, el tamaño, el texto que estará sobre la sección y si se mostrará el texto o no. En la vida real debes crear esta información basado en información que traes de la backend, pero en este ejemplo usaremos información estática para simplificar el ejemplo y no complicarlo más de lo necesario.
PieChart( )
Vamos a usar nuestro gráfico al fin. Vamos a usar un método para construir un Container que va a contener a nuestro gráfico, esto es para tener más control en la ubicación de nuestro gráfico. Usaremos un Column en el body del Scaffold para ubicarlo en la pantalla y poder colocar más elemento debajo de él.
Veamos cómo crear nuestro método. El método devolverá un Container que pondremos como un elemento de la column en nuestro doby. Veamos el código:
Container buildChart(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
height: 300,
child: PieChart(
PieChartData(
borderData: FlBorderData(
show: false,
),
sectionsSpace: 0,
centerSpaceRadius: 0,
sections: sectionsChart),
),
);
}
El parámetro section contiene la variable con la lista de elementos que hicimos antes. El parámetro sectionSpace va a definir un espacio entre cada una de las secciones de nuestra lista. El parámetro centerSpaceRadius será un espacio que quedará en el centro de nuestro gráfico, esto hará que nuestro gráfico se vea más como una dona. El borderData sencillamente es por si queremos ver los bordes del gráfico general.
Algo importante de observar, es que todo esto se coloca en el PieChartData que está dentro del PieChart. Esto es así ya que nuestro PieChart puede recibir diferentes tipos de parámetros para crear diferentes tipos de gráficos. Con esto ya podríamos ver el gráfico en nuestra aplicación.
Como mencioné al principio del artículo, prometí que dejaría el código fuente del proyecto para que puedan bajarlo y ver directamente y compararlo con el proyecto de ustedes.
En el repositorio de Github encontrarás el proyecto completo para descargarlo e intentar ejecutarlo en tu propia computadora o puedes simplemente verlo en github y solo ver el código en línea.
Eso es todo por el artículo de hoy, en otros artículos veremos otro tipo de gráficos, de barras, etc. Eso pero que les haya gustado el artículo, pero sobretodo espero que les haya servido, cualquier duda o consulta, no duden en dejarla en los comentarios y con gusto estaré contestandolas.