Displaying webpages inside of your Flutter applications is easy with the use of the WebView
plugin. In our example application, we’ll look at how to create a custom Widget
that can be used throughout our application to launch a WebView
from anywhere.
显示网页的颤振应用中很容易与使用的WebView
插件。 在示例应用程序中,我们将研究如何创建可在整个应用程序中使用的自定义Widget
,以便从任何地方启动WebView
。
创建一个新的Flutter项目 (Creating a new Flutter Project)
As always, we’ll start off by setting up a new project and adding the plugin:
与往常一样,我们将从建立一个新项目并添加插件开始:
# New Flutter project
$ flutter create my_webview_project
# Open this up inside of VS Code
$ cd my_webview_project && code .
添加WebView插件 (Adding the WebView plugin)
Next up, we’ll need to add the webview_flutter
plugin within our pubspec.yaml
:
接下来,我们需要添加webview_flutter
我们中的插件pubspec.yaml
:
dependencies:
flutter:
sdk: flutter
webview_flutter: ^0.3.14+1
We’ll then need to add the appropriate values to our Info.plist
, opting into the embedded views preview:
然后,我们需要将适当的值添加到Info.plist
,以选择嵌入的视图预览:
<key>io.flutter.embedded_views_preview</key>
<true/>
That’s all the required plugin preparation, we can now open our application up in the iOS or Android simulator.
这就是所有必要的插件准备工作,我们现在可以在iOS或Android模拟器中打开应用程序。
脚手架我们的项目 (Scaffolding our Project)
We can now update main.dart
to contain our HomePage
widget that we’ll create in a second:
现在,我们可以更新main.dart
包含我们的HomePage
小工具,我们将在第二个创建:
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());
}
}
The HomePage
widget will simply consist of a FlatButton
with an onPressed
event:
该HomePage
部件将仅包括一个的FlatButton
与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: () {},
),
),
);
}
}
使用WebView插件 (Using the WebView Plugin)
Let’s create a StatelessWidget
named MyWebView
which we can use to navigate a user to this page whenever we want to display WebView
data:
让我们创建一个StatelessWidget
名为MyWebView
我们可以用它来用户导航到该页面时,我们要显示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);
},
));
}
}
If we wanted to navigate the user to https://alligator.io
, we could therefore use Navigator.push
with the selectedUrl
equal to https://alligator.io
. Let’s update our FlatButton
within the HomePage
:
如果我们想将用户导航到https://alligator.io
,则可以使用Navigator.push
,并且selectedUrl
等于https://alligator.io
。 让我们在HomePage
更新FlatButton
:
child: FlatButton(
child: Text("Open Webpage"),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (BuildContext context) => MyWebView(
title: "Alligator.io",
selectedUrl: "https://alligator.io",
)));
},
),
And there we have it! Here’s our WebView
showing the Alligator homepage:
我们终于得到它了! 这是我们的WebView
显示了鳄鱼主页:
翻译自: https://www.digitalocean.com/community/tutorials/flutter-webview