[Flutter] 플러터 웹뷰 앱 만들기 (package:webview_flutter)

플러터로 웹뷰 앱을 구현하는 방법! 노치와 상태바 부분 SafeArea로 처리해서 편안하게 볼 수 있도록 한다.

0. 프로젝트 생성은 생략

.. 

1. 웹뷰 플러그인(webview_flutter) 추가 - pubspec.yaml

아래와 같이 dependencies 추가하고 터미널에서 pub get으로 패키지 추가

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.11.0 # (최신 버전 확인)

 

2.  네이티브별 설정

2.1. Android

android/app/src/main/AndroidManifest.xml 에 인터넷 권한 추가

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <uses-permission android:name="android.permission.INTERNET"/>
    
    ...

 

2.2. iOS

ios/Runner/Info.plist 에 아래 내용 추가

iOS 앱은 기본적으로 보안상의 이유로, 앱에서 접속하는 모든 웹사이트가 HTTPS(암호화된 통신)를 사용하도록 강제한다.
이 정책을 App Transport Security(ATS)라고 하지만,
웹뷰(WebView)로 접속하려는 웹사이트가 HTTP(암호화되지 않은 통신)를 사용하거나,
특정한 이유로 모든 도메인에 대해 예외를 허용해야 할 때가 있다.

위와 같은 상황이 있을 수 있어 아래와 같이 설정해줘야 한다.

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

 

3. 웹뷰 코드

편의상 main에서 웹뷰를 구현한다.

다른 프로젝트에서는 웹뷰 스크린과 스플래쉬 화면을 따로 만들어서 했다.

그리고 아래 코드에서는 debug 리본도 없애고
SafeArea로 상태바와 노치에 화면이 겹쳐 불편한 현상도 없앴다.

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebView App',
      // debug 리본 없애기
      debugShowCheckedModeBanner: false,
      theme: ThemeData( 
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const WebViewExample(),
    );
  }
}

class WebViewExample extends StatefulWidget {
  const WebViewExample({super.key});

  @override
  State<WebViewExample> createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..loadRequest(Uri.parse('https://flutter.dev'));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        resizeToAvoidBottomInset: true,
        
      // SafeArea로 상태바 노치 가리지 않도록
      body: SafeArea(
        child: WebViewWidget(controller: _controller),
      ), 
      
    );
  }
}