WebView 4.x

https://pub.dev/packages/webview_flutter

webview_flutter | Flutter Package

현재 날짜 기준 최신 버전은 4.0.4버전인데, 이 글은 4.0.2버전을 기준으로 작성했다.

 

# pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  #...
  webview_flutter: ^4.0.2
#...

webview_flutter: ^4.0.2 추가

 

# AppBar 구현하기

home_screen.dart

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

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: Text('ICT Story'), // title
        centerTitle: true, // title 위치
      ),
      //...
    );
  }
}

 

# WebView 4.x 버전 대응

main.dart

import 'package:flutter/material.dart';
import 'package:web_view_android/screen/home_screen.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MaterialApp(
    home: HomeScreen(),
  ));
}

WidgetsFlutterBinding.ensureInitalized(); 추가

이 함수는 Flutter 프레임워크가 앱을 실행할 준비가 될때까지 기다린다.

원래 이 함수는 runApp()을 main()함수에서 사용하면 자동으로 실행되는 함수이다.

WebView 4.x 버전에서는 WebView를 Stateless widget에 사용하기 위해 이 함수를 넣어줘야 한다.

 

home_screen.dart

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

final homeUrl = Uri.parse('https://knoow.tistory.com');

class HomeScreen extends StatelessWidget {
  WebViewController controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..loadRequest(homeUrl);

  HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: Text('ICT Story'),
        centerTitle: true,
        actions: [
          IconButton(
              onPressed: () {
                controller.loadRequest(homeUrl);
              },
              icon: Icon(
                Icons.home,
              ))
        ],
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

먼저, 홈페이지 주소를 Uri.parse() 함수를 사용해서 선언한다.

  👉 final homeUrl = Uri.parse('https://knoow.tistory.com');

그리고 WebViewController를 선언과 동시에 초기화한다.

  👉 WebViewController controller = WebViewController() ...

loadRequest() 함수를 사용해서 IconButton을 눌렀을 때, 홈페이지를 로드할 수 있도록 한다.

  👉 controller.loadRequest(homeUrl);

 마지막으로, WebViewWidget을 추가하면 된다.

  👉 body: WebViewWidget(...)

 

# Permission

Android 또는 iOS에서 WebView를 사용하기 위해서는 HTTP 프로토콜 사용을 위한 권한을 열어줘야한다.

iOS

ios > Runner > info.plist

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

Android

android > app > src > main > AndroidManifest.xml

INTERNET 권한과 usesCleartextTraffic 옵션을 추가해주면 된다.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.web_view_android">

    <uses-permission android:name="android.permission.INTERNET"/>

   <application
        android:label="web_view_android"
        android:name="${applicationName}"
        android:icon="@mipmap/ic_launcher"
        android:usesCleartextTraffic="true">