Flutter项目中添加Webview（二）将 WebView 小部件添加到 Flutter 应用

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第12天，点击查看活动详情

接下来，我们向应用添加一个Webview。Webview是托管的原生视图，你可以选择如何在应用中托管这些原生视图。

在Android上，您可以选择虚拟显示模式（目前为Android的默认设置）和混合集成模式。 但是iOS始终使用混合集成模式。

如需深入地了解虚拟显示模式与混合集成模式的差异，请参阅 Hosting native Android and iOS views in your Flutter app with Platform Views（使用平台视图在 Flutter 应用中托管原生 Android 和 iOS 视图）的文档

接下来我们把lib/main.dart代码替换成下面的代码：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart

void main() {
    runApp(
        const MaterialApp(
            home: WebViewApp(),
        ),
    );
}

class WebViewApp extends StatefulWidget {
    const WebviewApp({Key? key}) : super(key: key);
    
    @override
    State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: const Text('Flutter WebView'),
            ),
            body: const WebView(
                initialUrl: 'https://flutter.dev',
            ),
        );
    }
}

在 iOS 或 Android 上运行以上代码时，WebView 将在您的设备上以全宽浏览器窗口显示，这意味着浏览器将在设备上全屏显示，不会出现任何形式的边框或边距。

启用混合模式

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
    runApp(
        const MaterialApp(
            home: WebViewApp(),
        ),
    );
}

class WebViewApp extends StatefulWidget {
    const WebViewApp({Key? key}) : super(key: key);
    
    @override
    State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
    @override
    void initState() {
        if (Platform.isAndroid) {
            WebView.platform = SurfaceAndroidWebView();
        }
        super.initState();
    }
    
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: const Text('Flutter WebView'),
            ),
            body: const WebView(
                initialUrl: 'https://flutter.dev',
            ),
        );
    }
}