ゼロから始めるFlutter生活

import 'package:flutter/material.dart';
import 'package:flutter_web_chartjs/chartjs.models.dart';
import 'package:flutter_web_chartjs/chartjs.wrapper.dart';

import 'dart:async';
import 'package:firebase_core/firebase_core.dart';
import 'package:cloud_firestore/cloud_firestore.dart';

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

  final FirebaseApp app = await FirebaseApp.configure(
    name: 'Turniprice Visualizer',
    options: const FirebaseOptions(
      apiKey: "YOUR_API_KEY",
      projectID: "YOUR_PROJECT_ID",
      googleAppID: "YOUR_APP_ID",
      databaseURL: "YOUR_DATABASE_URL",
      storageBucket: "YOUR_STORAGE_BUCKET",
    ),
  );
  final Firestore firestore = Firestore(app: app);

  runApp(MyApp(firestore: firestore));
}

class MyApp extends StatefulWidget {
  MyApp({this.firestore});
  final Firestore firestore;

  var values = {};
  List<String> x = [];

  final colors = [
    Colors.blue.withOpacity(0.4),
    Colors.yellow.withOpacity(0.4),
    Colors.red.withOpacity(0.4),
    Colors.green.withOpacity(0.4)
  ];

  Future<ChartData> _getChartData() async {
    // Query documents
    final querySnapshot = await firestore
        .collection("prices")
        .orderBy("date", descending: true)
        .orderBy("ampm", descending: true)
        .getDocuments();

    querySnapshot.documents.forEach((doc) => format(doc));

    // ChartDataオブジェクトを作成
    // datasetsを作成
    List<ChartDataset> datasets = [];
    int count = 0;
    values.forEach((key, value) {
      datasets.add(
        ChartDataset(
          data: value,
          label: key,
          backgroundColor: colors[count],
        )
      );
      count++;
    });

    final chartData = ChartData(
      labels: x,
      datasets: datasets,
    );

    return chartData;
  }

  void format(DocumentSnapshot doc) {
    print(doc["date"] + "/"+ doc["ampm"] + "/"+ doc["label"] + "/"+ doc["val"].toString());

    // "date+ampm"がxにいるかチェックし、いなければリストに追加
    var xVal = doc["date"] + doc["ampm"];
    if (!x.contains(xVal)) {
      x.add(xVal);
    }

    // labelをキーにしたリストがvaluesにあるかチェックし、いなければリストに追加
    values[doc["label"]] ??= [];
    // valueをリストに追加
    values[doc["label"]].add(doc["val"]);
  }

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Turniprice Visualizer'),
        ),
        body: Center(
          child: FutureBuilder(
            future: widget._getChartData(),
            builder: (BuildContext context, AsyncSnapshot<ChartData> snapshot) {
              // 通信中
              if (snapshot.connectionState != ConnectionState.done) {
                return CircularProgressIndicator();
              }
              // 通信終了だがエラーあり
              if (snapshot.hasError) {
                print("[USER-ERROR]" + snapshot.error.toString());
                return Text(snapshot.error.toString());
              }
              // 通信正常終了
              if (snapshot.hasData) {
                print("[USER-INFO]Fetching data succeeded.");
                return ChartJS(
                    id: 'graph',
                    config: ChartConfig(
                        type: ChartType.line,
                        options: ChartOptions(
                            animationConfiguration: ChartAnimationConfiguration(
                              duration: Duration(milliseconds: 1200),
                              easing: ChartEasing.easeOutQuart,
                            ),
                            scales: ChartScales(
                              xAxes: [
                                ChartAxis(
                                  type: ChartCartesianAxisType.category,
                                )
                              ],
                            ),
                            tooltip: ChartTooltip(
                                intersect: false,
                                mode: ChartTooltipMode.isIndex,
                                callbacks: ChartCallbacks(label: (tooltip) {
                                  return 'R\$ ${tooltip.value}';
                                }))),
                        data: snapshot.data),
                  );
              } else {
                print("[USER-INFO]Fetching data failed.");
                return Text('No Data');
              }
            },
          ),
        ),
      ),
    );
  }
}