Почему этот код не показывает CircularProgressIndicator?

Question

Это простой код, который отображает другой текст, основанный на случайном числе. Я хочу показать CircularProgressIndicator, когда пользовательская кнопка pu sh 'next' и метод 'getRandom' задерживают 5 секунд.

CircularProgressIndicator никогда не отображается ... почему?

import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return MyAppState();
  }
}


class MyAppState extends State<MyApp> {
  Future<String> random;

  @override
  void initState() {
    super.initState();
    random = getRandom();
  }

  Future<String> getRandom() async{
    print("getRandom");
    Future.delayed(const Duration(seconds: 5));
    return "the number is"+Random().nextInt(100).toString();
  }


  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
          appBar: AppBar(title: Text("Random Widget")),
          body: Center(child:
          FutureBuilder(
              future:random,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Column(children: [
                    Text(snapshot.data,textScaleFactor: 4),
                    getNextButton()
                  ]);
                } else if (snapshot.hasError) {
                  return Text("ERROR");
                }
                return CircularProgressIndicator();
              }
          )
      )),
    );
  }

  Widget getNextButton(){
      return RaisedButton(
          child: Text("NEXT"),
          color: Colors.red,
          onPressed: () {
            setState(() {
              random=getRandom();
            });
          }
      );
  }
}

Спасибо заранее !!

Answer 1

В вашем коде есть несколько ошибок.

1. Вы передаете initialData. Таким образом, snapshot.hasData будет истинным в самом начале.
2. Вы не инициализировали случайный случай в первый раз.
3. Вы должны ждать своего Future.delay

Изменение реализации getRandom:

Future<String> getRandom() async{
   await Future.delayed(const Duration(seconds: 5));
   return "the number is"+ Random().nextInt(100).toString();
}

Реализация initState для инициализации случайного будущего:

@override
void initState() {
  super.initState();
  random = getRandom();
}

Смена будущего компоновщика:

FutureBuilder(
   future:random,
   builder: (context, snapshot) {
      if (snapshot.hasData && snapshot.connectionState == ConnectionState.done) {
         return Column(children: [
            Text(snapshot.data,textScaleFactor: 4),
            getNextButton()
          ]);
       } else if (snapshot.hasError) {
          return Text("ERROR");
       }
       return CircularProgressIndicator();
    }
)

Answer 2

Если вы не используете свое поле initialData в FutureBuilder, чем удалить, и ваш код будет работать. Если вам по какой-то причине нужно это значение, добавьте в конец следующее утверждение:

if(snapshot.data != 'starting') {
  return CircularProgressIndicator();
}

См. docs для примера того, как его использовать