Firebaseから値をとってきてグラフにする方法がわかりません。

Question

FlutterでFirebaseの値をFlChartでグラフ化したいのですがうまくいきません。
具体には値を格納したリスト作成することはできましたがをそれをLinechartBerDate()のspotsに渡せません。
エラーが出ているわけでもなくどうしたらいいのかさっぱりわからず困り果てています。

該当のソースコード

void initState() {
  Future(() async {
    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp();
    final ref = FirebaseDatabase.instance.ref();

    final onedaytmp = await ref.child().get();
    final onedayhum = await ref.child().get();

    final tempKey = <dynamic>[];
    final tempValue = <dynamic>[];


    if (onedaytmp.exists) {
      for (var i = 0; i <= 23; i++) {

        tempKey.add(onedaytmp
            .child("${i}")
            .key);

        tempValue.add(onedaytmp
            .child("${i}")
            .value);
      }
      tempKey.cast<int>();
      tempValue.cast<int>();
 
      List<FlSpot> testspots = [
        FlSpot(tempKey[0], tempValue[0]),
        FlSpot(tempKey[1], tempValue[1]),
        FlSpot(tempKey[2], tempValue[2]),
        FlSpot(tempKey[3], tempValue[3]),
        FlSpot(tempKey[4], tempValue[4]),
        FlSpot(tempKey[5], tempValue[5]),
        FlSpot(tempKey[6], tempValue[6]),
        FlSpot(tempKey[7], tempValue[7]),
        FlSpot(tempKey[8], tempValue[8]),
        FlSpot(tempKey[9], tempValue[9]),
        FlSpot(tempKey[10], tempValue[10]),
        FlSpot(tempKey[11], tempValue[11]),
        FlSpot(tempKey[12], tempValue[12]),
        FlSpot(tempKey[13], tempValue[13]),
        FlSpot(tempKey[14], tempValue[14]),
        FlSpot(tempKey[15], tempValue[15]),
        FlSpot(tempKey[16], tempValue[16]),
        FlSpot(tempKey[17], tempValue[17]),
        FlSpot(tempKey[18], tempValue[18]),
        FlSpot(tempKey[19], tempValue[19]),
        FlSpot(tempKey[20], tempValue[20]),
        FlSpot(tempKey[21], tempValue[21]),
        FlSpot(tempKey[22], tempValue[22]),
        FlSpot(tempKey[23], tempValue[23]),
        FlSpot(tempKey[24], tempValue[24]),
      ];
      }
  }
    );
}




class NextPage extends StatelessWidget {
  const NextPage({Key? key}) : super(key: key);
  @override
    Widget build(BuildContext context) {
      return const MaterialApp(

        home: GraphPage(title:'test')
        );
    }

}

class GraphPage extends StatefulWidget {
  const GraphPage({Key? key, required this.title}) : super(key: key);
  final String title;
〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
class _GraphPageState extends State<GraphPage>{
  var screenSize = MediaQuery;

  @override
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;

    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body:
          Center(
            child:
          Column(
        children: <Widget>[
          const Text(
            'inui toko',
          ),

          const SizedBox(
            height: 20,
          ),
          SizedBox(
            width: 200,
            height: 50,
            child: ElevatedButton(
              style: ElevatedButton.styleFrom(
                primary: Colors.blue,
                onPrimary: Colors.black,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(10),
                ),
              ),
              onPressed: () async {
                WidgetsFlutterBinding.ensureInitialized();
                await Firebase.initializeApp();
                final ref = FirebaseDatabase.instance.ref();

                final onedaytmp = await ref.child().get();
                final onedayhum = await ref.child().get();

                final tempKey = <dynamic>[];
                final tempValue = <dynamic>[];


                if (onedaytmp.exists) {
                  for (var i = 0; i <= 23; i++) {
                   
                    tempKey.add(onedaytmp
                        .child("${i}")
                        .key);

                    tempValue.add(onedaytmp
                        .child("${i}")
                        .value);

                    print(tempKey);

                    print(onedaytmp
                        .child("${i}")
                        .value);
                  }
                  tempKey.cast<int>();
                  tempValue.cast<int>();

                  print(tempKey);
                  print(tempValue);
                }
                },
            ),
          ),

〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜〜
                      LineChartBarData(
                          spots: testspots,
                      )
                    ],
                    titlesData: FlTitlesData(
                      show: true,
                      bottomTitles: AxisTitles(
                        sideTitles : SideTitles(
                        showTitles: true,
                        getTitlesWidget: bottomTitleWidgets,
                        ),
                      )
                ),
              ) ,
            )
            )

        ],
      ),
          )
    );
  }

Answer 1

型変換を工夫することで自決しました。

Answer 2

一番上のinitStateは_GraphPageStateのものですか?
そしてtestspotsは_GraphPageStateが保持している状態、ということですか?

もしそうなら、例えば

class _GraphPageState extends State<GraphPage>{
  var screenSize = MediaQuery;
  List<FlSpot> testspots = []; //←ここを追加。

上記のように宣言しないと、(_GraphPageStateの)buildメソッドの中でtestspotsにアクセスできないので、
(Undefined name 'testspots')となってしまっているのではないでしょうか。

そうであればinitState内の

      List<FlSpot> testspots = [
        FlSpot(tempKey[0], tempValue[0]),

の箇所は下記のようにしないと、状態へのセットではなく、initState内のローカル変数へのセットになってしまいますね。

      testspots = [
        FlSpot(tempKey[0], tempValue[0]),

全てのコードを投稿できないケースも当然あるでしょうからそれは良いのですが、
結局全てのコードがわからないとこちらも推理ゲームになってしまうのでなかなか難しいですよね。

Answer 3

実行して確かめられないので実装ぱっと見での答えだけど、initStateのFutureでデータ収集してるけど、buildでウィジェット作成までにデータ収集が完了してないとかじゃないかな。

データ収集にFutureを使ったら、FutureBuilderを使うかデータ収集完了時にsetStateで再buildをする必要がある。

後、実装として問題ありそうなのがtestspotsの個数。
元のtemp～がfor文で24個しか詰めてないのに、25個分作ろうとしているところ。
例外が出ていないらしいので問題ないのかな？

Comments

[hikagami]

現状、spots: testspots,にエラー(Undefined name 'testspots')となってしまっている状態です。
しかしListを_GraphPageState内に入れると今度はFirebaseの情報が取得できずエラーになってしまい手詰まりといった感じです...

[ta.fu]

質問欄にはエラーがないと書かれていたのですが、それは「エラー」というのをどういった意味でとらえていたのでしょうか。
実行可能なコードがない、情報が乏しい（間違っている）状態の質問内容では、私には上記答えが精一杯です。

情報の後だしをすると、回答する意欲が減衰する人が多いと思うので、辞めたほうが良いですよ。