[Flutter] 웹뷰(WebView)

📝 개념 정리

WebViewWidget

• 웹 브라우저를 실행할 수 있는 위젯
• URL을 추가해줌으로써 원하는 웹사이트를 앱에서 실행 가능

WebViewController

• 웹뷰 위젯을 제어하는데 필요한 기능 제공

🔌 사전 준비

webview_flutter

pubspec.yaml 설정하기

pubspec.yaml 파일은 플러터 프로젝트와 관련된 설정을 하는 파일이다.

1. webview_flutter 플러그인을 pubspec.yaml 파일에 추가하고 [pub get]을 실행한다.

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  webview_flutter: ^4.7.0

💡 flutter pub get은 pubspec.yaml 파일에 등록한 플러그인들을 내려받는 명령어다.

권한 및 네이티브 설정하기

🤖 안드로이드

안드로이드 설정 파일은 android/app/src/main/AndroidManifest.xml 이다.

1. AndroidManifest.xml 파일에 웹뷰를 실행할 때 인터넷을 사용해야 하니 인터넷 권한을 추가한다.

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

2. android/app/build.gradel 파일을 열어서 다음과 같이 변경한다.

android {
	compileSdkVersion 33 ⬅️
    ----- 생략 -----
    defaultConfig {
        applicationId "com.example.blog_web_app"
        minSdkVersion 20 ⬅️
        targetSdkVersion flutter.targetSdkVersion
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
    }
    ----- 생략 -----
}

• minSdkVersion : 안드로이드 운영체제의 최소 SDK 버전을 설정할 수 있는 위치
• compileSdkVersion : 앱을 빌드할 때 사용할 SDK 버전

💡 android/app/build.gradel 파일은 의존성이나 버전 정보를 관리한다.

3. 안드로이드와 iOS에서는 모두 기본적으로 http 웹사이트를 사용할 수 없도록 설정되어 있다. 이 설정을 해제하려면 다음 코드를 추가하면 된다.

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

만약, http 프로토콜을 허용할 필요가 없다면 해당 코드를 추가할 필요가 없다.

🍎 iOS

1. ios/Runner/Info.plist 파일에 http 프로토콜을 사용하는 설정을 추가해준다.

<?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>NSAllowsLocalNetworking</key>
          </true>
          <key>NSAllowsArbitraryLoadsInWebContent</key>
          </true>
      </dict>
</dict>
</plist>

💡 ios/Runner/Info.plist 파일은 iOS 앱의 런타임을 설정하는 파일이다.

🖥️ 구현

AppBar

AppBar 위젯은 일반적으로 Scaffold 위젯의 appBar 매개변수로 넣어준다.

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  WebViewController controller = WebViewController();

  HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange,
        title: Text('jjinheeWorld'),
        centerTitle: true,
      ),
      body: Text('Home Screen'),
    );
  }
}

WebViewWidget

WebViewWidget은 화면에 웹뷰를 렌더링해주는 역할을 한다.

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

class HomeScreen extends StatelessWidget {
  WebViewController controller = WebViewController();

  HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange,
        title: Text('jjinheeWorld'),
        centerTitle: true,
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

WebViewController

WebViewController는 웹뷰 위젯을 제어하는 역할을 한다.

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

class HomeScreen extends StatelessWidget {
   WebViewController controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..loadRequest(Uri.parse('https://velog.io/@jjinnyit/posts'));

  HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange,
        title: Text('jjinheeWorld'),
        centerTitle: true,
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

• loadRequest() : Uri 객체를 매개변수로 입력받으며 이 입력받은 값을 통해 지정한 사이트로 이동

main.dart 파일 수정하기

StatelessWidget에서 WebViewController를 프로퍼티로 직접 인스턴스화하려면 WidgetsFlutterBinding.ensureInitialized() 함수를 직접 실행해주는 작업을 해야 한다.

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

void main() {
  // Flutter 프레임워크가 앱을 실행할 준비가 될 때까지 기다림
  WidgetsFlutterBinding.ensureInitialized();

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

홈 버튼 구현하기

어떤 페이지에서든 찌니월드의 벨로그 홈페이지로 돌아올 수 있는 홈 버튼을 만들어보자.

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

class HomeScreen extends StatelessWidget {
   WebViewController controller = WebViewController()
    ..setJavaScriptMode(JavaScriptMode.unrestricted)
    ..loadRequest(Uri.parse('https://velog.io/@jjinnyit/posts'));

  HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange,
        title: Text('jjinheeWorld'),
        centerTitle: true,
        actions: [
          IconButton(
            onPressed: () {
              controller.loadRequest(Uri.parse('https://velog.io/@jjinnyit/posts'));
            },
            icon: Icon(
              Icons.home
            ),
          ),
        ],
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}

👀 참고

이 글은 골든래빗 《코드팩토리의 플러터 프로그래밍》의 스터디 내용 입니다.