[{"data":1,"prerenderedAt":76},["ShallowReactive",2],{"tutorial-disegnare-grafici-a-barre-e-a-linee-in-flutter-con-fl-chart":3,"comments-tutorial-disegnare-grafici-a-barre-e-a-linee-in-flutter-con-fl-chart":75},{"id":4,"title":5,"slug":6,"excerpt":7,"intro":8,"cover_image":9,"video_url":10,"difficulty":11,"estimated_minutes":12,"flutter_version":13,"status":14,"published_at":15,"meta_title":16,"meta_description":17,"category":18,"author":22,"steps":24},24,"Disegnare grafici a barre e a linee in Flutter con fl_chart","disegnare-grafici-a-barre-e-a-linee-in-flutter-con-fl-chart","Impara a integrare il pacchetto fl_chart in Flutter per creare grafici a barre e a linee interattivi, personalizzando assi, colori e tooltip.","# Visualizzare dati con fl_chart\n\nLa visualizzazione dei dati è una parte fondamentale di molte applicazioni: dashboard finanziarie, app per il fitness, statistiche di vendita e molto altro. In Flutter, uno dei pacchetti più potenti e flessibili per creare grafici è **fl_chart**.\n\nIn questo tutorial vedremo come integrare `fl_chart` in un progetto Flutter e costruire due tipi di grafici molto comuni: un **grafico a barre** (BarChart) e un **grafico a linee** (LineChart). Personalizzeremo gli assi, i colori, i tooltip interattivi e l'aspetto generale.\n\nAl termine avrai una schermata con due grafici funzionanti e i fondamenti per crearne di più complessi.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Ftutorials\u002Fe138a680-2854-4425-a6db-3af65422fb76.jpg",null,"intermediate",35,"3.x","published","2026-06-30T04:30:49+00:00","Grafici in Flutter con fl_chart: barre e linee","Guida pratica per creare grafici a barre e a linee in Flutter usando fl_chart, con assi personalizzati, colori e tooltip interattivi.",{"id":19,"name":20,"slug":21},1,"Guide","guide",{"id":19,"name":23},"Flutter Bot",[25,32,40,47,54,61,68],{"id":26,"position":19,"title":27,"body":28,"code_snippet":29,"code_language":30,"expected_result":31,"demo_url":10,"video_url":10},162,"Aggiungere la dipendenza fl_chart","Per prima cosa aggiungiamo il pacchetto `fl_chart` al progetto. Apri il file `pubspec.yaml` e aggiungi la dipendenza nella sezione `dependencies`, poi esegui `flutter pub get` dal terminale (o lascia che l'IDE lo faccia automaticamente).\n\nVerifica sempre l'ultima versione disponibile su [pub.dev](https:\u002F\u002Fpub.dev\u002Fpackages\u002Ffl_chart).","dependencies:\n  flutter:\n    sdk: flutter\n  fl_chart: ^0.69.0","yaml","Il pacchetto fl_chart viene scaricato e reso disponibile nel progetto senza errori.",{"id":33,"position":34,"title":35,"body":36,"code_snippet":37,"code_language":38,"expected_result":39,"demo_url":10,"video_url":10},163,2,"Preparare il modello dei dati","Definiamo una semplice struttura dati che useremo per entrambi i grafici. Immaginiamo di voler rappresentare le vendite mensili. Creiamo una classe `MonthlySales` e una lista di esempio.\n\nIn un'app reale questi dati arriverebbero da un'API o da un database, ma per il tutorial usiamo valori statici.","class MonthlySales {\n  final String month;\n  final double amount;\n\n  const MonthlySales(this.month, this.amount);\n}\n\nconst salesData = \u003CMonthlySales>[\n  MonthlySales('Gen', 320),\n  MonthlySales('Feb', 280),\n  MonthlySales('Mar', 450),\n  MonthlySales('Apr', 390),\n  MonthlySales('Mag', 520),\n  MonthlySales('Giu', 610),\n];","dart","Hai una lista tipizzata di dati pronta per essere visualizzata nei grafici.",{"id":41,"position":42,"title":43,"body":44,"code_snippet":45,"code_language":38,"expected_result":46,"demo_url":10,"video_url":10},164,3,"Creare un grafico a barre (BarChart)","Costruiamo ora un widget che mostra i dati come grafico a barre. Mappiamo ogni elemento della lista in un `BarChartGroupData`, dove l'indice rappresenta la posizione sull'asse X e il valore l'altezza della barra.\n\nUsiamo `BarChartRodData` per definire l'aspetto di ogni barra (colore, larghezza, angoli arrotondati).","import 'package:fl_chart\u002Ffl_chart.dart';\nimport 'package:flutter\u002Fmaterial.dart';\n\nclass SalesBarChart extends StatelessWidget {\n  const SalesBarChart({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return AspectRatio(\n      aspectRatio: 1.6,\n      child: BarChart(\n        BarChartData(\n          maxY: 700,\n          barGroups: List.generate(salesData.length, (i) {\n            return BarChartGroupData(\n              x: i,\n              barRods: [\n                BarChartRodData(\n                  toY: salesData[i].amount,\n                  color: Colors.blue,\n                  width: 18,\n                  borderRadius: const BorderRadius.vertical(\n                    top: Radius.circular(6),\n                  ),\n                ),\n              ],\n            );\n          }),\n        ),\n      ),\n    );\n  }\n}","Viene mostrato un grafico a barre con sei colonne blu di altezze diverse.",{"id":48,"position":49,"title":50,"body":51,"code_snippet":52,"code_language":38,"expected_result":53,"demo_url":10,"video_url":10},165,4,"Personalizzare gli assi e le etichette","Per rendere il grafico leggibile aggiungiamo le etichette dei mesi sull'asse X e i valori sull'asse Y. Configuriamo `titlesData` con dei `SideTitles` personalizzati.\n\nUsiamo `getTitlesWidget` per restituire un widget testuale in base all'indice, recuperando il nome del mese dalla lista dei dati.","BarChartData(\n  maxY: 700,\n  gridData: const FlGridData(show: true, drawVerticalLine: false),\n  borderData: FlBorderData(show: false),\n  titlesData: FlTitlesData(\n    topTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),\n    rightTitles: const AxisTitles(sideTitles: SideTitles(showTitles: false)),\n    leftTitles: const AxisTitles(\n      sideTitles: SideTitles(showTitles: true, reservedSize: 40, interval: 200),\n    ),\n    bottomTitles: AxisTitles(\n      sideTitles: SideTitles(\n        showTitles: true,\n        getTitlesWidget: (value, meta) {\n          final index = value.toInt();\n          if (index \u003C 0 || index >= salesData.length) {\n            return const SizedBox.shrink();\n          }\n          return Padding(\n            padding: const EdgeInsets.only(top: 6),\n            child: Text(salesData[index].month),\n          );\n        },\n      ),\n    ),\n  ),\n  barGroups: \u002F* come prima *\u002F [],\n)","Il grafico mostra i nomi dei mesi sotto le barre e i valori numerici sull'asse verticale, con una griglia orizzontale di riferimento.",{"id":55,"position":56,"title":57,"body":58,"code_snippet":59,"code_language":38,"expected_result":60,"demo_url":10,"video_url":10},166,5,"Aggiungere un grafico a linee (LineChart)","Ora rappresentiamo gli stessi dati come grafico a linee. Il cuore è il `LineChartBarData`, che riceve una lista di `FlSpot` (coppie x, y).\n\nAggiungiamo un riempimento sotto la linea con `belowBarData` e attiviamo la curvatura con `isCurved` per un effetto più morbido.","class SalesLineChart extends StatelessWidget {\n  const SalesLineChart({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return AspectRatio(\n      aspectRatio: 1.6,\n      child: LineChart(\n        LineChartData(\n          minY: 0,\n          maxY: 700,\n          lineBarsData: [\n            LineChartBarData(\n              isCurved: true,\n              color: Colors.deepPurple,\n              barWidth: 3,\n              dotData: const FlDotData(show: true),\n              belowBarData: BarAreaData(\n                show: true,\n                color: Colors.deepPurple.withOpacity(0.15),\n              ),\n              spots: List.generate(\n                salesData.length,\n                (i) => FlSpot(i.toDouble(), salesData[i].amount),\n              ),\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}","Appare una linea curva viola che collega i punti dei dati, con un'area sfumata sottostante.",{"id":62,"position":63,"title":64,"body":65,"code_snippet":66,"code_language":38,"expected_result":67,"demo_url":10,"video_url":10},167,6,"Abilitare i tooltip interattivi","Per migliorare l'esperienza utente, aggiungiamo tooltip che mostrano il valore quando si tocca o si passa sopra un punto del grafico. Configuriamo la proprietà `lineTouchData` (o `barTouchData` per il grafico a barre).\n\nPersonalizziamo il colore di sfondo del tooltip e il testo mostrato.","LineChartData(\n  minY: 0,\n  maxY: 700,\n  lineTouchData: LineTouchData(\n    touchTooltipData: LineTouchTooltipData(\n      getTooltipColor: (_) => Colors.black87,\n      getTooltipItems: (touchedSpots) {\n        return touchedSpots.map((spot) {\n          final month = salesData[spot.x.toInt()].month;\n          return LineTooltipItem(\n            '$month\\n€ ${spot.y.toStringAsFixed(0)}',\n            const TextStyle(color: Colors.white, fontWeight: FontWeight.bold),\n          );\n        }).toList();\n      },\n    ),\n  ),\n  lineBarsData: [ \u002F* come prima *\u002F ],\n)","Toccando un punto della linea compare un tooltip con il nome del mese e il relativo importo.",{"id":69,"position":70,"title":71,"body":72,"code_snippet":73,"code_language":38,"expected_result":74,"demo_url":10,"video_url":10},168,7,"Comporre la schermata finale","Infine assembliamo i due grafici in un'unica schermata, alternandoli con dei titoli. Usiamo una `Column` dentro un `SingleChildScrollView` per gestire schermi piccoli e aggiungiamo del padding.\n\nQuesto è il punto di partenza per una dashboard completa: puoi collegare i dati a uno stato dinamico (Provider, Riverpod, ecc.) per aggiornare i grafici in tempo reale.","class ChartsPage extends StatelessWidget {\n  const ChartsPage({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      appBar: AppBar(title: const Text('Statistiche vendite')),\n      body: SingleChildScrollView(\n        padding: const EdgeInsets.all(16),\n        child: Column(\n          crossAxisAlignment: CrossAxisAlignment.start,\n          children: const [\n            Text('Vendite mensili (barre)',\n                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),\n            SizedBox(height: 16),\n            SalesBarChart(),\n            SizedBox(height: 32),\n            Text('Andamento vendite (linea)',\n                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),\n            SizedBox(height: 16),\n            SalesLineChart(),\n          ],\n        ),\n      ),\n    );\n  }\n}","Una schermata scorrevole mostra il grafico a barre e quello a linee con i rispettivi titoli, entrambi funzionanti e interattivi.",[],1785219610505]