[Flutter] 플러터 웹뷰 사용하기

플러터 웹뷰를 두가지를 사용해봤다.

다른 한가지는 다음편에

 

1. flutter_webview

flutter pub add webview_flutter

 

라이브러리 설치하면

dependencies:
  webview_flutter: ^4.8.0

버전으로 설치가 된다.

 

import 'package:webview_flutter/webview_flutter.dart';

라이브러리 import 한 뒤에

 

 @override
void initState() {
	super.initState();
    // 현재 userAgent에 "Flutter" 추가하기
    final customUserAgent = "${widget.currentUserAgent} Flutter";
    controller = WebViewController.fromPlatformCreationParams(params);
    controller
    	..setJavaScriptMode(JavaScriptMode.unrestricted)
        ..setUserAgent(customUserAgent)
        ..setOnJavaScriptAlertDialog(
        	(request) async {
        		await _showAlert(context, request.message);
         	},
        )
        ..setOnJavaScriptConfirmDialog((request) async {
        	final bool result = await _showConfirm(context, request.message);
        	return result;
       	})
       ..loadRequest(Uri.parse(url));
       ... 생략 ...
}

 

기본 설정인데, 나는 userAgent에 플러터라는 걸 명시해줬다.

웹뷰 사용중이니 웹뷰에서 발생하는 alert나 confirm을 플러터 위젯으로 변경처리 해줬다.

 

 

728x90

 

 

 

  Future<void> _showAlert(BuildContext context, String message) async {
    return showDialog<void>(
        context: context,
        builder: (BuildContext ctx) {
          return AlertDialog(
            title: const Text("Alert"),
            content: Text(message),
            actions: <Widget>[
              TextButton(
                onPressed: () {
                  Navigator.of(ctx).pop();
                },
                child: Text(
                  'OK',
                  style: TextStyle(
                    color: Colors.red[400],
                  ),
                ),
              )
            ],
          );
        });
  }

  Future<bool> _showConfirm(BuildContext context, String message) async {
    return await showDialog<bool>(
            context: context,
            builder: (BuildContext ctx) {
              return AlertDialog(
                content: Text(message),
                actions: <Widget>[
                  TextButton(
                      onPressed: () {
                        Navigator.of(ctx).pop(false);
                      },
                      child: Text(
                        'Cancel',
                        style: TextStyle(
                          color: Colors.red[400],
                        ),
                      )),
                  TextButton(
                      onPressed: () {
                        Navigator.of(ctx).pop(true);
                      },
                      child: Text(
                        'OK',
                        style: TextStyle(
                          color: Colors.red[400],
                        ),
                      )),
                ],
              );
            }) ??
        false;
  }
}