Создание линейных графиков во Flutter: различные методы с примерами кода

Чтобы создать линейный график во Flutter, вы можете использовать различные библиотеки и подходы. Вот несколько популярных методов с примерами кода:

Метод 1: использование библиотеки charts_flutter

import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';
class LineGraph extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;
  LineGraph(this.seriesList, {this.animate});
  @override
  Widget build(BuildContext context) {
    return charts.LineChart(
      seriesList,
      animate: animate,
    );
  }
}
// Example usage
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final data = [
      new DataPoint(0, 5),
      new DataPoint(1, 25),
      new DataPoint(2, 100),
      new DataPoint(3, 75),
    ];
    final series = [
      charts.Series<DataPoint, int>(
        id: 'Line Graph',
        data: data,
        domainFn: (DataPoint point, _) => point.x,
        measureFn: (DataPoint point, _) => point.y,
      ),
    ];
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Line Graph')),
        body: Center(
          child: LineGraph(
            series,
            animate: true,
          ),
        ),
      ),
    );
  }
}
class DataPoint {
  final int x;
  final int y;
  DataPoint(this.x, this.y);
}

Метод 2: использование библиотеки syncfusion_flutter_charts

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
class LineGraph extends StatelessWidget {
  final List<ChartData> chartData;
  LineGraph(this.chartData);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Line Graph')),
      body: Center(
        child: SfCartesianChart(
          primaryXAxis: CategoryAxis(),
          series: <LineSeries<ChartData, String>>[
            LineSeries<ChartData, String>(
              dataSource: chartData,
              xValueMapper: (ChartData data, _) => data.x,
              yValueMapper: (ChartData data, _) => data.y,
            ),
          ],
        ),
      ),
    );
  }
}
// Example usage
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final chartData = [
      ChartData('A', 10),
      ChartData('B', 20),
      ChartData('C', 15),
      ChartData('D', 25),
    ];
    return MaterialApp(
      home: LineGraph(chartData),
    );
  }
}
class ChartData {
  final String x;
  final double y;
  ChartData(this.x, this.y);
}

Метод 3: использование библиотеки flutter_charts

import 'package:flutter/material.dart';
import 'package:flutter_charts/flutter_charts.dart';
class LineGraph extends StatelessWidget {
  final List<List<double>> linesData;
  LineGraph(this.linesData);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Line Graph')),
      body: Padding(
        padding: EdgeInsets.all(8.0),
        child: LineChart(
          linesData,
          chartHeight: 300,
          chartWidth: MediaQuery.of(context).size.width,
          showLegend: true,
          legendPosition: LegendPosition.top,
        ),
      ),
    );
  }
}
// Example usage
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final linesData = [
      [0, 5, 10, 15, 20],
      [0, 10, 5, 20, 15],
    ];
    return MaterialApp(
      home: LineGraph(linesData),
    );
  }
}