Flutter에서 Webview(웹뷰) 사용하기

 

Flutter에서 Webview를 사용하는 방법에 관한 글입니다.

이 글은 단순한 webview 구현을 목표로 합니다.

hybrid composition의 내용을 담지 않았음을 미리 알려드립니다.

이 글은 아래의 example과 문서를 기반으로 작성되었습니다.

• webview_flutter example
• webview_flutter api document

 

이 글에서 알아볼 내용

• Webview 사용법 (webview_flutter)
• http 연결 가능하게 만들기

 

Webview 사용법 (webview_flutter)

pubspec.yaml 의존성 추가

dependencies:
	flutter:
    	sdk: flutter
        
    webview_flutter: ^2.0.9 // 최신버전 권장 (https://pub.dev/packages/webview_flutter)

 

코드 구현

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

class _WebViewExampleState extends State<WebViewExample> {
  @override
  void initState() {}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView example'),
      ),
      body: Builder(builder: (BuildContext context) {
        return WebView(
          initialUrl: 'https://flutter.dev',
        );
      }),
    );
  }
}

보시다시피 단순히 화면을 띄우는 것 뿐이라면 어렵지 않습니다. 

그 다음 세부적인 구현에 있어서는 구글링을 하며 하나씩 추가해나가면 됩니다.

 

http 연결하기

보안정책으로 인해 android나 ios에서 http연결은 기본적으로 차단되어 있습니다. 따라서 https가 아닌 http를 사용하는 페이지를 웹뷰에서 열고 싶다면 추가적인 설정을 해주어야 합니다. 

 

ios (info.plist)

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

android (AndroidManifest.xml)

<application
        android:name="io.flutter.app.FlutterApplication"
        android:label="flutterdemo"
        android:icon="@mipmap/ic_launcher"
        android:usesCleartextTraffic="true"> 

 

마치면서

정말 웹사이트를 띄울 수 있는 정도만 했습니다. 세부적인 조작과 같은 내용은 다음 시간에 좀 더 정리해서 올려드리도록 하겠습니다. 감사합니다.