flutter webview 설정 및 간단한 구현

웹뷰란?

앱에서 웹브라우저 기능을 구현해주는 기술

보여주는 화면은 웹으로 개발해놓고 겉을 앱으로 감싸서 배포함

네이티브에 비해 속도가 느리고, 애니메이션이 부자연스럽긴 하지만 기존의 웹사이트를 재활용할 수 있음.

 

0. 사전 설정

(1) pubspec.yaml 설정

webview_flutter 의존성 추가

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  webview_flutter: 3.0.4

(2) 안드로이드 설정

android/app/src/main/AndroidManifest.xml

uses-permission, android:usesCleartextTraffic 추가

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.blog_web_app">
    <uses-permission android:name="android.permission.INTERNET"/>
   <application
        android:label="blog_web_app"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher"
        android:usesCleartextTraffic="true">
        
        .. 생략

build.gradle 설정

android/app/build.gradle 

compiledSdkVersion, minSdkVersion 수정

android {
    compileSdkVersion 32 //32로 수정
    
    ... 생략 ... 
    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId "com.example.blog_web_app"
        // You can update the following values to match your application needs.
        // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
        minSdkVersion 20 //20으로 변경
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }

(3) ios 설정

ios/Runner/Info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	... 생략 ... 
    <!-- 아래 내용 추가 >
	<key>NSAppTransportSecurity</key>
	<dict>
	    <key>NSAllowsLocaleNetworking</key>
	    <true/>
	    <key>NSAllowsArbitraryLoadsInWebContent</key>
	</dict>

</dict>
</plist>

 

1. 첫 화면 띄우기

class HomeScreen extends StatelessWidget {
  
  final url = 'https://yonglimlee.tistory.com';

  HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange,
        title: Text('yllee'),
        centerTitle: true, //가운데 정렬
      ),
      body: WebView(
        initialUrl: url,
        javascriptMode: JavascriptMode.unrestricted,
        
      ),
    );
  }
}

스크롤을 해보면 제대로 동작함을 확인할 수 있다. 

 

2. 웹뷰 컨트롤러 추가

플러터는 위젯을 프로그램적으로(코드로) 제어하는 기능을 제공. 이 기능은 컨트롤러가 담당하게 되는데 웹뷰의 경우에는 웹뷰 컨트롤러를 이용해 제어할 수 있다. 

class HomeScreen extends StatelessWidget {
  /*추가됨*/
  WebViewController? controller;
  final url = 'https://yonglimlee.tistory.com';

  HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange,
        title: Text('yllee'),
        centerTitle: true, //가운데 정렬
        /*추가됨*/
        actions: [
          IconButton(
              onPressed: (){ 
                if(controller != null){
                  controller!.loadUrl(url); //홈버튼을 누르면 초기 url로 이동
                }
              },
              icon: const Icon(Icons.home)
          ),
          IconButton(
              onPressed: (){
                if(controller != null){
                  controller!.goBack();
                }
              },
              icon: const Icon(Icons.arrow_back) //뒤로가기 버튼을 누르면 이전 페이지로 이동
          ),
          IconButton(
              onPressed: (){
                if(controller != null){
                  controller!.goForward();
                }
              },
              icon: const Icon(Icons.arrow_forward)//앞으로가기 버튼을 누르면 앞 페이지로 이동
          )
        ],
      ),
      body: WebView(
        initialUrl: url,
        javascriptMode: JavascriptMode.unrestricted,
        
        /*추가됨. 웹뷰 생성함수*/
        onWebViewCreated: (WebViewController controller){
          this.controller = controller; //변수에 저장하면 위젯 어디서든 사용가능함
        },
      ),
    );
  }
}