[flutter] 플러터 ProgressIndicator를 사용하여 웹 페이지 로딩 상태를 표시하는 방법은?
웹 페이지가 로딩 중일 때 사용자에게 진행 상태를 시각적으로 전달하는 것은 중요합니다. Flutter에서는 ProgressIndicator 위젯을 사용하여 이를 구현할 수 있습니다.
ProgressIndicator란?
ProgressIndicator는 작업이 진행 중임을 나타내는 데 사용되는 위젯으로, 원형 프로그래스 바나 선형 프로그래스 바와 같은 형태로 로딩 상태를 표시합니다.
사용 방법
다음은 ProgressIndicator를 사용하여 웹 페이지 로딩 상태를 표시하는 간단한 예제입니다.
import 'package:flutter/material.dart';
class MyWebView extends StatefulWidget {
@override
_MyWebViewState createState() => _MyWebViewState();
}
class _MyWebViewState extends State<MyWebView> {
final Completer<WebViewController> _controller = Completer<WebViewController>();
bool _isLoading = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Web Page'),
),
body: Stack(
children: [
WebView(
initialUrl: 'https://www.example.com',
onWebViewCreated: (WebViewController webViewController) {
_controller.complete(webViewController);
},
onPageFinished: (String url) {
setState(() {
_isLoading = false;
});
},
),
if (_isLoading)
Center(
child: CircularProgressIndicator(),
),
],
),
);
}
}
위 예제에서 CircularProgressIndicator를 사용하여 웹 페이지가 로딩 중일 때 중앙에 로딩 상태를 표시합니다. 웹 페이지 로딩이 완료되면 로딩 상태를 숨깁니다.
이제 당신의 앱에서 ProgressIndicator를 사용하여 웹 페이지 로딩 상태를 효과적으로 표시할 수 있을 것입니다!