[Flutter] WebView 사용하기

Flutter에서 웹뷰를 띄워보겠습니다.

 

1. 라이브러리 설정

---

[pubspec.yaml]에 해당 라이브러리를 추가해줍니다.

dependencies:
  flutter:
    webview_flutter: ^3.0.4 // 최신버전으로 적어주세요

최신버전 확인 : https://pub.dev/packages/webview_flutter/install

아니면 터미널에 다음 명령어를 입력하셔도 됩니다. (자동으로 최신버전 다운로드)

flutter pub add webview_flutter

 

2. 웹 뷰 컴포넌트 생성

---

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

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: MediaQuery.of(context).size.height - 200,
      child: const WebView(
        initialUrl:
            'https://google.com',
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}

간단히 WevView 컴포넌트를 사용해주면 됩니다.

width와 height를 적당히 설정해주지 않으면 에러가 나므로 주의해주세요!

화면에 꽉 차는 자연스러운 웹뷰를 원하신다면 SafeArea 위젯을 사용하시는걸 추천드립니다.

 

참고로, url를 잘 입력했는데 웹뷰가 뜨지 않는다면

javascriptMode: JavascriptMode.unrestricted,

이 속성을 설정했는지 확인해주세요!

자바스크립트 사용을 허용하는 코드인데, 몇몇 페이지에서 이 설정 없이는 웹뷰가 뜨지 않습니다!

 

감사합니다.