Flutter Web3与WebView集成插件flutter_web3_webview的使用

Flutter Web3与WebView集成插件flutter_web3_webview的使用

flutter_web3_webview

支持钱包连接到Web3 DApp的WebView。目前支持EVM链和Solana。

Getting Started

Import
dependencies
  ...
  flutter_web3_webview: ^1.0.0
  ...
Use
/// 在使用前初始化JS资源。
await Web3Webview.initJs();

/// 使用
Web3Webview();

示例代码

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Web3Webview.initJs();

  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // 这个 widget 是你应用的根。
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true
      ),
      home: const Page()
    );
  }
}

class Page extends StatefulWidget {
  const Page({super.key});

  [@override](/user/override)
  PageState createState() => PageState();
}

class PageState extends State<Page> {
  String _title = '';
  int _chainId = 1;

  String ethAddress = '0x0731fE5077B6aD308Cf9eeE3FC4b6D1410702Bb';
  String ethPrivateKey = '0x56d2380a81a9cdec89159b912cd19f681f51381aab2fd323a87085ab7aa884cc';

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(_title)),
      body: Web3Webview(
        initialUrlRequest: URLRequest(url: WebUri('https://app.uniswap.org')),
        settings: Web3Settings(
          eth: Web3EthSettings(
            chainId: _chainId,
            rdns: 'com.fxfi.fxwallet'
          )
        ),
        shouldOverrideUrlLoading: (p0, action) async =&gt; NavigationActionPolicy.ALLOW,
        onTitleChanged: _onTitleChanged,
        ethAccounts: _ethAccounts,
        ethChainId: _ethChainId,
        walletSwitchEthereumChain: _walletSwitchEthereumChain
      )
    );
  }

  void _onTitleChanged(InAppWebViewController c, String? value) {
    if (value == null || value == _title) return;

    _title = value;
    setState(() { });
  }

  Future&lt;int&gt; _ethChainId() async {
    return _chainId;
  }

  Future&lt;List&lt;String&gt;&gt; _ethAccounts() async {
    return [ethAddress];
  }

  Future&lt;bool&gt; _walletSwitchEthereumChain(JsAddEthereumChain data) async {
    _chainId = int.parse((data.chainId)?.replaceFirst('0x', '') ?? '1', radix: 16);
    return true;
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中集成和使用flutter_web3_webview插件的一个基本示例代码案例。这个插件允许你通过WebView与Web3（如以太坊区块链）进行交互。

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

dependencies:
  flutter:
    sdk: flutter
  flutter_web3_webview: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来，你需要配置Android和iOS的WebView权限（这通常包括允许文件访问和网络访问）。然而，由于flutter_web3_webview是一个特定的插件，可能已经有内置的处理，但根据具体需求，你可能需要查看插件的文档进行额外的配置。

以下是一个基本的Flutter应用示例，展示如何使用flutter_web3_webview来加载一个Web3兼容的网页（例如，一个DApp）：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  late Web3WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Web3 WebView Demo'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Web3WebView(
              initialUrl: 'https://your-dapp-url.com', // 替换为你的DApp URL
              javascriptMode: JavascriptMode.unrestricted,
              onWebViewCreated: (Web3WebViewController webViewController) {
                _controller = webViewController;
                // 可以在这里初始化Web3连接等
              },
            ),
          ),
          ElevatedButton(
            onPressed: () {
              // 示例：执行JavaScript代码
              _controller.evaluateJavascript('window.alert("Hello from Flutter!")');
            },
            child: Text('Execute JS'),
          ),
        ],
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，包含一个WebView组件和一个按钮。WebView组件加载了一个DApp的URL（你需要替换为实际的DApp URL）。按钮用于执行一些JavaScript代码（在这个例子中，只是弹出一个警告框）。

关于与Web3交互，flutter_web3_webview插件可能会提供一些特定的API或方法来与Web3进行通信。通常，这涉及到注入一个Web3提供者到DApp中，或者通过JavaScript接口与DApp进行交互。由于这个插件的具体API可能会随版本而变化，建议查阅最新的插件文档来获取详细的Web3集成方法。

请注意，实际开发中，你可能需要处理更多的细节，比如处理Web3账户连接、交易签名、错误处理等。这些细节通常会在插件的文档或示例代码中找到。

回到顶部