fl_pretty_charts 0.1.2

A beautiful, animated Flutter charts package. Includes Bar, Line, Pie/Donut, and Radar charts. Zero dependencies — pure Flutter custom painter.

fl_pretty_charts

A beautiful, animated Flutter charts package. Zero external dependencies — built entirely with Flutter's CustomPainter.

---

✨ Features

• 📊 Bar Chart — animated, customizable, interactive
• 🎨 Gradients & custom colors — per-bar or global
• 💫 Smooth animations — elegant, snappy, bouncy, or none
• 👆 Interactive tooltips — tap any bar to reveal its value
• 🎯 Zero dependencies — pure Flutter, no third-party packages
• 📐 Grid lines & axis labels — clean, configurable
• 🌈 Built-in themes — default, ocean, sunset, forest
• 🔒 Null safe — Dart 3.x, Flutter 3.10+

---

📦 Installation

Add to your pubspec.yaml:

dependencies:
  fl_pretty_charts: ^0.0.1

Then run:

flutter pub get

---

🚀 Quick Start

import 'package:fl_pretty_charts/fl_pretty_charts.dart';

FlBarChart(
  data: BarChartData(
    bars: [
      BarData(value: 30, label: 'Mon'),
      BarData(value: 80, label: 'Tue'),
      BarData(value: 55, label: 'Wed'),
      BarData(value: 65, label: 'Thu'),
      BarData(value: 40, label: 'Fri'),
    ],
  ),
)

---

📊 Bar Chart

Basic usage

FlBarChart(
  data: BarChartData(
    bars: [
      BarData(value: 120, label: 'Q1'),
      BarData(value: 200, label: 'Q2'),
      BarData(value: 170, label: 'Q3'),
      BarData(value: 240, label: 'Q4'),
    ],
  ),
)

With gradient bars

FlBarChart(
  data: BarChartData(
    bars: [
      BarData(value: 120, label: 'Q1'),
      BarData(value: 200, label: 'Q2'),
      BarData(value: 170, label: 'Q3'),
      BarData(value: 240, label: 'Q4'),
    ],
    barStyle: BarStyle(
      borderRadius: 12,
      barWidthFraction: 0.5,
      gradient: LinearGradient(
        colors: [Color(0xFF5C6BC0), Color(0xFF26A69A)],
        begin: Alignment.bottomCenter,
        end: Alignment.topCenter,
      ),
    ),
  ),
  animation: ChartAnimation.elegant(),
  height: 300,
)

With per-bar colors

FlBarChart(
  data: BarChartData(
    bars: [
      BarData(value: 45, label: 'Jan', color: Colors.red),
      BarData(value: 72, label: 'Feb', color: Colors.purple),
      BarData(value: 60, label: 'Mar', color: Colors.blue),
    ],
  ),
)

With tap callback

FlBarChart(
  data: BarChartData(
    bars: [
      BarData(value: 30, label: 'Mon'),
      BarData(value: 80, label: 'Tue'),
    ],
  ),
  onBarTapped: (bar, index) {
    print('Tapped ${bar.label}: ${bar.value}');
  },
)

---

💫 Animation Presets

Preset	Duration	Curve	Best For
ChartAnimation()	900ms	easeOutCubic	General use (default)
ChartAnimation.elegant()	1200ms	easeOutCubic	Dashboards, first impressions
ChartAnimation.snappy()	400ms	easeOutBack	Frequently updated data
ChartAnimation.bouncy()	800ms	elasticOut	Playful UIs
ChartAnimation.none()	0ms	—	No animation

Custom animation:

FlBarChart(
  data: myData,
  animation: ChartAnimation(
    duration: Duration(milliseconds: 600),
    curve: Curves.easeInOutQuart,
  ),
)

---

🌈 Built-in Themes

ChartTheme.defaultTheme() // indigo, teal, amber, orange, purple
ChartTheme.ocean()        // cool blue-green palette
ChartTheme.sunset()       // warm reds, oranges, pinks
ChartTheme.forest()       // nature-inspired greens

---

📐 API Reference

FlBarChart

Property	Type	Default	Description
data	BarChartData	required	Chart data and styles
animation	ChartAnimation	ChartAnimation()	Reveal animation config
height	double	260.0	Chart canvas height
decoration	BoxDecoration?	null	Container decoration
padding	EdgeInsets	EdgeInsets.all(16)	Outer padding
onBarTapped	Function?	null	Tap callback

BarChartData

Property	Type	Default	Description
bars	List<BarData>	required	The bars to display
defaultColor	Color	indigo	Fallback bar color
barStyle	BarStyle	BarStyle()	Bar appearance config
axisStyle	AxisStyle	AxisStyle()	Axis and grid config
tooltipStyle	TooltipStyle	TooltipStyle()	Tooltip appearance
maxY	double?	auto	Fixed max y value
minY	double	0.0	Fixed min y value

BarData

Property	Type	Default	Description
value	double	required	Bar height value
label	String	required	X-axis label
color	Color?	null	Per-bar color override

BarStyle

Property	Type	Default	Description
borderRadius	double	6.0	Top corner radius
barWidthFraction	double	0.55	Bar width as slot fraction
gradient	LinearGradient?	null	Gradient override

AxisStyle

Property	Type	Default	Description
labelStyle	TextStyle	grey 11px	Axis label text style
gridColor	Color	grey	Grid line color
gridOpacity	double	0.2	Grid line opacity
showGrid	bool	true	Show/hide grid lines
yAxisDivisions	int	5	Number of y divisions

---

🗺️ Roadmap

Version	Feature
0.0.1	✅ Bar Chart
0.1.0	🔜 Line Chart — smooth curves, gradient fill
0.5.0	🔜 Pie Chart + Donut variant
0.9.0	🔜 Radar / Spider Chart
1.0.0	🔜 Theming system, Legend widget, stable API

---

🤝 Contributing

Contributions are welcome! Please open an issue or pull request on GitHub.

---

📄 License

MIT License — see LICENSE for details.