Flutter WebView插件smaad_flutter_webview_android的使用

发布于 1周前 作者 caililin 来自 Flutter

flutter_inappwebview_android #

这是 smaad_flutter_webview 的 Android WebView 实现。

用法 #

此包是 官方推荐的， 这意味着你可以像使用普通插件一样使用 smaad_flutter_webview。 当你这样做时，此包将自动包含在你的应用中，因此你无需将其添加到你的 pubspec.yaml 文件中。

然而，如果你导入此包以直接使用其 API，则应像往常一样将其添加到你的 pubspec.yaml 文件中。

example/lib/main.dart


import 'package:flutter/material.dart';
import 'package:smaad_flutter_webview/smaad_flutter_webview.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: MyHomePage(),
);
}
}


class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}


class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘WebView 示例’),
),
body: Padding(
padding: EdgeInsets.all(10.0),
child: InAppWebView(
initialUrlRequest: Uri.parse(“https://www.example.com”),
onProgressChanged: (controller, progress) {
print(“加载进度: $progress”);
},
),
),
);
}
}

```

完整示例Demo

main.dart 文件内容：

import 'package:flutter/material.dart';
import 'package:smaad_flutter_webview/smaad_flutter_webview.dart'; // 导入 smaad_flutter_webview 包

void main() {
  runApp(MyApp()); // 运行 MyApp 应用
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebView 示例', // 设置应用标题
      theme: ThemeData(
        primarySwatch: Colors.blue, // 设置主题颜色
      ),
      home: MyHomePage(), // 设置主页为 MyHomePage
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() =&gt; _MyHomePageState(); // 创建状态类实例
}

class _MyHomePageState extends State&lt;MyHomePage&gt; {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView 示例'), // 设置应用栏标题
      ),
      body: Padding(
        padding: EdgeInsets.all(10.0), // 设置内边距
        child: InAppWebView( // 使用 InAppWebView 组件
          initialUrlRequest: Uri.parse("https://www.example.com"), // 初始 URL
          onProgressChanged: (controller, progress) { // 监听加载进度
            print("加载进度: $progress"); // 打印加载进度
          },
        ),
      ),
    );
  }
}

更多关于Flutter WebView插件smaad_flutter_webview_android的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter WebView插件smaad_flutter_webview_android的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是一个关于如何使用 smaad_flutter_webview_android 插件在 Flutter 应用中嵌入 WebView 的示例代码。这个插件允许你在 Flutter 应用中显示网页内容。

首先，确保你已经在 pubspec.yaml 文件中添加了 smaad_flutter_webview_android 依赖：

dependencies:
  flutter:
    sdk: flutter
  smaad_flutter_webview_android: ^最新版本号  # 请替换为实际最新版本号

然后，运行 flutter pub get 来获取依赖。

接下来，你可以创建一个 Flutter 应用并在其中使用 smaad_flutter_webview_android 插件。以下是一个简单的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter WebView Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WebViewPage(),
    );
  }
}

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  final SmaadWebViewController _controller = SmaadWebViewController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView Demo'),
      ),
      body: SmaadWebView(
        initialUrl: 'https://www.example.com', // 替换为你想要加载的URL
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (controller) {
          _controller.complete(controller);
        },
        onPageFinished: (url) {
          print("Page finished loading: $url");
        },
        gestureNavigationEnabled: true,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          // 示例：在WebView中执行JavaScript代码
          await _controller.future.then((controller) {
            controller.evaluateJavascript('alert("Hello from Flutter!");');
          });
        },
        tooltip: 'Execute JS',
        child: Icon(Icons.code),
      ),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
}

在这个示例中：

  1. 我们创建了一个简单的 Flutter 应用，其中包含一个 WebView 页面。
  2. SmaadWebView 组件用于显示网页内容。
  3. initialUrl 参数设置了 WebView 初始加载的 URL。
  4. javascriptMode 设置为 JavascriptMode.unrestricted 以允许执行 JavaScript。
  5. onWebViewCreated 回调用于获取 WebView 控制器，以便后续操作（如执行 JavaScript）。
  6. onPageFinished 回调在页面加载完成时触发，可以用于处理加载完成后的逻辑。
  7. 一个浮动操作按钮（FAB）用于在 WebView 中执行 JavaScript 代码作为示例。

请确保在实际使用中替换 https://www.example.com 为你想要加载的实际 URL，并根据需要调整其他参数和回调。

希望这个示例对你有帮助！如果你有其他问题，欢迎继续提问。

回到顶部