outline_pie_chart 0.0.1

Create beautiful and customizable animated pie charts with support for RTL languages and segment gaps. Perfect for visually engaging data representation in Flutter apps.

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

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