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만 테스트를 해 보았는데, 키보드 동작에 약간 문제가 있는 것 같다.