stack_chart 1.2.2

A comprehensive Flutter package for creating beautiful, customizable charts and animations.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:stack_chart/stack_chart.dart';
import 'individual_charts.dart';
import 'professional_charts.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stack Chart Examples',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const ExampleHomePage(),
    );
  }
}

class ExampleHomePage extends StatelessWidget {
  const ExampleHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Stack Chart Examples'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          _buildExampleCard(
            context,
            'Stack Chart Example',
            'Booking status visualization',
            () => Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => const StackChartExample()),
            ),
          ),
          const SizedBox(height: 16),
          _buildExampleCard(
            context,
            'Line Chart Example',
            'Custom line charts',
            () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const LineChartExample()),
            ),
          ),
          const SizedBox(height: 16),
          _buildExampleCard(
            context,
            'Bar Chart Example',
            'Vertical and horizontal bars',
            () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const BarChartExample()),
            ),
          ),
          const SizedBox(height: 16),
          _buildExampleCard(
            context,
            'Pie Chart Example',
            'Pie and donut charts',
            () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const PieChartExample()),
            ),
          ),
          const SizedBox(height: 16),
          _buildExampleCard(
            context,
            'Gantt Chart',
            'Project timeline with breaks',
            () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const GanttChartScreen()),
            ),
          ),
          const SizedBox(height: 16),
          _buildExampleCard(
            context,
            'Histogram',
            'Data distribution analysis',
            () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const HistogramScreen()),
            ),
          ),
          const SizedBox(height: 16),
          _buildExampleCard(
            context,
            'Bubble Chart',
            'Multi-dimensional visualization',
            () => Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => const BubbleChartScreen()),
            ),
          ),
          const SizedBox(height: 16),
          _buildExampleCard(
            context,
            'More Charts',
            'Funnel, Gauge, Radar, etc.',
            () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const MoreChartsScreen()),
            ),
          ),
          const SizedBox(height: 16),
          _buildExampleCard(
            context,
            'Professional Charts',
            'CandleStick, Area, Scatter, etc.',
            () => Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => const ProfessionalChartsScreen()),
            ),
          ),
          const SizedBox(height: 16),
          _buildExampleCard(
            context,
            'Confetti Animation',
            'Interactive confetti effects',
            () => Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const ConfettiExample()),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildExampleCard(
      BuildContext context, String title, String subtitle, VoidCallback onTap) {
    return Card(
      child: ListTile(
        title: Text(title, style: Theme.of(context).textTheme.titleMedium),
        subtitle: Text(subtitle),
        trailing: const Icon(Icons.arrow_forward_ios),
        onTap: onTap,
      ),
    );
  }
}

class StackChartExample extends StatelessWidget {
  const StackChartExample({super.key});

