[{"data":1,"prerenderedAt":22},["ShallowReactive",2],{"articolo-grafici-e-visualizzazione-dati-in-flutter-con-fl-chart":3,"comments-article-grafici-e-visualizzazione-dati-in-flutter-con-fl-chart":21},{"id":4,"title":5,"slug":6,"excerpt":7,"body":8,"cover_image":9,"video_url":10,"status":11,"published_at":12,"meta_title":13,"meta_description":14,"category":15,"author":19},31,"Grafici e visualizzazione dati in Flutter con fl_chart","grafici-e-visualizzazione-dati-in-flutter-con-fl-chart","Impara a integrare grafici a linee, a barre e a torta nelle tue app Flutter usando fl_chart, la libreria più flessibile per la data visualization.","## Perché fl_chart\n\nVisualizzare dati in modo chiaro è spesso il cuore di dashboard, app finanziarie e strumenti di monitoraggio. In Flutter la libreria di riferimento per questo scopo è **fl_chart**: leggera, altamente personalizzabile e costruita interamente su `CustomPaint`, il che garantisce animazioni fluide e rendering nativo su tutte le piattaforme.\n\nIn questa guida vedremo come creare grafici a linee, a barre e a torta, gestendo interazioni e animazioni.\n\n## Installazione\n\nAggiungi la dipendenza al tuo `pubspec.yaml`:\n\n```yaml\ndependencies:\n  fl_chart: ^0.69.0\n```\n\nPoi esegui `flutter pub get`. Ricorda di controllare l'ultima versione disponibile su pub.dev, dato che l'API viene aggiornata frequentemente.\n\n## Grafico a linee\n\nIl `LineChart` è ideale per mostrare andamenti nel tempo. La configurazione avviene tramite `LineChartData`:\n\n```dart\nimport 'package:fl_chart\u002Ffl_chart.dart';\nimport 'package:flutter\u002Fmaterial.dart';\n\nclass VenditeLineChart extends StatelessWidget {\n  const VenditeLineChart({super.key});\n\n  @override\n  Widget build(BuildContext context) {\n    return AspectRatio(\n      aspectRatio: 1.7,\n      child: LineChart(\n        LineChartData(\n          gridData: const FlGridData(show: true),\n          titlesData: const FlTitlesData(\n            leftTitles: AxisTitles(\n              sideTitles: SideTitles(showTitles: true, reservedSize: 40),\n            ),\n            rightTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),\n            topTitles: AxisTitles(sideTitles: SideTitles(showTitles: false)),\n          ),\n          borderData: FlBorderData(show: true),\n          lineBarsData: [\n            LineChartBarData(\n              spots: const [\n                FlSpot(0, 3),\n                FlSpot(1, 1),\n                FlSpot(2, 4),\n                FlSpot(3, 2),\n                FlSpot(4, 5),\n              ],\n              isCurved: true,\n              color: Colors.blue,\n              barWidth: 3,\n              dotData: const FlDotData(show: true),\n              belowBarData: BarAreaData(\n                show: true,\n                color: Colors.blue.withOpacity(0.2),\n              ),\n            ),\n          ],\n        ),\n      ),\n    );\n  }\n}\n```\n\nOgni punto è rappresentato da un `FlSpot(x, y)`. Con `isCurved: true` la linea viene interpolata in modo smussato, mentre `belowBarData` riempie l'area sottostante con un gradiente o un colore.\n\n## Personalizzare le etichette degli assi\n\nUn errore comune è lasciare etichette numeriche poco leggibili. Puoi mappare i valori a testi personalizzati con `getTitlesWidget`:\n\n```dart\nbottomTitles: AxisTitles(\n  sideTitles: SideTitles(\n    showTitles: true,\n    getTitlesWidget: (value, meta) {\n      const giorni = ['Lun', 'Mar', 'Mer', 'Gio', 'Ven'];\n      final index = value.toInt();\n      if (index \u003C 0 || index >= giorni.length) {\n        return const SizedBox.shrink();\n      }\n      return Padding(\n        padding: const EdgeInsets.only(top: 8),\n        child: Text(giorni[index]),\n      );\n    },\n  ),\n),\n```\n\n## Grafico a barre\n\nIl `BarChart` usa `BarChartGroupData` per raggruppare le barre. Ecco un esempio con una barra per gruppo:\n\n```dart\nBarChart(\n  BarChartData(\n    alignment: BarChartAlignment.spaceAround,\n    maxY: 10,\n    barGroups: [\n      for (var i = 0; i \u003C 5; i++)\n        BarChartGroupData(\n          x: i,\n          barRods: [\n            BarChartRodData(\n              toY: (i + 1) * 1.5,\n              color: Colors.teal,\n              width: 18,\n              borderRadius: BorderRadius.circular(4),\n            ),\n          ],\n        ),\n    ],\n  ),\n)\n```\n\n## Grafico a torta\n\nIl `PieChart` è perfetto per mostrare proporzioni:\n\n```dart\nPieChart(\n  PieChartData(\n    sectionsSpace: 2,\n    centerSpaceRadius: 40,\n    sections: [\n      PieChartSectionData(\n        value: 40,\n        color: Colors.blue,\n        title: '40%',\n        radius: 60,\n      ),\n      PieChartSectionData(\n        value: 30,\n        color: Colors.orange,\n        title: '30%',\n        radius: 60,\n      ),\n      PieChartSectionData(\n        value: 30,\n        color: Colors.green,\n        title: '30%',\n        radius: 60,\n      ),\n    ],\n  ),\n)\n```\n\nCon `centerSpaceRadius` maggiore di zero ottieni un grafico a ciambella (donut chart).\n\n## Gestire le interazioni\n\nfl_chart supporta il tocco tramite `LineTouchData`, `BarTouchData` e `PieTouchData`. Ad esempio, per aggiornare lo stato al tap su una fetta:\n\n```dart\nPieChartData(\n  pieTouchData: PieTouchData(\n    touchCallback: (event, response) {\n      if (response?.touchedSection != null) {\n        final index = response!.touchedSection!.touchedSectionIndex;\n        \u002F\u002F aggiorna lo stato, ad esempio evidenziando la sezione\n      }\n    },\n  ),\n  sections: sections,\n)\n```\n\nCombinando il callback con un `StatefulWidget` puoi evidenziare la sezione selezionata aumentando il `radius` o mostrando un tooltip personalizzato.\n\n## Animazioni\n\nMolti grafici fl_chart animano automaticamente quando cambiano i dati. Puoi controllare durata e curva passando i parametri al costruttore:\n\n```dart\nLineChart(\n  data,\n  duration: const Duration(milliseconds: 400),\n  curve: Curves.easeInOut,\n)\n```\n\n## Best practice\n\n- **Incapsula la configurazione**: crea metodi separati per `gridData`, `titlesData` e i dati, evitando widget `build` troppo lunghi.\n- **Usa AspectRatio**: i grafici hanno bisogno di vincoli di dimensione precisi; `AspectRatio` o un `SizedBox` evitano errori di layout.\n- **Separa dati e presentazione**: passa i modelli dal tuo state management (Riverpod, Bloc) e trasformali in `FlSpot` o `PieChartSectionData` in un layer dedicato.\n- **Attenzione all'accessibilità**: fl_chart disegna su canvas, quindi valuta di affiancare tabelle testuali o `Semantics` per gli screen reader.\n\n## Conclusione\n\nfl_chart offre un ottimo equilibrio tra semplicità e potenza: partendo dai widget base puoi arrivare a dashboard complesse e interattive. Il segreto è costruire un layer che trasformi i tuoi dati di dominio nei modelli richiesti dalla libreria, mantenendo la UI pulita e testabile.","https:\u002F\u002Fflutter.it\u002Fstorage\u002Farticles\u002Fa8f5a613-633d-4bac-b611-995ea07e8875.jpg",null,"published","2026-07-05T04:00:40+00:00","Grafici in Flutter con fl_chart: guida pratica","Come creare grafici a linee, barre e torta in Flutter con fl_chart: configurazione, interazioni, animazioni e best practice per la data visualization.",{"id":16,"name":17,"slug":18},1,"Guide","guide",{"id":16,"name":20},"Flutter Bot",[],1785219603231]