[Flutter] show loading indicator in front; 로딩하는 동안 화면처리

Motivation

로딩하는 동안 front ground에 로딩표시를 하고 싶을때, 뒤의 화면은 보이고, 로딩이 완료되기까지 닫히지 않음

 

 

Like said, the real meaning of CircularProgressIndicator is to be run while loading a process without letting user interrupt. Create this loading indicator as a reusable .dart file. With this you can use the LoadingIndicator flexible everywhere and overlay the current screen.

You just have to make a .dart file containing:

import 'package:flutter/material.dart';

buildLoading(BuildContext context) {
  return showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return Center(
          child: CircularProgressIndicator(
            valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
          ),
        );
      });
}

Then you can use it anywhere using

buildLoading(context);

and dismiss it when loading is done using

Navigator.of(context).pop();

 

 

아래는 사용예시. await으로 수행할 동작을 완료시킨 후, pop으로 로딩을 끈다.

Expanded(
  child: InkWell(
    onTap: () async {
      buildLoading(context);
      if (farmDiarySn == null) {
        initializeVariables();
        _fetchData();
      } else {
        await httpHelper.deleteFarmDiary(farmDiarySn);
        initializeVariables();
        await _fetchData();
      }
      Navigator.of(context).pop(true); // 로딩끄기
      _scrollController.animateTo(
        _scrollController.position.minScrollExtent,
        duration: const Duration(seconds: 1),
        curve: Curves.fastOutSlowIn,
      );
    },
    child: Container(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('삭제', style: fifteenWhiteBoldTextStyle()),
        ],
      ),
      height: 50,
      decoration: BoxDecoration(
        color: const Color(0xffbbbfcd),
        borderRadius: BorderRadius.circular(5),
      ),
    ),
  ),
),

 

이때  발생했던 에러 : error: [dart] The argument type 'Context' can't be assigned to the parameter type 'BuildContext'. [argument_type_not_assignable]

 

아래처럼 path를 import하여 처리함

import 'package:path/path.dart' as Path

 

 

 

 

Reference

https://stackoverflow.com/questions/61538071/show-circularprogressindicator-in-front-in-flutter

Show CircularProgressIndicator in front in Flutter

https://stackoverflow.com/questions/53406548/error-dart-the-argument-type-context-cant-be-assigned-to-the-parameter-typ

error: [dart] The argument type 'Context' can't be assigned to the parameter type 'BuildContext'. [argument_type_not_assignable]