Creare grafici in Flutter con syncfusion_flutter_charts

syncfusion_flutter_charts è uno dei package a disposizione per Flutter per la creazione di grafici.

Tra le altre cose funziona su tutte le piattaforme.

Però non lo trovo facilissimo da usare.

Detto ciò installiamolo:

flutter pub add syncfusion_flutter_charts

Qui sotto un esempio di codice:

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
import 'package:syncfusion_flutter_charts/sparkcharts.dart';

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

class Vendita {
  final String prodotto;
  final String anno;
  final double importo;

  Vendita({
    required this.prodotto,
    required this.anno,
    required this.importo,
  });
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.deepPurple,
        ),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<Vendita> _vendite = [
    Vendita(
      prodotto: 'SKU1',
      anno: '2022',
      importo: 100.7,
    ),
    Vendita(
      prodotto: 'SKU2',
      anno: '2022',
      importo: 120.53,
    ),
    Vendita(
      prodotto: 'SKU3',
      anno: '2023',
      importo: 50,
    ),
    Vendita(
      prodotto: 'SKU4',
      anno: '2023',
      importo: 985.69,
    ),
    Vendita(
      prodotto: 'SKU5',
      anno: '2024',
      importo: 247,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Column(
        children: [
          SfCartesianChart(
            primaryXAxis: const CategoryAxis(),
            title: const ChartTitle(text: 'Analisi annuale'),
            legend: const Legend(isVisible: true),
            tooltipBehavior: TooltipBehavior(enable: true),
            series: <CartesianSeries<Vendita, String>>[
              LineSeries<Vendita, String>(
                dataSource: _vendite,
                xValueMapper: (Vendita v, _) => v.anno,
                yValueMapper: (Vendita v, _) => v.importo,
                name: 'Vendite',
                dataLabelSettings: const DataLabelSettings(
                  isVisible: true,
                ),
              ),
            ],
          ),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: SfSparkLineChart.custom(
                trackball: const SparkChartTrackball(
                  activationMode: SparkChartActivationMode.tap,
                ),
                marker: const SparkChartMarker(
                  displayMode: SparkChartMarkerDisplayMode.all,
                ),
                labelDisplayMode: SparkChartLabelDisplayMode.all,
                xValueMapper: (int index) => _vendite[index].anno,
                yValueMapper: (int index) => _vendite[index].importo,
                dataCount: 5,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Enjoy!