Flutter Web3 DApp浏览器插件web3_dapp_browser的使用

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

Flutter Web3 DApp浏览器插件web3_dapp_browser的使用

示例

web3_dapp_browser 支持DApp加载。

开始使用

在 pubspec.yaml 文件中添加依赖：

web3_dapp_browser: ^1.0.2

使用方法

引入方式

import 'package:web3_dapp_browser/web3_dapp_browser.dart';

web3_dapp_browser 具体实现

声明

// 控制器
late DappWebController _dappwebController;

// Dapp对象
DappModel dapp = DappModel("https://0xzx.com/wp-content/uploads/2021/05/20210530-19.jpg", "UniSwap");

实现

// UI加载
return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Expanded(
        child: DappWebPage(
          dappViewController: _dappwebController,
          onProgressChanged: (progress) {},
          onConsoleMessage: (log) {
            // 打印控制台消息
            // print(log);
          },
          onLoadStop: () {},
          address: "0xc9e90f8893*************",
          url: "https://uniswap.org",
          privateKey: "4fa2ce0741a6b031eb67abb885***********",
          nodeAddress: "https://rpc.ankr.com/bsc",
          dappModel: dapp,
          selectChainName: "BSC",
        ),
      ),
    ],
  ),
);

额外信息

实现效果

完整示例代码

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

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

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

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

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  late DappWebController _dappwebController;

  [@override](/user/override)
  void initState() {
    super.initState();
    _dappwebController = DappWebController();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    DappModel dapp = DappModel(
      "https://0xzx.com/wp-content/uploads/2021/05/20210530-19.jpg", 
      "UniSwap"
    );
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            child: DappWebPage(
              dappViewController: _dappwebController,
              onProgressChanged: (progress) {},
              onConsoleMessage: (log) {
                // 打印控制台消息
                // print(log);
              },
              onLoadStop: () {},
              address: "0x******************a1ac",
              url: "https://uniswap.org",
              privateKey: "4fa2ce0741a6b0**************************9bde3bc1841d39481",
              nodeAddress: "https://rpc.ankr.com/bsc",
              dappModel: dapp,
              selectChainName: "BSC",
            ),
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


当然，以下是一个关于如何在Flutter Web应用中集成并使用web3_dapp_browser插件的示例代码。这个插件允许你创建一个浏览器视图来与Web3 DApp（去中心化应用）进行交互。

首先，确保你已经在你的Flutter项目中添加了web3_dapp_browser依赖。在你的pubspec.yaml文件中添加以下依赖：

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

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

接下来，你可以在你的Flutter应用中创建一个简单的界面来展示和使用web3_dapp_browser。下面是一个完整的示例代码：

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

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

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

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

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

  @override
  void initState() {
    super.initState();
    // 初始化Web3DAppBrowserController
    _controller = Web3DAppBrowserController(
      // 在这里指定你要加载的DApp的URL
      initialUrl: 'https://your-dapp-url.com',
      // 其他配置，比如是否显示标题栏等
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Web3 DApp Browser'),
      ),
      body: Center(
        child: Web3DAppBrowser(
          controller: _controller,
          // 监听加载完成事件
          onLoadCompleted: (url) {
            print('DApp loaded at $url');
          },
          // 监听加载失败事件
          onLoadFailed: (url, errorCode, description) {
            print('Failed to load DApp at $url: $description ($errorCode)');
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 打开或关闭浏览器视图
          setState(() {
            // 这里可以根据需要实现打开或关闭的逻辑
            // 例如，如果_controller当前是显示状态，则隐藏；反之亦然
            // 注意：实际的显示/隐藏逻辑可能需要更多的状态管理
          });
        },
        tooltip: 'Toggle Browser',
        child: Icon(Icons.open_in_new),
      ),
    );
  }

  @override
  void dispose() {
    // 释放资源
    _controller.dispose();
    super.dispose();
  }
}

注意：

  1. 在上面的代码中，initialUrl应该替换为你要加载的实际DApp的URL。
  2. Web3DAppBrowser组件提供了onLoadCompleted和onLoadFailed回调，用于处理加载完成和加载失败的情况。
  3. 示例中的FloatingActionButton仅用于演示目的，实际应用中你可能需要根据具体需求来实现打开或关闭浏览器视图的逻辑。
  4. 确保你的DApp URL是HTTPS的，因为大多数现代浏览器出于安全考虑，不允许从HTTP页面加载Web3内容。

这个示例提供了一个基本的框架，你可以根据需要进行扩展和修改，以满足你的具体需求。

回到顶部