Bạn đã từng muốn hiển thị một webpage trong ứng dụng, mà không phải mở browser trên điện thoại của mình. Luồng ứng dụng sẽ xuyên suốt trong ứng dụng của bạn.

Để giải quyết vấn đề này tôi giới thiệu với các bạn một plugin của Flutter. Đó chính là webview_flutter

Đây là Plugin được xây dựng dựa trên 2 Webview kit của Android và iOS. Bạn có thể tham khảo thêm ở link bên dưới

iOS:

[WKWebView](https://developer.apple.com/documentation/webkit/wkwebview).

Android:

[WebView](https://developer.android.com/reference/android/webkit/WebView).

Cách Cài Đặt:

Đầu tiên bạn cần phải thêm WebView package vào trong pubspec của bạn

webview_flutter: ^0.3.0

Một điều chú ý khi bạn xử dụng Webview đối với iOS là bạn cần phải thêm key io.flutter.embedded_views_preview vào với value là YES vào trong Info.plist thì Webview mới có thể hoạt động được. Bởi vì Plugin này hiện tại vẫn đang là bản Developer Preview

Bạn thêm Webview vào project bằng cách khai báo

import 'package:webview_flutter/webview_flutter.dart';

Sau đó trong project của bạn cần phải khởi tạo một URL parameter cho trang mà bạn muốn hiển thị. Tuỳ chọn enable hoặc disable JavaScript mode trong WebView,với JavascriptMode parameter. Mặc định nó sẽ bị disable

WebView(
  initialUrl:'https://flutter.dev',
  javascriptMode: JavascriptMode.unrestricted
)

Bạn có thể kiểm soát điều khiển Webview bằng WebViewController object. Khi Webview chạy xong nó sẽ trả về một Controller thông qua callback. Controller này cho phép bạn điều khiển Webview theo ý muốn, cũng như truy suất các thuộc tính của nó như lấy về link url đang hiển thị,lấy user agent, cookies,cache ..

Ngoài ra bạn có thể gửi lệnh javascript tới Webview thông qua JavascriptChannel 

Kết Bài:

Như vậy tôi đã giới thiệu với các bạn một Plugin hỗ trợ hiển thị web trong Flutter. Tôi có viết một project minh hoạ các chức năng hỗ trợ hiện tại của Webview, các bạn có thể download ở link bên dưới.

Bạn chú ý rằng Webview này cũng chỉ là một Widget của Flutter nên nó có thể đáp ứng các chức năng tương tự như các widget khác. Bạn hoàn toàn có thể đặt một widget khác nên trên như button favorite trong hình, đặt webview vào trong các widget khác như PageView control

 

 

Source Demo

https://github.com/vizioners/flutter-webview

Trong bài tiếp theo tôi có viết một ứng dụng nhỏ cho việc sử dụng Webview.

LEAVE A REPLY

Please enter your comment!
Please enter your name here