[.4] 플러터-Flutter WebView - Progress Indicator 위젯이용 로딩 화면 구현

Progress Indicator 위젯

웹뷰(WebView)를 통해 홈페이지를 불러올때 시간이 오래 걸리는 경우가 있어요
로딩 시간이 오래 걸릴때 ProgressIndicator 위젯을 통해 시각적으로 사이트정보를
가져오는 중임을 알려주는 기능을 구현 합니다.
※ 해외 사용시 필수 기능입니다.

Flutter Progress Indicator 위젯

LinearProgressIndicator
CircularProgressIndicator

---

1. WebView 이벤트 처리 Dart 파일 생성

WebView 는 페이지 로드시 3개의 로드 이벤트를 제공 합니다.
- onPageStarted
- onProgress
- onPageFinished

추가로 만들 dart 소스파일을 저장할 폴더 "lib/src" 를 만들어 주고,
WebView 이벤트 처리용 dart  소스파일을 src 폴더 아래에
"lib/src/web_view_stack.dart" 파일을 생성 합니다.

lib/src 폴더 생성

lib/src/web_view_stack.dart 파일 생성

Dart 파일을 만들때는 .dart 확장자를 입력하지 않아도 됩니다.

Dart 파일 생성

---

web_view_stack.dart 파일에 다음 코드를 등록 합니다.

웹 페이지 호출시 페이지 로드 비율이 100% 미만일 때 Progress Indicator 위젝을 불러와 오버레이 합니다.

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

class WebViewStack extends StatefulWidget {
  const WebViewStack({Key? key}) : super(key: key);

  @override
  State<WebViewStack> createState() => _WebViewStackState();
}

class _WebViewStackState extends State<WebViewStack> {
  var loadingPercentage = 0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        WebView(
          initialUrl: 'https://flutter.dev',
          onPageStarted: (url) {
            setState(() {
              loadingPercentage = 0;
            });
          },
          onProgress: (progress) {
            setState(() {
              loadingPercentage = progress;
            });
          },
          onPageFinished: (url) {
            setState(() {
              loadingPercentage = 100;
            });
          },
        ),
        if (loadingPercentage < 100)
        	// 페이지 로드 비율이 100% 미만일때 Progress Indicator 위젯 보여주기
          LinearProgressIndicator(
            value: loadingPercentage / 100.0,
          ),
      ],
    );
  }
}

---

2. main.dart 에서 WebViewStack 부르도록 수정

main.dart 에서 WebView 를 호출했던 부분을
위에서 만든 web_view_stack -> WebViewStack() 을 호출 하도록 변경

import 'package:flutter/material.dart';
import 'src/web_view_stack.dart';  // 추가
// import 'package:webview_flutter/webview_flutter.dart'; // 제거

void main() {
  runApp(
    const MaterialApp(
      home: WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({Key? key}) : super(key: key);

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: const WebViewStack(),
      // WebView 위젯을 새로만든 WebViewStack 으로 교체
    );
  }
}

// AppBar 자동 주석 칭찬해요~ ^^

---

3. Progress Indicator 실행 테스트

main.dart 파일까지 수정 후 Android AVD 를 실행
run (Shift+F10)

1) LinearProgressIndicator 위젯 예시

if (loadingPercentage < 100)
  LinearProgressIndicator(
    value: loadingPercentage / 100.0,
  ),

---

2) CircularProgressIndicator 위젯 예시

if (loadingPercentage < 100)
  CircularProgressIndicator(
    value: loadingPercentage / 100.0,
  ),

이건 뭥?? ㅋ

LinearProgressIndicator 승리로~

원 코드는 다음 사이트를 참고 했습니다.
https://codelabs.developers.google.com/

Google Codelabs