Flutter Chart Magic with fl_chart #3

Ece
3 min readJan 25, 2024

--

Great to have you back on our journey through the enchanting realm of ‘fl_chart’! Today, buckle up as we take a deep dive into another fascinating aspect — the world of pie charts. ✌🏻

Why Use fl_chart?

‘fl_chart’ is like magic wand for making chart in Flutter. It’s super easy to use, even if I’m just starting out. Plus, it lets me make all kinds of charts that look awesome and showcase my data in an exciting manner.

Pie Charts

Imagine your data as a colorful pie — each slice a unique flavor. It’s like turning numbers into a party that everyone’s invited to! 🌈 Ever wanted to tell a story with your data? Pie charts are the storytellers of charts. They break down proportions in a way that feels like narrating a delicious tale. ✨ Using ‘fl_chart’ for Flutter, creating a pie chart is as fun as baking cookies and maybe even more rewarding! Here’s your quick recipe: 🫐🍰

Step 1: Add the dependencies to pubspec.yaml file

fl_chart: ^0.66.0

Step 2: Create HomePage

In the ‘home_page.dart’ file, let’s craft two buttons to explore our examples. In the ‘routes.dart’ file I’ve set up navigation to our examples, you can check out the source code for details.

HomePage
HomePage

Step 3: Import the package and start to code

import 'package:fl_chart/fl_chart.dart';

Afterward, we’ll create our first example, following a similar code structure with a clear separation between ‘view’ and ‘widget’. We’re starting with ‘view’ part.

FirstPieChartPage

Create ‘first_pie_chart.dart’ file inside the ‘views’ in ‘lib’ folder.

FirstPieChartPage

In the ‘indicator.dart’ file I’ve set up indicator widget for the pie charts’ info section. You can check out the source code for details.

The second and final example…

SecondPieChartPage

Create ‘second_pie_chart.dart’ file inside the ‘views’ in ‘lib’ folder.

SecondPieChart

Big thanks for joining me on this delightful joerney exploring the world of ‘fl_chart’! 🚀 I hope you found a sprinkle of inspiration for your Flutter projects. Until our next coding rendezvous, happy charting and see you in the upcoming article! 🌈✨

You can explore my GitHub repository for the entire codebase, specifically focusing on the ‘widgets’ file.

--

--

Ece

A landscape architect who discovered a passion for building mobile apps using Flutter. Currently based in Izmir