728x90
반응형
https://pub.dev/packages/webview_flutter
Home 위젯 State에 다음과 같이 WebViewController를 만든다.
class _HomeWidgetState extends State<HomeWidget> {
var webviewController = WebViewController()
..setJavaScriptMode(JavaScriptMode.unrestricted)
..setBackgroundColor(const Color(0x00000000))
..setNavigationDelegate(
NavigationDelegate(
onPageStarted: (url) => print('onPageStated.. url:$url'),
onPageFinished: (url) => print('onPageFinished.. url:$url'),
onProgress: (progress) => print('onProgress.. progress:$progress'),
)
)
..loadRequest(Uri.parse("https://m.naver.com"));
내부에 onNavigationRequest가 있는데
: NavigationDecision.prevent - 해당 URL로 이동할 수 없게 막는 것이고,
: NavigationDecision.navigate - 해당 URL로 이동할 수 있도록 하는 것이다.
onNavigationRequest: (request) {
print('onNavigationRequest.. $request');
// 다른 페이지로 이동하지 않게 막음
return NavigationDecision.navigate;
},
UI부문에 WebViewWidget에 webviewController인스턴스를 대입한다.
@override
Widget build(BuildContext context) {
return Scaffold(
body: PopScope(
child: WebViewWidget(
controller: webviewController,
),
),
);
}
웹에서 뒤로가기시 이전 화면을 보여주기
: 우선, WillPopScope로 보여준다
: return false는 뒤로가지 못하게 막는 것
: return true는 뒤로가도록 허용하는 것
@override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: () async {
if (await webviewController.canGoBack()) {
webviewController.goBack();
return false;
} else {
return true;
}
},
child: Scaffold(
body: WebViewWidget(
controller: webviewController,
),
),
);
}
android에서 backpressDispatcher를 만져줘야 하나 했지만, dart엔진 위에 그려지는 것이기 때문에
걱정할 필요가 없는 듯하다.
WillPopScope는 Deprecated된 위젯이기 때문에 PopScope로 변환해보자,
@override
Widget build(BuildContext context) {
return PopScope(
canPop: false,
onPopInvoked: (bool didPop) async {
if (await webviewController.canGoBack()) {
webviewController.goBack();
} else {
SystemNavigator.pop(animated: true);
}
},
child: Scaffold(
body: WebViewWidget(
controller: webviewController,
),
),
);
}
728x90
반응형
'dev > flutter' 카테고리의 다른 글
[Flutter] 잠시 에러표시(노란줄) 안보이게 (0) | 2023.12.14 |
---|---|
[Flutter] Debug모드 확인 (0) | 2023.12.14 |
[Flutter] 다음 화면 스크린으로 이동(Navigator) (0) | 2023.12.12 |
[Flutter] Progressbar 중앙에 배치 (0) | 2023.12.12 |
[Flutter] 스플래시(Splash, Intro) (0) | 2023.12.12 |