flutter 간단한 WebView app 만들기 (web_view_screen 구현편)

해당 포스트는 전편이 있습니다.

flutter webView app 만들기  url_list_screen 구현 편

flutter 간단한 WebView app 만들기 (url_list_screen 구현편)

 

flutter webView app 만들기 web_view_screen 구현 편

 

구현 하기

 

1. pubspec.yaml 패키지 추가

webview_flutter

  webview_flutter: ^4.2.4

 

2. web_view_screen.dart  StatefullWidget으로생성

class WebViewScreen extends StatefulWidget {
  final String url; // page 이동하면서 받을 변수
  const WebViewScreen({super.key, required this.url});
  @override
  State<WebViewScreen> createState() => _WebViewScreen();
}

class _WebViewScreen extends State<WebViewScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

 

3. WebViewWidget 구현

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

class WebViewScreen extends StatefulWidget {
  final String url;
  const WebViewScreen({super.key, required this.url});
  @override
  State<WebViewScreen> createState() => _WebViewScreen();
}

class _WebViewScreen extends State<WebViewScreen> {
  late final WebViewController controller = WebViewController() // controller 생성
    ..setJavaScriptMode(JavaScriptMode.unrestricted) // 자바스크립트 동작 허용
    ..loadRequest(Uri.parse(widget.url));
    
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea( // 카메라가 화면을 가리지 않게
        child: WebViewWidget( // webview widget
          controller: controller,
        ),
      ),
    );
  }
}

 

이렇게하면 기본적인 webView를 띄울 수 있습니다..

에러처러, 자바스크립트와의 통신 등등 다양한 옵션들은 아래에서 확인 할 수 있습니다.

 https://pub.dev/documentation/webview_flutter/latest/webview_flutter/webview_flutter-library.html 

 

SafeArea는 디바이스의 카메라 렌즈 혹은 상단 표시줄이 view를 가리지 않게 간격을 넓혀줍니다.

SafeArea class - widgets library - Dart API

 

사용 안했을때 (카메라에 검색창이 가려진다)

사용 했을때 (카메라에 가리지 않는다)

 

계단식 표기법(cascade notation) . .연산자

계단식 표기법을 사용하면 동일한 객체에서 일련의 작업을 수행할 수 있습니다.

 

예를 들어 아래처럼 배열에 더하는 동작 후에 제거하는 동작을 하려면 메서드를 2번 호출 해야합니다.

void main() {
  final items = [1, 2, 3, 4, 5];

  var result = items;
  result.add(6); // void 반환
  result.remove(2); // bool 반환
  print(result);
}

이를 .. 연산자로 이렇게 표현할 수 있습니다,

void main() {
  final items = [1, 2, 3, 4, 5];

  print(items..add(6)..remove(2));
}

 

기타 마주칠 수 있는 에러 

an

android에서는 url을 https로 했는데도 불구하고 위와 같은 에러를 겪을수도있습니다.

 

에러 재현사항 방법으로는 아래와 같습니다.

주소를 'https://naver.com'으로 혹은 'https://www,naver.com'로 접근하면 위와 같은 에러가 나옴.

해당 에러는 naver의 web server에서 mobile인데 naver.com으로 접근하면 m.naver.com으로 리다이렉트를 시도하는데 

이때 https가 아닌 http로 리다이렉트가 일어나서 발생하는 에러로 추측됩니다.

(다른 방법일 수도 있습니다. proxy server에서 리다이렉트 핸들링을 해보면서 이게 아닐까? 라는 개인적인 추측입니다.)

 

 

 

 

해당코드 구현은 https://github.com/kimjuno97/hybrid_app 에서 확인할 수 있습니다.