Flutter InAppWebView 项目教程

Flutter InAppWebView 项目教程

flutter_inappwebviewA Flutter plugin that allows you to add an inline webview, to use a headless webview, and to open an in-app browser window.项目地址:https://gitcode.com/gh_mirrors/fl/flutter_inappwebview

1. 项目的目录结构及介绍

Flutter InAppWebView 项目的目录结构如下：

flutter_inappwebview/
├── CHANGELOG.md
├── LICENSE
├── README.md
├── analysis_options.yaml
├── example/
│   ├── android/
│   ├── ios/
│   ├── lib/
│   │   ├── main.dart
│   │   └── ...
│   ├── pubspec.yaml
│   └── ...
├── lib/
│   ├── src/
│   │   ├── chrome_safari_browser.dart
│   │   ├── in_app_browser.dart
│   │   ├── in_app_webview.dart
│   │   └── ...
│   └── flutter_inappwebview.dart
├── pubspec.yaml
└── ...

主要目录和文件介绍：

• example/: 包含一个示例应用程序，展示了如何使用 InAppWebView 插件。
• lib/: 包含插件的核心代码。
  • src/: 包含插件的主要功能实现。
    • chrome_safari_browser.dart: 实现 Chrome Safari 浏览器功能。
    • in_app_browser.dart: 实现 In-App 浏览器功能。
    • in_app_webview.dart: 实现 In-App WebView 功能。
  • flutter_inappwebview.dart: 插件的主入口文件。
• pubspec.yaml: 项目的依赖管理文件。

2. 项目的启动文件介绍

项目的启动文件位于 example/lib/main.dart。这个文件是示例应用程序的入口点，展示了如何初始化和使用 InAppWebView 插件。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('InAppWebView Example'),
        ),
        body: Center(
          child: InAppWebView(
            initialUrl: "https://flutter.dev",
          ),
        ),
      ),
    );
  }
}

主要功能：

• main(): 应用程序的入口函数，调用 runApp 启动应用。
• MyApp: 应用的主组件，继承自 StatefulWidget。
• _MyAppState: 应用的状态类，包含 InAppWebView 的初始化和显示。

3. 项目的配置文件介绍

项目的配置文件主要是 pubspec.yaml，位于项目根目录和 example/ 目录下。

根目录下的 pubspec.yaml：

name: flutter_inappwebview
description: A Flutter plugin that allows you to add an inline webview, to use an headless webview, and to open an in-app browser window.
version: 5.3.2
homepage: https://github.com/pichillilorenzo/flutter_inappwebview

environment:
  sdk: ">=2.12.0 <3.0.0"
  flutter: ">=1.20.0"

dependencies:
  flutter:
    sdk: flutter
  flutter_web_plugins:
    sdk: flutter
  plugin_platform_interface: ^2.0.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^1.0.0

flutter:
  plugin:
    platforms:
      android:
        package: com.pichillilorenzo.flutter_inappwebview
        pluginClass: InAppWebViewFlutterPlugin
      ios:
        pluginClass: InAppWebViewFlutterPlugin
      macos:
        pluginClass: InAppWebViewFlutterPlugin
      web:
        pluginClass: InAppWebViewFlutterPlugin
       

flutter_inappwebviewA Flutter plugin that allows you to add an inline webview, to use a headless webview, and to open an in-app browser window.项目地址:https://gitcode.com/gh_mirrors/fl/flutter_inappwebview