Flutter嵌入Web视图插件embed_webview的使用

embed_webview 是一个可以在Flutter小部件内显示网页内容的小部件。它能够自动调整大小以适应其子组件。

目前，该插件支持Android、iOS和Web平台。

开始使用

在你的项目中添加 embed_webview 依赖项：

dependencies:
  flutter:
    sdk: flutter

  embed_webview: latest_version

使用方法

你可以像使用其他Flutter小部件一样使用它：

const String SampleWebContent =
    """<p style="text-align: center;"><span style="color: rgb(41, 44, 50); font-size: 19px;">一个开源的嵌入式Webview库。</span></p><p style="text-align: center;"><span style="color: rgb(41, 44, 50); font-size: 19px;">由 JI,XIAOYONG 用心制作。</span></p><p><br></p>""";

// 在某个地方需要一个widget:
return EmbedWebView(SampleWebContent);

保存并运行项目，你将看到网页内容：

更多信息

有关更多信息，请查看 示例代码。

许可证

Copyright 2022-present jixiaoyong

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中嵌入一个Web视图：

import 'package:embed_webview/embed_webview.dart' show EmbedWebView;
import 'package:flutter/material.dart';

/*
 * [@Author](/user/Author): jixiaoyong
 * [@Date](/user/Date): 22/04/27
 * [@LastEditors](/user/LastEditors): jixiaoyong
 * [@LastEditTime](/user/LastEditTime): 22/04/27
 * [@FilePath](/user/FilePath): /embed_webview/example/lib/main.dart
 * [@Description](/user/Description): 
 * 
 * [@Email](/user/Email): jixiaoyong1995@gmail.com
 * Copyright (c) 2022 by jixiaoyong, All Rights Reserved. 
 */
void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Embed Webview Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Embed Webview'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: Column(
          children: [
            Container(
              color: Colors.orange.shade200,
              height: 100,
              child: const Center(
                child: Text(
                  "这是Web视图前的文字。",
                  style: TextStyle(
                    fontSize: 20,
                  ),
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(0.0),
              child: EmbedWebView(WebContent),
            ),
            Container(
              color: Colors.blue.shade200,
              height: 100,
              child: const Center(
                child: Text(
                  "这是Web视图后的文字。",
                  style: TextStyle(
                    fontSize: 20,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}