Больше
Как визуализировать данные в Flutter с помощью fl_chart и Back4App

24min
Введение
Визуализация данных является важным аспектом современных приложений, помогая пользователям понимать сложные данные через интуитивно понятные графики и диаграммы. В этом учебном пособии вы научитесь создавать интерактивные и визуально привлекательные диаграммы в вашем приложении Flutter с использованием пакета fl_chart. Кроме того, вы интегрируете Back4App — платформу backend-as-a-service (BaaS), работающую на Parse Server — для хранения и извлечения данных для ваших диаграмм. К концу этого учебного пособия у вас будет полностью функциональное приложение Flutter, которое отображает динамические данные, полученные из Back4App, с использованием различных типов диаграмм, таких как линейные, столбчатые и круговые диаграммы.
Предварительные требования
Чтобы завершить это учебное пособие, вам потребуется:
Аккаунт Back4App. Если у вас его нет, вы можете зарегистрироваться для получения бесплатного аккаунта на Back4App.
Установленный Flutter SDK. Вы можете следовать официальному руководству по установке Flutter для вашей операционной системы.
Базовые знания Dart и Flutter. Если вы новичок в Flutter, рассмотрите возможность изучения документации Flutter, чтобы ознакомиться с основами.
SDK Parse Server для Flutter добавлен в ваш проект. Вы можете узнать, как его настроить, следуя Руководству по SDK Flutter от Back4App.
IDE или текстовый редактор такие как Visual Studio Code или Android Studio.
Шаг 1 – Настройка бэкенда Back4App
На этом этапе вы создадите новое приложение Back4App и настроите класс данных для хранения данных вашего графика.
1.1. Создание нового приложения Back4App
Войдите в ваш панель управления Back4App.
Нажмите на "Создать новое приложение".
Введите имя для вашего приложения, например, "FlutterChartApp", и нажмите "Создать".
1.2. Настройка модели данных
В вашей панели управления приложением перейдите в раздел "База данных" в левом боковом меню.
Нажмите на "Создать класс" в верхней части страницы.
В появившемся модальном окне:
Выберите "Пользовательский".
Введите "SalesData" в качестве имени класса.
Нажмите "Создать класс".
1.3. Добавление столбцов в класс
В классе "SalesData" нажмите на "+" для добавления нового столбца.
Добавьте следующие столбцы:
месяц: Тип Строка
продажи: Тип Число
Ваша модель данных теперь настроена для хранения данных о продажах за месяц, которые вы будете визуализировать в своем приложении Flutter.
Шаг 2 – Заполнение базы данных образцовыми данными
Перед тем как получить данные в вашем приложении, вам нужны образцовые данные в вашей базе данных Back4App.
Все еще в классе "SalesData" нажмите на "+" для добавления новой строки.
Введите следующие образцовые данные:
Повторите вышеуказанные шаги, чтобы добавить все записи образцовых данных.
Шаг 3 – Настройка проекта Flutter
На этом этапе вы создадите новый проект Flutter и добавите необходимые зависимости.
3.1. Создание нового проекта Flutter
Откройте терминал и выполните:
Bash
flutter create flutter_chart_app
flutter create flutter_chart_app
﻿
Перейдите в каталог проекта:
Bash
cd flutter_chart_app
cd flutter_chart_app
﻿
3.2. Добавление зависимостей в pubspec.yaml
Откройте pubspec.yaml и добавьте следующие зависимости:
YAML
dependencies:
  flutter:
    sdk: flutter
  fl_chart: ^0.60.0
  parse_server_sdk_flutter: ^4.0.1
dependencies:
  flutter:
    sdk: flutter
  fl_chart: ^0.60.0
  parse_server_sdk_flutter: ^4.0.1
﻿
Запустите flutter pub get для установки пакетов.
Шаг 4 – Инициализация Parse в вашем приложении Flutter
Чтобы подключить ваше приложение Flutter к Back4App, вам нужно инициализировать SDK Parse.
4.1. Получите учетные данные приложения Back4App
В вашей панели управления Back4App перейдите в "Настройки приложения" > "Безопасность и ключи".
Запишите ваш ID приложения и Ключ клиента.
4.2. Инициализируйте Parse в main.dart
Откройте lib/main.dart и измените его следующим образом:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'home_page.dart'; // You'll create this file in the next step

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Chart App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'home_page.dart'; // You'll create this file in the next step

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APPLICATION_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    debug: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Chart App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}
﻿
Замените 'YOUR_APPLICATION_ID' и 'YOUR_CLIENT_KEY' на учетные данные, которые вы получили от Back4App.
Шаг 5 – Получение данных из Back4App
На этом этапе вы получите данные о продажах из Back4App, используя Parse SDK.
5.1. Создайте home_page.dart
Создайте новый файл lib/home_page.dart и добавьте следующий код:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:fl_chart/fl_chart.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class SalesData {
  final String month;
  final double sales;

  SalesData(this.month, this.sales);
}

