[Flutter] webview_flutter: 3.0.2

현재(2023.03.28 기준) 가장 최신 버전은 4.0.7이다.

WebViewWidget으로 사용하며 아래 코드와는 차이가 존재합니다. 맥락을 파악하기 위한 용도를 포스팅 한다.

 

https://pub.dev/packages/webview_flutter

webview_flutter | Flutter Package

 

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Flutter Demo",
      theme: ThemeData(
        primarySwatch: Colors.orange
      ),
      home: const HomeScreen(title: "Code Factory"),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key, required this.title});

  final String title;

  final String initialUrl = 'https://yeongwoo-cho.tistory.com';

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {

  WebViewController? controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: true,
        actions: [
          IconButton(onPressed: (){
            controller?.loadUrl('https://high-tension-upgrade.tistory.com');
          }, icon: const Icon(Icons.home))
        ],
        foregroundColor: Colors.white,
      ),
      body: WebView(
        initialUrl: widget.initialUrl,
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController controller) {
          this.controller = controller;
        },
        onWebResourceError: (WebResourceError error) {
          debugPrint('code: ${error.errorCode}, message: ${error.description}');
        },
      )
    );
  }
}

 

배운 점

1. 플러그인의 경우 위젯을 제어할 controller(제어자)를 제공합니다.

  - WebView의 경우 WebViewController 를 제공합니다.

 

2. WebView의 경우 StatefulWidget으로 생성 시 한번만 호출되는 initState()가 존재합니다.

  - onWebViewController가 그것이며 WebView가 빌드타임에 처음 생성될 때만 실행된다. 즉, Hot reload를 통해 코드 변경이 적용되지 않는다. 

 

3. WebViewController? controller의 경우 mutable 하기에 final 로 선언되지 못했습니다. 그래서 const constructor로 지정할 수 없고 const instance를 생성할 수 없습니다.

  - const instance widget은 한번 생성하면 같은 값의 인스턴스의 경우 재활용 됩니다. 그러면 메모리를 두번 잡아 먹지 않고 생성과 관리를 위한 하드웨어 리소스를 적게 사용할 수 있는 장점이 있습니다.