Outline Pie Chart

Outline Pie Chart is a Flutter package for creating beautiful, customizable, and animated pie charts. It supports segment gaps, RTL (right-to-left) languages, and provides various customization options to make your data visualization visually engaging and informative.

Where is it used?

In applications that visualize performance metrics
For displaying budget allocations and financial data
In health and fitness apps to show progress
In educational apps to illustrate progress or achievements
In e-commerce apps to show category distributions

📊 📈 📉 🏅

Features

Customizable Segments: Define segment percentages and colors to represent your data.
Animated Drawing: Optionally animate the pie chart drawing process for a dynamic presentation.
Segment Gaps: Adjust the gap between segments to enhance chart clarity.
RTL Support: Draw charts from right to left for RTL languages like Persian.
Center Widget: Add a widget in the center of the pie chart for additional context or information.

Installation

Add the following to your pubspec.yaml file:

dependencies:
  outline_pie_chart: ^0.0.1

Then run:

flutter pub get

Usage

Import it

import 'package:outline_pie_chart/outline_pie_chart.dart';

Now in your flutter code, you can use:

The PieChartWidget to integrate a customizable pie chart into your Flutter application:

data (List

screenshot1

PieChartWidget(
  data: [
    PieData(percentage: 0.64, color: const Color(0xFFF0B800)),
    PieData(percentage: 0.36, color: const Color(0xFF5536BF)),
  ],
  diameter: 300,
  enableAnimation: true,
  animationDuration: const Duration(seconds: 2),
  strokeWidth: 40,
  gap: 4,
  isRTL: false,
  child: const Column(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Text(
      'Total Asset Value',
      style: TextStyle(
        fontFamily: '',
        fontSize: 24,
        fontWeight: FontWeight.bold,
        color: Color(0xFF757575),
      ),
    ),
    SizedBox(height: 8),
    Text(
      '2,798,625',
      style: TextStyle(
        fontFamily: '',
        fontSize: 28,
        fontWeight: FontWeight.w900,
        color: Color(0xFF1C1C1E),
     ),
   ),
   Text(
     '\$',
     style: TextStyle(
        fontFamily: '',
        fontSize: 24,
        fontWeight: FontWeight.bold,
        color: Color(0xFF1C1C1E),
      ),
     ),
   ],
  ),
);

by Shervin Hassanzadeh

Contact me at