Чтобы создать линейный график во 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),
);
}
}