Flutter: review package “flutter_webview_plugin” and "webview_flutter"
สำหรับ package ตัวนี้จะช่วยให้แสดงผล website in app ได้เลยที่สำคัญสามารถ
Zoom + Scroll up-down ได้เลย (ถ้า content มีมากกว่าหน้าจอ สามารถไถขึ้นลงและซูมได้ ถือว่าครบเลยทีเดียว)
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';class TransformText extends StatefulWidget {
TransformText({Key key}) : super(key: key); // changed @override
_TransformTextState createState() => _TransformTextState();
}class _TransformTextState extends State<TransformText> { @override
Widget build(BuildContext context) { return Web viewScaffold(
url: "https://flutter.dev/docs/cookbook/navigation",
appBar: new AppBar(
title: const Text('Widget webview'),
),
withZoom: true,
withLocalStorage: true,
hidden: true,
initialChild: Container(
color: Colors.redAccent,
child: const Center(
child: Text('Waiting.....'),
),
),
);
}
}
แต่…ถ้าเราไม่ต้องการให้ render จาก url เราสามารถ inject html เข้าไปตรงๆได้ตาม format แบบนี้เลยนะคับ
url: Uri.dataFromString('<html><body>hello world</body></html>',mimeType: 'text/html',encoding: Encoding.getByName('utf-8')).toString(),ซึ่งจากวิธีการ inject html เข้าไปแบบด้านบน จะทำให้ webview สามารถแสดง hello world ได้เลยและก้อ zoom ได้ตามปกติเลยนะ
เมื่อเปรียบเทียบกับ webview_flutter: ^1.0.7 จะพบว่าตัวนี้จะไม่สามารถ zoom ได้ ต้องใช้ package ตัวอื่นมาช่วย ลักษณะนี้นะคับ แต่เมื่อ zoomได้ก้อจะมีปัญหา scroll up-down ไม่ได้แทน เวียนหัวซะเปล่าๆ
ps: ถ้าจะให้ WebView() รับ raw html เข้ามาตรงๆเพื่อ display เลยก้อได้นะคับ โดยทำลักษณะนี้
Ref:
https://medium.com/codechai/webview-in-flutter-7ecb0482e81a
https://pub.dev/packages/flutter_webview_plugin
