flutter_simple_charts 0.0.5

A very simple donut and bar chart package, lightweight and easy to use

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_simple_charts/flutter_simple_charts.dart';

/// Entry point for the example application.
void main() {
  runApp(const MyApp());
}

/// A custom palette to demonstrate overriding the default chart colors.
final List<Color> customColors = [
  Colors.orange.shade50,
  Colors.orange.shade100,
  Colors.orange.shade200,
  Colors.orange.shade300,
  Colors.orange.shade400,
  Colors.orange,
  Colors.orange.shade600,
  Colors.orange.shade700,
  Colors.orange.shade800,
  Colors.orange.shade900,
];

/// Sample dataset used by both charts.
///
/// Each [DataItem] represents a category label and a numeric value.
final List<DataItem> itens = [
  DataItem(id: 0, label: 'Oranges', value: 210),
  DataItem(id: 1, label: 'Apples', value: 195),
  DataItem(id: 2, label: 'Bananas', value: 65),
  DataItem(id: 3, label: 'Pears', value: 155, color: Colors.black),
  DataItem(id: 4, label: 'Strawberries', value: 97),
  DataItem(id: 5, label: 'Watermelons', value: 52),
  DataItem(id: 6, label: 'Pineapples', value: 119),
];

/// Root widget for the example app.
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Charts Demo',
      // Basic theme so the charts look decent out of the box.
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.indigo),
      ),
      home: const MainPage(),
    );
  }
}

/// Demonstrates both [DonutChart] and [BarChart] configurations.
class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Flutter Simple Charts'),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            children: [
              // Donut chart using default palette, legend enabled.
              DonutChart(
                title: 'Fruits Donut chart',
                animate: true,
                animationDuration: const Duration(milliseconds: 1500),
                animationCurve: Curves.easeInOut,
                dataset: itens,
                showLabels: false,
                showLegend: true,
                datasetOrdering: DatasetOrdering.decrescent,
                // Tapping a sector shows a small dialog with the selected item.
                onSectorTap: (sectorValue) => _showDialog(
                  'Item: ${sectorValue!.label} - Quantity: ${sectorValue.value}',
                  context,
                ),
              ),

              // Bar chart using default palette, labels + legend enabled.
              BarChart(
                title: 'Fruits Bar chart',
                animate: true,
                animationDuration: const Duration(milliseconds: 1500),
                animationCurve: Curves.easeInOut,
                dataset: itens,
                showLabels: true,
                showLegend: true,

                datasetOrdering: DatasetOrdering.decrescent,
                // Tapping a bar shows the selected item.
                onBarTap: (barValue) => _showDialog(
                  'Item: ${barValue.label} - Quantity: ${barValue.value}',
                  context,
                ),
              ),

              // Donut chart demonstrating custom palette, background, and sizing.
              DonutChart(
                title: 'Fruits Donut chart',
                customColors: customColors.reversed.toList(),
                backGroundColor: Colors.amber.shade100,
                width: 300,
                height: 500,
                dataset: itens,
                showLabels: false,
                showLegend: true,
                datasetOrdering: DatasetOrdering.decrescent,
                // onSectorTap: (sectorValue) => _showDialog(
                //   'Item: ${sectorValue.label} - Quantity: ${sectorValue.value}',
                //   context,
                // ),
              ),

              // Bar chart demonstrating the same customisations.
              BarChart(
                title: 'Fruits Bar chart',
                customColors: customColors.reversed.toList(),
                backGroundColor: Colors.amber.shade100,
                width: 350,
                height: 500,
                dataset: itens,
                showLabels: true,
                showLegend: true,
                datasetOrdering: DatasetOrdering.decrescent,
                onBarTap: (barValue) => _showDialog(
                  'Item: ${barValue.label} - Quantity: ${barValue.value}',
                  context,
                ),
              ),
              BarChart(
                title: 'Fruits',
                dataset: itens,
                onBarHover: (item) {
                  // item == null means the pointer left the bars
                  debugPrint('hover: ${item?.label}');
                },
              ),

              DonutChart(
                title: 'Fruits',
                dataset: itens,
                onSectorHover: (item) => debugPrint('hover: ${item?.label}'),
              ),
            ],
          ),
        ),
      ),
      // Adds a bit of bottom padding so the legend doesn't feel cramped.
      bottomNavigationBar: const SizedBox(height: 80),
    );
  }
}

/// Shows a simple dialog with [message].
void _showDialog(String message, BuildContext context) {
  showDialog<void>(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: const Text('Flutter Single Chart'),
        content: Text(message),
        actions: <Widget>[
          TextButton(
            style: TextButton.styleFrom(
              textStyle: Theme.of(context).textTheme.labelLarge,
            ),
            child: const Text('Close'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}