Flutter Webview

Flutter 앱에서 웹뷰 띄우기

개인정보 보호 페이지와 같은 화면을 링크하기 위해서는 웹뷰를 이용하는 것이 좋은데요.

플러그인을 이용해 쉽게 웹뷰를 띄울 수 있습니다.

pub.dev/packages/webview_flutter

webview_flutter | Flutter Package

 

우선 pubspec.yaml 파일에 플러그인을 추가합니다.

webview_flutter: ^1.0.7

 

웹뷰를 보여줄 파일 하나를 생성하고 상단에 플러그인 링크를 연결합니다.

import 'package:webview_flutter/webview_flutter.dart';

 

구현은 아주 간단합니다.

아래에 소스에서 initialUrl에 링크를 넣어주면 됩니다.

import 'dart:io';

import 'package:webview_flutter/webview_flutter.dart';

class WebViewExample extends StatefulWidget {
  @override
  WebViewExampleState createState() => WebViewExampleState();
}

class WebViewExampleState extends State<WebViewExample> {
  @override
  void initState() {
    super.initState();
    // Enable hybrid composition.
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  }

  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'https://flutter.dev',
    );
  }
}

 

WebViewController을 이용하면 웹뷰 생성시와 종료 시점에 필요한 처리를 할 수 있습니다.

아래는 웹뷰 생성 시간동안 로딩바를 표시해주는 예제입니다.

 

 

pubspec.yaml 파일에 loading plugin 추가

loading_overlay: ^0.2.1

 

구현 소스

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

class WebViewExample extends StatefulWidget {
  @override
  WebViewExampleState createState() => WebViewExampleState();
}


class WebViewExampleState extends State<WebViewExample> {
  bool _isLoading = false;
  final Completer<WebViewController> _controller = Completer<WebViewController>();

  @override
  void initState() {
    super.initState();
    
    _isLoading = true;
    // Enable hybrid composition.
    if (Platform.isAndroid) WebView.platform = SurfaceAndroidWebView();
  }

  @override
  Widget build(BuildContext context) {
    return LoadingOverlay(
        isLoading: _isLoading,
        opacity: 0.5,
        progressIndicator: CircularProgressIndicator(),
        color: Colors.black,
        child: Scaffold(
        	appBar: AppBar(
    			centerTitle: true,
    			title: Text(
      				'Privacy Policy'
    			),
  		),
        	body: WebView(
         		initialUrl: 'http://christian-alice.com/ashop_privacy_policy.html',
         		onWebViewCreated: (WebViewController webViewController) {
               	    _controller.complete(webViewController);
         	},
         	onPageFinished: (finish) {
            	    	setState(() {
               	       _isLoading = false;
            	});
         },
     )));
  }
}

 

728x90

iOS의 경우 https URL이 아닌 경우 표시되지 않기 때문에 추가로 ios/Runner/Info.plist 에 아래의 소스를 추가해 줍니다.

<key>NSAppTransportSecurity</key>
<dict>
	<key>NSAllowsArbitraryLoads</key>
	<true/>
	<key>NSAllowsArbitraryLoadsForMedia</key>
	<true/>
	<key>NSAllowsArbitraryLoadsInWebContent</key>
	<true/>
</dict>

 

 

성공적으로 나오는 것을 확인할 수 있습니다.

 

Flutter 어플 개인정보 보호 정책 화면