Seize the day

POST : Flutter study

Flutter in-app Web browser 구현

Webview를 붙이려면 Flutter plugin을 이용해야한다. https://pub.dev/packages?q=webview_flutter 여기서 webview_flutter를 선택했다. Flutter 개발자들이 플러그인도 함께 개발하고 있는 듯 보인다.  https://pub.dev/packages/webview_flutter 

전체 소스 코드이다. 

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

class WebBrowserPage extends StatefulWidget {
  final String url;

  WebBrowserPage(this.url);

  @override
  _WebBrowserPageState createState() => _WebBrowserPageState();
}

class _WebBrowserPageState extends State<WebBrowserPage> {
  WebViewController _webViewController;
  String _url;
  String _title;

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      child: Scaffold(
        appBar: AppBar(
            leading: new IconButton(
              icon: new Icon(Icons.close),
              onPressed: () => Navigator.of(context).pop(),
            ),
            title: Text(_title ?? "WebBrowser")),
        body: WebView(
          initialUrl: widget.url,
          onWebViewCreated: (WebViewController webViewController) {
            _webViewController = webViewController;
          },
          javascriptMode: JavascriptMode.unrestricted,
          onPageFinished: (url) {
            _url = url;
            setState(() {
              _title = url;
            });
//            _webViewController.getTitle().then((title) {
//              setState(() {
//                _title = title;
//              });
//            });
          },
        ),
      ),
      onWillPop: () {
        var future = _webViewController.canGoBack();
        future.then((canGoBack) {
          if (canGoBack) {
            _webViewController.goBack();
          } else {
            Navigator.pop(context);
          }
        });
        return Future.value(false);
      },
    );
  }
}

- Back key를 누르면 web browser가 뒤로 갈 수 있으면 goBack()을 호출하고, 아니면 페이지를 닫도록 했다. 이를 위해서 WillPopScope를 이용했다. 다만 iOS에서는 백키가 없으므로 웹브라우저 뒤로가기 버튼을 만들어야 한다. 이건 나중에..

- 기본적으로 앱바 왼쪽 상단 아이콘은 뒤로가기 화살표인데 이것을 X 아이콘으로 변경했다. 뒤로가기 화살표는 브라우저의 뒤로가기와 혼동되고, 브라우저의 상태와 관련없이 바로 페이지를 닫는 기능이 필요하기 때문이다.

- webview_flutter는 한 참 개발중인다가 보다. page title을 얻어오는 기본적인 기능조차 아직 미구현상태이다. 

- Android만 테스트를 해 보았는데, 키보드 동작에 약간 문제가 있는 것 같다. 

top

posted at

2019. 8. 23. 22:33


CONTENTS

Seize the day
BLOG main image
김대정의 앱 개발 노트와 사는 이야기
RSS 2.0Tattertools
공지
아카이브
최근 글 최근 댓글
카테고리 태그 구름사이트 링크