Как показать CircularProgressIndicator перед запуском приложения Flutter?

В моем демонстрационном приложении мне нужно загрузить с сервера 2 файла JSON. Оба JSON содержат большие данные. В своем приложении Flutter я вызываю json с помощью Future + async + await, а затем вызываю для создания виджета с помощью runApp. В теле пытаюсь активировать CircularProgressIndicator. Он показывает appBar и его содержимое, а также пустое белое тело страницы, а через 4 или 5 секунд загружает данные в фактическом теле.

Мой вопрос: сначала мне нужно показать CircularProgressIndicator, а после загрузки данных я вызову runApp (). Как мне это сделать?

// MAIN
void main() async {
    _isLoading = true;

  // Get Currency Json
  currencyData = await getCurrencyData();

  // Get Weather Json
  weatherData = await getWeatherData();

   runApp(new MyApp());
}



// Body
body: _isLoading ? 
new Center(child: 
    new CircularProgressIndicator(
        backgroundColor: Colors.greenAccent.shade700,
    )
) :
new Container(
    //… actual UI
)

json async-await flutter future progress-indicator

08.05.2018 09:54

Как сделать HTTP-запрос в Javascript?

В JavaScript вы можете сделать HTTP-запрос, используя объект XMLHttpRequest или более новый API fetch. Вот пример для обоих методов:

7 335

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вам нужно поместить индикатор данных / или загрузки внутри каркаса, показывать каркас каждый раз, есть ли у вас данные или нет, содержимое внутри вы можете делать то, что хотите.

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

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Hello Rectangle',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Rectangle'),
        ),
        body: HelloRectangle(),
      ),
    ),
  );
}

class HelloRectangle extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        color: Colors.greenAccent,
        height: 400.0,
        width: 300.0,
        child: Center(
          child: FutureBuilder(
            future: buildText(),
            builder: (BuildContext context, AsyncSnapshot snapshot) {
              if (snapshot.connectionState != ConnectionState.done) {
               return CircularProgressIndicator(backgroundColor: Colors.blue);
              } else {
               return Text(
                  'Hello!',
                  style: TextStyle(fontSize: 40.0),
                  textAlign: TextAlign.center,
                );
              }
            },
          ),
        ),
      ),
    );
  }

  Future buildText() {
    return new Future.delayed(
        const Duration(seconds: 5), () => print('waiting'));
  }
}

@ThaSalani тело: находится внутри подмости. Я не понимаю. Не могли бы вы предоставить демо-код, пожалуйста

— 08.05.2018 15:25

Все, что вы показываете, находится в «runApp», поскольку оно запускает приложение. Вы должны выполнить «runApp» напрямую. В «MyApp» выполните загрузку данных, покажите индикатор прогресса и покажите данные, когда она будет завершена. В настоящее время вы ожидаете данных для запуска приложения, это белый экран, который вы видите.

— 08.05.2018 15:35

@Rene, мне нужно загрузить 4 или 5 json. у вас есть рабочие примеры?

— 12.05.2018 17:19

@TheSaleni Я сделал. Я пытаюсь. Спасибо

— 16.05.2018 12:12

@TheSaleni, спасибо. Модифицируя мой проект, он сейчас работает.

— 18.05.2018 15:29

08.05.2018 15:18