Flutter: Cách sử dụng Plugin WebView
Dễ dàng hiển thị các trang web bên trong ứng dụng Flutter của bạn với việc sử dụng plugin WebView . Trong ứng dụng mẫu của ta , ta sẽ xem xét cách tạo một Widget tùy chỉnh được dùng trong toàn bộ ứng dụng của ta để chạy WebView từ mọi nơi.
Tạo một dự án Flutter mới
Như mọi khi, ta sẽ bắt đầu bằng cách cài đặt một dự án mới và thêm plugin:
# New Flutter project $ flutter create my_webview_project # Open this up inside of VS Code $ cd my_webview_project && code . Thêm plugin WebView
Tiếp theo, ta cần thêm plugin webview_flutter trong pubspec.yaml của ta :
dependencies: flutter: sdk: flutter webview_flutter: ^0.3.14+1 Sau đó, ta cần thêm các giá trị thích hợp vào Info.plist , chọn tham gia bản xem trước các chế độ xem được nhúng:
<key>io.flutter.embedded_views_preview</key> <true/> Đó là tất cả sự chuẩn bị plugin cần thiết, bây giờ ta có thể mở ứng dụng của bạn trong trình mô phỏng iOS hoặc Android.
Giàn giáo Dự án của ta
Bây giờ ta có thể cập nhật main.dart để chứa tiện ích HomePage của ta mà ta sẽ tạo sau một giây:
import 'package:flutter/material.dart'; import 'package:my_webview_project/home_page.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter WebView', theme: ThemeData( primarySwatch: Colors.blue, ), home: HomePage()); } } Tiện ích con HomePage sẽ chỉ bao gồm một FlatButton với một sự kiện onPressed :
import 'package:flutter/material.dart'; class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Home Page"), ), body: Center( child: FlatButton( child: Text("Open Webpage"), onPressed: () {}, ), ), ); } } Sử dụng Plugin WebView
Hãy tạo một StatelessWidget có tên MyWebView mà ta có thể sử dụng để chuyển user đến trang này khi nào ta muốn hiển thị dữ liệu WebView :
import 'dart:async'; import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; class MyWebView extends StatelessWidget { final String title; final String selectedUrl; final Completer<WebViewController> _controller = Completer<WebViewController>(); MyWebView({ @required this.title, @required this.selectedUrl, }); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(title), ), body: WebView( initialUrl: selectedUrl, javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (WebViewController webViewController) { _controller.complete(webViewController); }, )); } } Nếu ta muốn chuyển user đến https://alligator.io , do đó ta có thể sử dụng Navigator.push với Navigator.push selectedUrl bằng https://alligator.io . Hãy cập nhật FlatButton của ta trong HomePage :
child: FlatButton( child: Text("Open Webpage"), onPressed: () { Navigator.of(context).push(MaterialPageRoute( builder: (BuildContext context) => MyWebView( title: "Alligator.io", selectedUrl: "https://alligator.io", ))); }, ), Và ta đã có nó! Đây là WebView của ta hiển thị trang chủ Alligator:
Các tin liên quan
