もっと
Flutterでfl_chartとBack4Appを使ってデータを可視化する方法

23min
はじめに
データ可視化は現代のアプリケーションにおいて重要な側面であり、ユーザーが直感的なグラフやチャートを通じて複雑なデータを理解するのに役立ちます。このチュートリアルでは、Flutterアプリケーションで fl_chart パッケージを使用して、インタラクティブで視覚的に魅力的なチャートを作成する方法を学びます。さらに、Parse Serverによって提供されるバックエンド・アズ・ア・サービス（BaaS）プラットフォームであるBack4Appを統合し、チャートのデータを保存および取得します。このチュートリアルの終わりまでには、Back4Appから取得した動的データを表示する完全に機能するFlutterアプリが完成します。さまざまなチャートタイプ（折れ線グラフ、棒グラフ、円グラフなど）を使用します。
前提条件
このチュートリアルを完了するには、次のものが必要です:
Back4App アカウント。アカウントをお持ちでない場合は、次のリンクから無料アカウントにサインアップできます。Back4App.
Flutter SDKがローカルマシンにインストールされていること。お使いのオペレーティングシステムに対する 公式Flutterインストールガイドに従ってインストールできます。
DartとFlutterの基本的な知識。Flutterが初めての場合は、基本を理解するために Flutterドキュメントを確認することをお勧めします。
Flutter用のParse Server SDKがプロジェクトに追加されていること。設定方法については、次のリンクを参照してください。Back4App Flutter SDKガイド.
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 – Flutter アプリで Parse を初期化する
Flutter アプリを Back4App に接続するには、Parse SDK を初期化する必要があります。
4.1. Back4App アプリケーションの認証情報を取得する
Back4App ダッシュボードで、次の場所に移動します "アプリ設定" > "セキュリティとキー".
あなたの アプリケーション ID と クライアントキー をメモしてください。
4.2. main.dart で Parse を初期化する
次のように 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からデータを取得する
このステップでは、Parse SDKを使用してBack4Appから販売データを取得します。
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 クラスからデータを取得し、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アプリケーションでデータを視覚化する方法を学びました。あなたは、Parse SDKを使用してデータを保存および取得するためのバックエンドソリューションとしてBack4Appを統合しました。Back4Appからデータを取得し、さまざまなチャートタイプを使用して表示することで、Flutterアプリで動的でインタラクティブなデータ視覚化を構築できるようになりました。
アプリケーションをさらに強化するために、 fl_chart が提供する他のチャートタイプ、例えば棒グラフやレーダーチャートを探求することを検討してください。また、Back4Appからのライブクエリを統合することで、リアルタイムデータの更新を実装することもできます。
追加リソース：
﻿Back4App ドキュメント﻿
﻿pub.devのfl_chartパッケージ﻿
﻿Flutter用Parse SDKガイド﻿
﻿Flutter公式ドキュメント﻿
プレースホルダー値を 'YOUR_APPLICATION_ID' と 'YOUR_CLIENT_KEY' に実際のBack4Appの資格情報に置き換えることを確認してください。コーディングを楽しんでください！
更新日 24 Jan 2025
このページは役に立ちましたか？
Flutter、カジュアルゲームツールキット、およびBack4appを使用して高度なエンドレスランナーゲームを構築する方法
Back4AppのParseを使用したFlutterのサードパーティ認証に関する完全ガイド