Skip to content

Instantly share code, notes, and snippets.

@JohanScheepers

JohanScheepers/main.dart

Created August 31, 2025 19:18
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JohanScheepers/d1f1deb69974ed76eb59ef7fe9ce2542 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JohanScheepers/d1f1deb69974ed76eb59ef7fe9ce2542 to your computer and use it in GitHub Desktop.
Download ZIP
fl_dart example for dartpad.dev
Raw
main.dart
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
void main() {
runApp(const ChartExampleApp());
}
class ChartExampleApp extends StatelessWidget {
const ChartExampleApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'FL Chart Example',
theme: ThemeData(
primarySwatch: Colors.indigo,
visualDensity: VisualDensity.adaptivePlatformDensity,
fontFamily: 'Roboto',
),
home: Scaffold(
appBar: AppBar(
title: const Text('FL Chart Example', style: TextStyle(color: Colors.white)),
backgroundColor: Colors.indigo,
),
body: const Padding(
padding: EdgeInsets.all(16.0),
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
// Line Chart Section
ChartCard(
title: 'Daily User Sign-ups',
child: LineChartSample(),
),
SizedBox(height: 20),
// Bar Chart Section
ChartCard(
title: 'Monthly Sales Report',
child: BarChartSample(),
),
SizedBox(height: 20),
// Pie Chart Section
ChartCard(
title: 'Market Share Distribution',
child: PieChartSample(),
),
],
),
),
),
),
);
}
}
// A reusable Card widget for displaying charts
class ChartCard extends StatelessWidget {
final String title;
final Widget child;
const ChartCard({
super.key,
required this.title,
required this.child,
});
@override
Widget build(BuildContext context) {
return Card(
elevation: 5,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15)),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
const SizedBox(height: 10),
SizedBox(
height: 250,
child: child,
),
],
),
),
);
}
}
// --- Line Chart Example ---
class LineChartSample extends StatelessWidget {
const LineChartSample({super.key});
@override
Widget build(BuildContext context) {
return LineChart(
LineChartData(
// Define the line data points
lineBarsData: [
LineChartBarData(
spots: const <FlSpot>[
FlSpot(0, 3), // Mon, 3 sign-ups
FlSpot(2, 5), // Wed, 5 sign-ups
FlSpot(4, 3), // Fri, 3 sign-ups
FlSpot(6, 6), // Sat, 6 sign-ups
FlSpot(8, 4), // Sun, 4 sign-ups
],
isCurved: true,
color: Colors.indigo,
barWidth: 4,
belowBarData: BarAreaData(show: true, color: Colors.indigo.withAlpha((255 * 0.3).round())),
dotData: const FlDotData(show: true), // Show dots for clearer data points
),
],
// Configure the chart appearance
gridData: const FlGridData(show: false),
titlesData: FlTitlesData(
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 30,
getTitlesWidget: bottomTitleWidgets,
interval: 1,
),
),
leftTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
reservedSize: 40,
getTitlesWidget: leftTitleWidgets,
interval: 2,
),
),
topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),
),
borderData: FlBorderData(
show: true,
border: Border.all(color: const Color(0xff37434d), width: 1),
),
minY: 0, // Set clear minimum Y value
maxY: 7, // Set clear maximum Y value slightly above max data point
),
);
}
// Helper function for the bottom axis titles
static Widget bottomTitleWidgets(double value, TitleMeta meta) {
const style = TextStyle(fontWeight: FontWeight.bold, fontSize: 14);
Widget text;
switch (value.toInt()) {
case 0:
text = const Text('Mon', style: style);
break;
case 2:
text = const Text('Wed', style: style);
break;
case 4:
text = const Text('Fri', style: style);
break;
case 6:
text = const Text('Sat', style: style);
break;
case 8:
text = const Text('Sun', style: style);
break;
default:
text = const Text('', style: style);
break;
}
return SideTitleWidget(meta: meta, child: text);
}
// Helper function for the left axis titles - MODIFIED
static Widget leftTitleWidgets(double value, TitleMeta meta) {
const style = TextStyle(fontWeight: FontWeight.bold, fontSize: 14);
String text;
// Labels now reflect the actual numerical values more directly and realistically for "sign-ups"
switch (value.toInt()) {
case 0:
text = '0';
break;
case 2:
text = '2';
break;
case 4:
text = '4';
break;
case 6:
text = '6';
break;
default:
return Container();
}
return Text(text, style: style, textAlign: TextAlign.left);
}
}
// --- Bar Chart Example ---
class BarChartSample extends StatelessWidget {
const BarChartSample({super.key});
@override
Widget build(BuildContext context) {
return BarChart(
BarChartData(
barGroups: <BarChartGroupData>[
// Bar data for Q1
BarChartGroupData(x: 0, barRods: <BarChartRodData>[BarChartRodData(toY: 8, color: Colors.indigo)]),
// Bar data for Q2
BarChartGroupData(x: 1, barRods: <BarChartRodData>[BarChartRodData(toY: 10, color: Colors.blueAccent)]),
// Bar data for Q3
BarChartGroupData(x: 2, barRods: <BarChartRodData>[BarChartRodData(toY: 7, color: Colors.teal)]),
// Bar data for Q4
BarChartGroupData(x: 3, barRods: <BarChartRodData>[BarChartRodData(toY: 12, color: Colors.orangeAccent)]),
],
titlesData: FlTitlesData(
bottomTitles: AxisTitles(
sideTitles: SideTitles(
showTitles: true,
getTitlesWidget: (double value, TitleMeta meta) {
const style = TextStyle(fontWeight: FontWeight.bold, fontSize: 12);
String text;
switch (value.toInt()) {
case 0:
text = 'Q1';
break;
case 1:
text = 'Q2';
break;
case 2:
text = 'Q3';
break;
case 3:
text = 'Q4';
break;
default:
text = '';
break;
}
return SideTitleWidget(meta: meta, child: Text(text, style: style));
},
),
),
leftTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
topTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
rightTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),
),
gridData: FlGridData(show: true, drawVerticalLine: false, horizontalInterval: 2),
borderData: FlBorderData(show: false),
alignment: BarChartAlignment.spaceAround,
maxY: 15,
),
);
}
}
// --- Pie Chart Example ---
class PieChartSample extends StatelessWidget {
const PieChartSample({super.key});
@override
Widget build(BuildContext context) {
return PieChart(
PieChartData(
sections: <PieChartSectionData>[
PieChartSectionData(
color: Colors.indigo,
value: 40,
title: '40%',
radius: 80,
titleStyle: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
PieChartSectionData(
color: Colors.blueAccent,
value: 30,
title: '30%',
radius: 80,
titleStyle: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
PieChartSectionData(
color: Colors.teal,
value: 20,
title: '20%',
radius: 80,
titleStyle: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
PieChartSectionData(
color: Colors.orangeAccent,
value: 10,
title: '10%',
radius: 80,
titleStyle: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
],
borderData: FlBorderData(show: false),
sectionsSpace: 2,
centerSpaceRadius: 40,
startDegreeOffset: -90,
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment