Flutter - это мощный инструмент для создания кроссплатформенных мобильных приложений. Одним из важных компонентов в создании мобильных приложений являются графики. В этой статье мы рассмотрим создание графиков в Flutter. Flutter предоставляет множество библиотек для создания графиков. Одной из самых популярных библиотек является charts_flutter. Она позволяет создавать разнообразные графики, такие как линейные, круговые, столбчатые и т.д. Для начала давайте создадим простой график линии. Для этого нам нужно добавить зависимость в файл pubspec.yaml:

yaml
dependencies:
  charts_flutter: ^0.10.2

После добавления зависимости мы можем создать график. Создадим StatefulWidget, который содержит charts_flutter:

dart
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';

class SimpleLineChart extends StatefulWidget {
  @override
  _SimpleLineChartState createState() => _SimpleLineChartState();
}

class _SimpleLineChartState extends State<SimpleLineChart> {
  List<charts.Series<LinearSales, int>> _seriesList;

  _generateData() {
    var data1 = [
      new LinearSales(0, 5),
      new LinearSales(1, 25),
      new LinearSales(2, 100),
      new LinearSales(3, 75),
    ];

    _seriesList = [
      new charts.Series<LinearSales, int>(
        id: 'Sales',
        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
        domainFn: (LinearSales sales, _) => sales.year,
        measureFn: (LinearSales sales, _) => sales.sales,
        data: data1,
      )
    ];
  }

  @override
  void initState() {
    super.initState();
    _generateData();
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Simple Line Chart'),
      ),
      body: new charts.LineChart(_seriesList),
    );
  }
}

class LinearSales {
  final int year;
  final int sales;

  LinearSales(this.year, this.sales);
}

Данный пример создает простой график, который состоит из четырех точек. Каждая точка представляет значения x и y. Значения x определяют положение точки на графике, а значения y - его значение на оси ординат. Код начинается с импорта библиотеки. charts_flutter импортируется как charts. Затем мы создаем класс SimpleLineChart, который extends StatefulWidget, чтобы мы могли обновлять состояние приложения. Далее в классе создаем два класса - LinearSales и _SimpleLineChartState. LinearSales - это класс, который используется для хранения значения для точек графика. У каждой точки есть значение x (год) и значение y (продажи). _SimpleLineChartState - это место, где мы создаем серию данных, необходимых для построения графика. Мы создаем список _seriesList, который содержит данные о продажах. Мы также определяем функции domainFn, measureFn и colorFn, которые используются для определения типа данных и цвета графика. Функция _generateData заполняет данные, которые мы создали, и сохраняет их в нашей серии данных _seriesList. В конце мы добавляем виджет LineChart, который указывает нашу серию данных. Давайте теперь рассмотрим другой пример для создания более сложного графика - круговую диаграмму. Для создания круговой диаграммы нам нужно изменить некоторые элементы кода.

dart
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/material.dart';

class SimplePieChart extends StatelessWidget {
  final List<charts.Series> seriesList;
  final bool animate;

  SimplePieChart(this.seriesList, {this.animate});

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Simple Pie Chart'),
      ),
      body: new charts.PieChart(
        seriesList,
        animate: animate,
        defaultRenderer: new charts.ArcRendererConfig(arcWidth: 60),
      ),
    );
  }
}

class LinearSales {
  final String year;
  final int sales;

  LinearSales(this.year, this.sales);
}

Здесь мы создаем StatefulWidget SimplePieChart, который получает список серий данных и bool animate и возвращает виджет PieChart. Круговая диаграмма принимает те же параметры, что и график линии, но также имеет параметр defaultRenderer, который позволяет настроить стиль отображения графика. Затем мы создаем класс LinearSales, который используется для указания значения для каждой серии данных. Теперь можно создать различные графики на основе изменения данных в LinearSales. Например, Вы можете создать график, который отображает количество продаж по категориям или количество пользователей в каждом регионе. В итоге, Flutter предоставляет широкие возможности для создания различных типов графиков с помощью множества библиотек. Начиная от создания простых графиков линии до сложных круговых диаграмм, Flutter предоставляет мощный инструментарий для создания высококачественных графиков и визуализации данных в Вашем мобильном приложении.