class _HomePageState extends State<HomePage> {
  List<SalesData> chartData = [];

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

  Future<void> fetchSalesData() async {
    final QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('SalesData'));

    final ParseResponse apiResponse = await query.query();

    if (apiResponse.success && apiResponse.results != null) {
      setState(() {
        chartData = apiResponse.results!.map((data) {
          final month = data.get<String>('month') ?? '';
          final sales = data.get<num>('sales')?.toDouble() ?? 0.0;
          return SalesData(month, sales);
        }).toList();
      });
    } else {
      // Handle errors
      print('Error fetching data: ${apiResponse.error?.message}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Sales Chart'),
        ),
        body: chartData.isEmpty
            ? Center(child: CircularProgressIndicator())
            : Padding(
                padding: const EdgeInsets.all(16.0),
                child: LineChart(
                  LineChartData(
                    minY: 0,
                    maxY: 250,
                    titlesData: FlTitlesData(
                      leftTitles: AxisTitles(
                        sideTitles: SideTitles(showTitles: true),
                      ),
                      bottomTitles: AxisTitles(
                        sideTitles: SideTitles(
                          showTitles: true,
                          getTitlesWidget: bottomTitleWidgets,
                          interval: 1,
                        ),
                      ),
                    ),
                    gridData: FlGridData(show: true),
                    borderData: FlBorderData(
                      show: true,
                      border: Border.all(color: Colors.grey),
                    ),
                    lineBarsData: [
                      LineChartBarData(
                        spots: chartData
                            .asMap()
                            .entries
                            .map((e) => FlSpot(
                                e.key.toDouble(), e.value.sales))
                            .toList(),
                        isCurved: true,
                        barWidth: 3,
                        colors: [Colors.blue],
                        dotData: FlDotData(show: true),
                      ),
                    ],
                  ),
                ),
              ));
  }

  Widget bottomTitleWidgets(double value, TitleMeta meta) {
    const style = TextStyle(
      fontSize: 12,
    );
    Widget text;
    int index = value.toInt();
    if (index >= 0 && index < chartData.length) {
      text = Text(chartData[index].month.substring(0, 3), style: style);
    } else {
      text = Text('', style: style);
    }
    return SideTitleWidget(
      axisSide: meta.axisSide,
      child: text,
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'package:fl_chart/fl_chart.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class SalesData {
  final String month;
  final double sales;

  SalesData(this.month, this.sales);
}

class _HomePageState extends State<HomePage> {
  List<SalesData> chartData = [];

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

  Future<void> fetchSalesData() async {
    final QueryBuilder<ParseObject> query =
        QueryBuilder<ParseObject>(ParseObject('SalesData'));

    final ParseResponse apiResponse = await query.query();

    if (apiResponse.success && apiResponse.results != null) {
      setState(() {
        chartData = apiResponse.results!.map((data) {
          final month = data.get<String>('month') ?? '';
          final sales = data.get<num>('sales')?.toDouble() ?? 0.0;
          return SalesData(month, sales);
        }).toList();
      });
    } else {
      // Handle errors
      print('Error fetching data: ${apiResponse.error?.message}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Sales Chart'),
        ),
        body: chartData.isEmpty
            ? Center(child: CircularProgressIndicator())
            : Padding(
                padding: const EdgeInsets.all(16.0),
                child: LineChart(
                  LineChartData(
                    minY: 0,
                    maxY: 250,
                    titlesData: FlTitlesData(
                      leftTitles: AxisTitles(
                        sideTitles: SideTitles(showTitles: true),
                      ),
                      bottomTitles: AxisTitles(
                        sideTitles: SideTitles(
                          showTitles: true,
                          getTitlesWidget: bottomTitleWidgets,
                          interval: 1,
                        ),
                      ),
                    ),
                    gridData: FlGridData(show: true),
                    borderData: FlBorderData(
                      show: true,
                      border: Border.all(color: Colors.grey),
                    ),
                    lineBarsData: [
                      LineChartBarData(
                        spots: chartData
                            .asMap()
                            .entries
                            .map((e) => FlSpot(
                                e.key.toDouble(), e.value.sales))
                            .toList(),
                        isCurved: true,
                        barWidth: 3,
                        colors: [Colors.blue],
                        dotData: FlDotData(show: true),
                      ),
                    ],
                  ),
                ),
              ));
  }

  Widget bottomTitleWidgets(double value, TitleMeta meta) {
    const style = TextStyle(
      fontSize: 12,
    );
    Widget text;
    int index = value.toInt();
    if (index >= 0 && index < chartData.length) {
      text = Text(chartData[index].month.substring(0, 3), style: style);
    } else {
      text = Text('', style: style);
    }
    return SideTitleWidget(
      axisSide: meta.axisSide,
      child: text,
    );
  }
}
﻿
Объяснение
Класс SalesData: Простая модель класса для хранения данных о месяце и продажах.
fetchSalesData(): Извлекает данные из класса SalesData в Back4App и обновляет список chartData.
LineChart: Использует fl_chart, чтобы создать линейный график на основе извлеченных данных.
bottomTitleWidgets(): Настраивает метки нижней оси для отображения сокращений месяцев.
Шаг 6 – Запуск приложения
Теперь, когда вы настроили фронтенд и бэкенд, пришло время запустить ваше приложение.
В вашем терминале перейдите в каталог вашего проекта.
Запустите приложение с помощью:
Bash
flutter run
flutter run
﻿
Вы должны увидеть линейный график, отображающий данные о продажах за каждый месяц.
Шаг 7 – Добавление интерактивности и настройки
Чтобы сделать ваш график более интерактивным и визуально привлекательным, вы можете дополнительно настроить его.
7.1. Настройка внешнего вида графика
Измените LineChartBarData в вашем build методе:
Dart
LineChartBarData(
  spots: chartData
      .asMap()
      .entries
      .map((e) => FlSpot(
          e.key.toDouble(), e.value.sales))
      .toList(),
  isCurved: true,
  barWidth: 3,
  colors: [Colors.blue],
  belowBarData: BarAreaData(
    show: true,
    colors: [Colors.blue.withOpacity(0.3)],
  ),
  dotData: FlDotData(
    show: true,
  ),
)
LineChartBarData(
  spots: chartData
      .asMap()
      .entries
      .map((e) => FlSpot(
          e.key.toDouble(), e.value.sales))
      .toList(),
  isCurved: true,
  barWidth: 3,
  colors: [Colors.blue],
  belowBarData: BarAreaData(
    show: true,
    colors: [Colors.blue.withOpacity(0.3)],
  ),
  dotData: FlDotData(
    show: true,
  ),
)
﻿
belowBarData: Добавляет заполненную область под линией.
dotData: Показывает точки на каждом значении данных.
7.2. Включить взаимодействие с сенсорным экраном
Вы можете включить взаимодействие с сенсорным экраном для отображения подсказок.
Добавьте следующее в ваш LineChartData:
Dart
touchData: LineTouchData(
  touchTooltipData: LineTouchTooltipData(
    tooltipBgColor: Colors.blueAccent,
  ),
),
touchData: LineTouchData(
  touchTooltipData: LineTouchTooltipData(
    tooltipBgColor: Colors.blueAccent,
  ),
),
﻿
Шаг 8 – Отображение различных типов диаграмм
Вы также можете отображать другие типы диаграмм, используя fl_chart.
8.1. Пример круговой диаграммы
Замените LineChart в вашем build методе на PieChart:
Dart
PieChart(
  PieChartData(
    sections: chartData.map((data) {
      return PieChartSectionData(
        value: data.sales,
        title: data.month.substring(0, 3),
        color: Colors.primaries[chartData.indexOf(data) % Colors.primaries.length],
      );
    }).toList(),
    sectionsSpace: 2,
    centerSpaceRadius: 40,
  ),
)
PieChart(
  PieChartData(
    sections: chartData.map((data) {
      return PieChartSectionData(
        value: data.sales,
        title: data.month.substring(0, 3),
        color: Colors.primaries[chartData.indexOf(data) % Colors.primaries.length],
      );
    }).toList(),
    sectionsSpace: 2,
    centerSpaceRadius: 40,
  ),
)
﻿
PieChartSectionData: Определяет каждый раздел круговой диаграммы.
Заключение
В этом уроке вы узнали, как использовать пакет fl_chart для визуализации данных в вашем приложении Flutter. Вы интегрировали Back4App в качестве решения для бэкенда для хранения и извлечения данных с помощью Parse SDK. Получая данные из Back4App и отображая их с помощью различных типов диаграмм, вы теперь можете создавать динамические и интерактивные визуализации данных в ваших приложениях Flutter.
Чтобы еще больше улучшить ваше приложение, рассмотрите возможность изучения других типов диаграмм, предоставляемых fl_chart, таких как столбчатые диаграммы и радиальные диаграммы. Вы также можете реализовать обновления данных в реальном времени, интегрировав Live Queries от Back4App.
Дополнительные ресурсы:
﻿Документация Back4App﻿
﻿Пакет fl_chart на pub.dev﻿
﻿Руководство по Parse SDK для Flutter﻿
﻿Официальная документация Flutter﻿
Пожалуйста, убедитесь, что вы заменили значения-заполнители, такие как 'YOUR_APPLICATION_ID' и 'YOUR_CLIENT_KEY' на ваши реальные учетные данные Back4App. Удачного кодирования!
Обновлено 23 Jan 2025
Помогла ли вам эта страница?
Как создать продвинутую бесконечную бегалку, используя Flutter, инструмент для казуальных игр и Back4app
Полный гид по аутентификации третьих сторон в Flutter с Parse на Back4App