[flutter] 플러터에서 webview 연결하기

- 웹뷰란 네이티브 앱 안에서 웹브라우저를 띄우는 것을 말한다. (네이티브 앱에서)웹 view 하기 정도로 이해해도 괜찮을 것 같다. 

 

1. 플러터 패키지 설치(webview_flutter)

 

 - 터미널에서 아래의 코드를 입력하여 추가하거나 

flutter pub add webview_flutter

- pubspec.yaml 파일 내의 dependencies 목록에 다음과 같이 추가한한 후 pub get 버튼을 눌러준다.

dependencies:
	webview_flutter: ^4.4.1

 

설치에 관한 내용은 아래의 링크에서 자세히 볼 수 있음

https://pub.dev/packages/webview_flutter/install

webview_flutter | Flutter Package

 

2. main.dart 페이지에 적용하기 

- 페이지 상단에 패키지 import 하기

import 'package:webview_flutter/webview_flutter.dart';

- 하단 코드에 수정/추가하기

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

void main() {
  runApp(
    const MaterialApp(
      home: WebViewApp(),
    ),
  );
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp();
  }
}

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

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  late final WebViewController controller;
  Uri uri = Uri.parse('https://www.naver.com');

  @override
  void initState() {
    super.initState();
    controller = WebViewController()
      ..loadRequest(
        uri,
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}