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

はじめに データ可視化は現代のアプリケーションにおいて重要な側面であり、ユーザーが直感的なグラフやチャートを通じて複雑なデータを理解するのに役立ちます。このチュートリアルでは、flutterアプリケーションで fl chart パッケージを使用して、インタラクティブで視覚的に魅力的なチャートを作成する方法を学びます。さらに、parse serverによって提供されるバックエンド・アズ・ア・サービス（baas）プラットフォームであるback4appを統合し、チャートのデータを保存および取得します。このチュートリアルの終わりまでには、back4appから取得した動的データを表示する完全に機能するflutterアプリが完成します。さまざまなチャートタイプ（折れ線グラフ、棒グラフ、円グラフなど）を使用します。 前提条件 このチュートリアルを完了するには、次のものが必要です back4app アカウント 。アカウントをお持ちでない場合は、次のリンクから無料アカウントにサインアップできます。 back4app https //www back4app com/ flutter sdk がローカルマシンにインストールされていること。お使いのオペレーティングシステムに対する 公式flutterインストールガイド https //flutter dev/docs/get started/install に従ってインストールできます。 dartとflutterの基本的な知識 。flutterが初めての場合は、基本を理解するために flutterドキュメント https //flutter dev/docs を確認することをお勧めします。 flutter用のparse server sdk がプロジェクトに追加されていること。設定方法については、次のリンクを参照してください。 back4app flutter sdkガイド https //www back4app com/docs/flutter/parse flutter sdk ideまたはテキストエディタ （visual studio codeやandroid studioなど）。 ステップ 1 – back4app バックエンドの設定 このステップでは、新しい back4app アプリケーションを作成し、チャートデータを保存するためのデータクラスを設定します。 1 1 新しい back4app アプリケーションを作成する あなたの back4app ダッシュボード https //dashboard back4app com/ にログインします。 「 新しいアプリを作成 」をクリックします。 アプリケーションの名前を入力します。例 「flutterchartapp」 , そして「 作成 」をクリックします。 1 2 データモデルの設定 アプリケーションダッシュボードで、左サイドバーの "データベース" セクションに移動します。 ページの上部で "クラスを作成" をクリックします。 表示されるモーダルで "カスタム" を選択します。 クラス名として "salesdata" を入力します。 "クラスを作成" をクリックします。 1 3 クラスにカラムを追加 "salesdata" クラスで、 "+" をクリックして新しいカラムを追加します。 次のカラムを追加します 月 タイプ 文字列 売上 タイプ 数値 あなたのデータモデルは、月次の売上データを保存するために設定されました。これは、flutterアプリで視覚化します。 ステップ2 – サンプルデータでデータベースを埋める アプリでデータを取得する前に、back4appデータベースにいくつかのサンプルデータが必要です。 まだ "salesdata" クラスで、 "+" をクリックして新しい行を追加します。 次のサンプルデータを入力します 上記の手順を繰り返して、すべてのサンプルデータエントリを追加します。 ステップ3 – flutterプロジェクトの設定 このステップでは、新しいflutterプロジェクトを作成し、必要な依存関係を追加します。 3 1 新しいflutterプロジェクトを作成する ターミナルを開いて、次のコマンドを実行します flutter create flutter chart app プロジェクトディレクトリに移動します cd flutter chart app 3 2 pubspec yaml に依存関係を追加する pubspec yaml を開いて、次の依存関係を追加します 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 を開いて修正します 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 」を作成し、次のコードを追加します 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 – アプリの実行 フロントエンドとバックエンドの設定が完了したので、アプリを実行する時が来ました。 ターミナルでプロジェクトディレクトリに移動します。 次のコマンドを使用してアプリを実行します flutter run 各月の売上データを表示する折れ線グラフが表示されるはずです。 ステップ 7 – インタラクティブ性とカスタマイズの追加 チャートをよりインタラクティブで視覚的に魅力的にするために、さらにカスタマイズできます。 7 1 チャートの外観をカスタマイズする あなたの linechartbardata を build メソッドで修正します 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 に追加します。 touchdata linetouchdata( touchtooltipdata linetouchtooltipdata( tooltipbgcolor colors blueaccent, ), ), ステップ8 – 異なるチャートタイプの表示 また、 fl chart を使用して他のタイプのチャートを表示することもできます。 8 1 円グラフの例 あなたの linechart を build メソッドで piechart に置き換えます。 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 ドキュメント https //www back4app com/docs pub devのfl chartパッケージ https //pub dev/packages/fl chart flutter用parse sdkガイド https //docs parseplatform org/flutter/guide/ flutter公式ドキュメント https //flutter dev/docs プレースホルダー値を 'your application id' と 'your client key' に実際のback4appの資格情報に置き換えることを確認してください。コーディングを楽しんでください！