  @override
  Widget build(BuildContext context) {
    // Sample data for booking status
    final chartData = [
      ChartData("2024-01-01T09:00:00", "2024-01-01T10:00:00",
          ["Available", "Booked", "Available"]),
      ChartData("2024-01-01T10:00:00", "2024-01-01T11:00:00",
          ["Booked", "Booked", "Maintenance"]),
      ChartData("2024-01-01T11:00:00", "2024-01-01T12:00:00",
          ["Available", "Available", "Available"]),
      ChartData("2024-01-01T12:00:00", "2024-01-01T13:00:00",
          ["Booked", "Available", "Booked"]),
    ];

    final chartLabel = [
      ChartLabel("Available", Colors.green),
      ChartLabel("Booked", Colors.red),
      ChartLabel("Maintenance", Colors.orange),
    ];

    final chartText = ChartText("20 Minutes", Colors.grey);

    return Scaffold(
      appBar: AppBar(
        title: const Text('Stack Chart Example'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            const SizedBox(height: 20),
            MacStackChart(
              chartTitle: "Booking Status Chart",
              dateFormat: "h a",
              chartData: chartData,
              chartLabel: chartLabel,
              containerHeight: MediaQuery.of(context).size.height * 0.035,
              containerWidth: MediaQuery.of(context).size.width * 0.05,
              chartText: chartText,
              backgroundColor: Colors.transparent,
              chartBackgroundColor: Colors.white,
              style: const TextStyle(
                color: Colors.black,
                fontSize: 12,
                fontWeight: FontWeight.w500,
              ),
            ),
            const SizedBox(height: 20),
            const Padding(
              padding: EdgeInsets.all(16),
              child: Text(
                'This chart shows booking status over time. Each stack represents a 20-minute interval, with different colors indicating availability status.',
                style: TextStyle(fontSize: 14),
                textAlign: TextAlign.center,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class LineChartExample extends StatelessWidget {
  const LineChartExample({super.key});

  @override
  Widget build(BuildContext context) {
    final series = [
      const LineSeries(
        points: [
          LinePoint(0, 10),
          LinePoint(1, 15),
          LinePoint(2, 8),
          LinePoint(3, 20),
          LinePoint(4, 12),
          LinePoint(5, 25),
        ],
        color: Colors.blue,
        name: 'Sales',
      ),
      const LineSeries(
        points: [
          LinePoint(0, 5),
          LinePoint(1, 12),
          LinePoint(2, 18),
          LinePoint(3, 15),
          LinePoint(4, 22),
          LinePoint(5, 19),
        ],
        color: Colors.red,
        name: 'Revenue',
      ),
    ];

    return Scaffold(
      appBar: AppBar(
        title: const Text('Line Chart Example'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: CustomLineChart(
          series: series,
          title: 'Sales vs Revenue',
          showGrid: true,
          showLabels: true,
        ),
      ),
    );
  }
}

class BarChartExample extends StatelessWidget {
  const BarChartExample({super.key});

  @override
  Widget build(BuildContext context) {
    final data = [
      const BarData('Jan', 20, Colors.blue),
      const BarData('Feb', 35, Colors.green),
      const BarData('Mar', 15, Colors.orange),
      const BarData('Apr', 40, Colors.red),
      const BarData('May', 25, Colors.purple),
    ];

    return Scaffold(
      appBar: AppBar(
        title: const Text('Bar Chart Example'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Expanded(
              child: CustomBarChart(
                data: data,
                title: 'Monthly Sales (Vertical)',
                showValues: true,
                showLabels: true,
              ),
            ),
            const SizedBox(height: 20),
            Expanded(
              child: CustomBarChart(
                data: data,
                title: 'Monthly Sales (Horizontal)',
                horizontal: true,
                showValues: true,
                showLabels: true,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class PieChartExample extends StatelessWidget {
  const PieChartExample({super.key});

  @override
  Widget build(BuildContext context) {
    final pieData = [
      const PieData('Mobile', 45, Colors.blue),
      const PieData('Desktop', 30, Colors.green),
      const PieData('Tablet', 15, Colors.orange),
      const PieData('Other', 10, Colors.red),
    ];

    final donutData = [
      const DonutData('iOS', 40, Colors.blue),
      const DonutData('Android', 35, Colors.green),
      const DonutData('Web', 25, Colors.orange),
    ];

    return Scaffold(
      appBar: AppBar(
        title: const Text('Pie Chart Example'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            Expanded(
              child: CustomPieChart(
                data: pieData,
                title: 'Device Usage',
                showLabels: true,
                showPercentages: true,
                showLegend: true,
              ),
            ),
            const SizedBox(height: 20),
            Expanded(
              child: CustomDonutChart(
                data: donutData,
                title: 'Platform Distribution',
                centerText: 'Total\n100%',
                showLegend: true,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class ConfettiExample extends StatefulWidget {
  const ConfettiExample({super.key});

  @override
  State<ConfettiExample> createState() => _ConfettiExampleState();
}

class _ConfettiExampleState extends State<ConfettiExample> {
  late ConfettiController _controller;

  @override
  void initState() {
    super.initState();
    _controller = ConfettiController(duration: const Duration(seconds: 3));
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Confetti Example'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: Stack(
        children: [
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text(
                  'Tap the button to celebrate!',
                  style: TextStyle(fontSize: 18),
                ),
                const SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () => _controller.play(),
                  child: const Text('🎉 Celebrate!'),
                ),
              ],
            ),
          ),
          Align(
            alignment: Alignment.topCenter,
            child: ConfettiWidget(
              confettiController: _controller,
              blastDirection: 1.57, // pi/2 (downward)
              numberOfParticles: 30,
              emissionFrequency: 0.05,
              colors: const [
                Colors.red,
                Colors.blue,
                Colors.green,
                Colors.yellow,
                Colors.purple,
                Colors.orange,
              ],
            ),
          ),
        ],
      ),
    );
  }
}