一度エラーが出てそのあと画面が表示されます

Question

import 'package:flutter/material.dart';
import 'package:flip_card/flip_card.dart';
import "package:http/http.dart" as http;
import 'feedback_model.dart';
import 'package:google_sheet_db/feedback_model.dart';
import 'dart:convert' as convert;
import 'package:google_sheet_db/background.dart';
import 'dart:math';
import 'package:flutter/cupertino.dart';

class WordsTestPage extends StatefulWidget {
  @override
  State<WordsTestPage> createState() {
    return _State();
  }
}

class _State extends State<WordsTestPage> {
String E1 = '';
String J1 = '';

  // ignore: deprecated_member_use
  List<FeedbackModel> feedbacks = List<FeedbackModel>();

  getFeedbackFromSheet() async {
    var raw = await http.get(
        "https://script.google.com/macros/s/....");

    var jsonFeedback = convert.jsonDecode(raw.body);
     //print('this is json Feedback $jsonFeedback');

    // feedbacks = jsonFeedback.map((json) => FeedbackModel.fromJson(json));

    jsonFeedback.forEach((element) {
      //print('$element THIS IS NEXT>>>>>>>');
      FeedbackModel feedbackModel = new FeedbackModel();
      feedbackModel.no = element['no'];
      feedbackModel.name = element['name'];
      feedbackModel.name2 = element['name2'];


      feedbacks.add(feedbackModel);
    });
    //print('${feedbacks[3]}');
  E1 = feedbacks[4].name;
  J1 = feedbacks[4].name2;
    print('$E1');
    print('$J1');

    if(mounted) {
      setState(() {});
    }
  }

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

  @override
  Widget build(BuildContext context) {

    final list = nextNumbers(5, min: 1, max: feedbacks.length-1);
     print(list);
      int a = list[0];

    return Scaffold(
      appBar: AppBar(
        title: Text('単語テスト'),
      ),
      body: Stack(
        children: [
          AppBackground(),
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
         children: <Widget>[
           FlipCard(
               front: Card(
                 shape: RoundedRectangleBorder(
                   borderRadius: BorderRadius.circular(12),
                 ),
                 child: Container(
                   padding: EdgeInsets.all(15),
                   width: 400,
                   height: 60,
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     children: [
                       Text(
                         feedbacks[a].name,
                         style: TextStyle(
                           fontSize: 20,
                           //fontWeight: FontWeight.bold,
                           ),
                       ),
                     ],
                   ),
                 ),
               ), // カード前面に表示するWidget
                back: Card(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Container(
                    padding: EdgeInsets.all(15),
                    width: 400,
                    height: 60,
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text(
                          feedbacks[a].name2,
                      //  J1.toString(),
                                style: TextStyle(
                                  fontSize: 20,
                                  //fontWeight: FontWeight.bold,
                                ),
                        ),
                      ],
                    ),
                  ),
                ), // カード背面に表示するWidget
                      direction: FlipDirection.HORIZONTAL, // カード回転向き(HORIZONTAL:横<デフォルト>, VERTICAL:縦)
                      flipOnTouch: true, // タッチ可否(true:カード部タップで回転する<デフォルト>, false:タップしても回転しない)
                      speed: 500, // 回転スピード(500ミリ秒<デフォルト>)
                      onFlip: () {}, // タップイベント
                      onFlipDone: (isFront) {}, // タップイベント(前面かどうかbool値で判断できる)
                    ),


         ],

      ),
    ],
      ),
    );
  }

int nextNumber({int min, int max})  {
  return min + Random().nextInt(max - min + 1);
}

 List<int> nextNumbers(int length, {int min, int max}) {
    final numbers = Set<int>();

    while(numbers.length < length){
      final number = nextNumber(min: min, max: max);
      numbers.add(number);
    }
    return List.of(numbers);

 }

}

◎現状
最終的には表示されるのですが
一度エラーが出て２秒後くらいに正しい画面が生成されます。
以下の写真を参照願います。


２回読み込まれているのかな、、、とも思います。
教えていただけたら助かります。よろしくお願いいたします。

Answer 1

手元で試せないので確実なことは分かりませんが、わかる範囲でお答えさせていただきます。

まずは、エラー文を読んでみましょう。

maxは0<max<2^32範囲じゃないといけないのに、-1でした(範囲外)。

つまり、maxが-1になっていることが原因だと言うことです。
(maxというのはおそらく、Random().nextInt()の後ろの()に入る値のことを指しています。是非コンソールに書かれているエラー文に目を通してみて下さい)

では次に、maxに関連する部分を見に行きます。
以下のコードが怪しいと思いました。

final list = nextNumbers(5, min: 1, max: feedbacks.length-1);

int nextNumber({int min, int max})  {
  return min + Random().nextInt(max - min + 1);
}

feedbacksはinitStateでapiの結果を待って、要素を追加してますよね。
実は、initStateで時間がかかる処理(apiの結果を待つのは時間がかかる処理の一つです)を行なっている場合、その実行完了を待たずしてbuildメソッドは走ってしまいます。
よって今回もinitStateでfeedbacksの追加が完了する前にbuildメソッドは処理を行なってしまい、max:feedbacks.length - 1;みたいなところで問題が起きるというわけです(まだリストには何も追加されていないのだから)
そして最終的に、nextNumberにて行われるRandom().nextInt(max - min + 1)でエラーが起きるというわけです。

ここから解決策です。
要は、feedbacksが追加されていないタイミングでbuild内の処理を行なっていたことが原因なので、それを防ぎましょう。

  @override
  Widget build(BuildContext context) {
    //こちらを追加してください
    if (feedbacks.isEmpty) {
      return const Center(child: CircularProgressIndicator());
    }
    //
    final list = nextNumbers(5, min: 1, max: feedbacks.length-1);
    .........(以下省略)

もしfeedbacksが空なら、適当なwidgetをreturnしています。
本当はFutureBuilderを使うのが適切な気がしますが、とりあえずこんな感じでfeedbacksが空なら次の処理に行かないようにしてみて下さい。

Comments

[shin_tariu]

ありがとうございます。
さっそくやってみました！とてもいい感じになりました。
もっといろいろなスキルを教えていただきたいです！

[flutter_labo]

解決したようで良かったです！
今後も時間があれば回答いたしますので、また質問していただければと思います（^_^）

[shin_tariu]

ありがとうございます。

実はずっと悩んでる部分がありまして
でも抽象的な内容で質問がしずらいんです。
もしお時間あって良ければ回答をお願いしたいのですが、、、
甘えてばかりですみません。

あなた様にだけ質問するって可能でしたっけ？

[flutter_labo]

プログラミングしてるとそういう悩みってありますよね。

@flutter_likeというidでtwitterやってるんで、dmして頂ければ答えますよー。