Web3 是下一代互联网的愿景,它基于区块链技术,旨在实现去中心化、用户拥有数据和价值。区块链技术本身是一个分布式账本,通过加密技术保证数据不可篡改和透明。Flutter 作为跨平台 UI 框架,在 Web3 和区块链领域扮演着越来越重要的角色,因为它能够构建美观、高性能的用户界面,与区块链网络进行交互。
1. Web3 和区块链核心概念
2. Flutter 与 Web3/区块链的交互方式
Flutter 应用与区块链的交互主要通过以下几种方式:
web3dart (用于 Ethereum)。3. web3dart 库
web3dart 是一个流行的 Dart 库,用于与 Ethereum 区块链进行交互。它提供了以下功能:
Flutter 在 Web3 领域的应用包括构建加密货币钱包、DApp 前端、NFT 市场、DeFi (去中心化金融) 应用等。以下案例将演示如何使用 web3dart 库与 Ethereum 区块链进行交互,读取账户余额。
案例:查询 Ethereum 账户余额
我们将构建一个简单的 Flutter 应用,用于查询指定 Ethereum 账户的 ETH 余额。
步骤 1: 创建项目并添加依赖
flutter create eth_balance_checker
cd eth_balance_checker
在 pubspec.yaml 中添加 web3dart 和 http 依赖:
dependencies:
flutter:
sdk: flutter
web3dart: ^2.6.0 # 最新版本可能不同
http: ^1.1.0 # 最新版本可能不同
运行 flutter pub get。
步骤 2: 构建 UI 和逻辑 (lib/main.dart)
import 'package:flutter/material.dart';
import 'package:http/http.dart';
import 'package:web3dart/web3dart.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ETH 余额查询',
theme: ThemeData(
primarySwatch: Colors.blueGrey,
),
home: const EthBalanceCheckerScreen(),
);
}
}
class EthBalanceCheckerScreen extends StatefulWidget {
const EthBalanceCheckerScreen({super.key});
@override
State<EthBalanceCheckerScreen> createState() => _EthBalanceCheckerScreenState();
}
class _EthBalanceCheckerScreenState extends State<EthBalanceCheckerScreen> {
final TextEditingController _addressController = TextEditingController();
String _balance = '0.0 ETH';
bool _isLoading = false;
String? _errorMessage;
// Infura 或 Alchemy 的 RPC URL。请替换为你的实际项目 ID。
// 建议使用环境变量或配置文件管理敏感信息。
final String _rpcUrl = 'YOUR_INFURA_OR_ALCHEMY_RPC_URL'; // 例如: https://mainnet.infura.io/v3/YOUR_PROJECT_ID
late Web3Client _web3client;
@override
void initState() {
super.initState();
_web3client = Web3Client(_rpcUrl, Client());
}
@override
void dispose() {
_web3client.dispose();
_addressController.dispose();
super.dispose();
}
Future<void> _checkBalance() async {
setState(() {
_isLoading = true;
_errorMessage = null;
});
try {
if (_rpcUrl == 'YOUR_INFURA_OR_ALCHEMY_RPC_URL') {
throw Exception('请在代码中配置您的 Infura 或 Alchemy RPC URL。');
}
final String addressText = _addressController.text.trim();
if (!EthereumAddress.isValid(addressText)) {
throw Exception('请输入有效的 Ethereum 地址。');
}
final EthereumAddress address = EthereumAddress.fromHex(addressText);
final EtherAmount balance = await _web3client.getBalance(address);
setState(() {
_balance = '${balance.getValueInUnit(EtherUnit.ether).toStringAsFixed(4)} ETH';
});
} catch (e) {
setState(() {
_errorMessage = '查询失败: ${e.toString()}';
});
} finally {
setState(() {
_isLoading = false;
});
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('ETH 余额查询'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
TextField(
controller: _addressController,
decoration: const InputDecoration(
labelText: 'Ethereum 地址',
hintText: '0x...', // 提示用户输入地址格式
border: OutlineInputBorder(),
),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: _isLoading ? null : _checkBalance,
child: _isLoading
? const CircularProgressIndicator(color: Colors.white)
: const Text('查询余额'),
),
const SizedBox(height: 24),
if (_errorMessage != null)
Text(
_errorMessage!,
style: const TextStyle(color: Colors.red, fontSize: 16),
textAlign: TextAlign.center,
),
const SizedBox(height: 16),
Text(
'余额: $_balance',
style: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
textAlign: TextAlign.center,
),
],
),
),
);
}
}
案例分析:
web3dart 和 http 依赖:web3dart 是与 Ethereum 交互的核心库,而 http 用于发送 HTTP 请求到 RPC 节点。Web3Client 初始化:_web3client = Web3Client(_rpcUrl, Client()); 创建了一个 Web3Client 实例,它需要一个 RPC URL 和一个 http.Client 实例来发送网络请求。_rpcUrl 必须替换为有效的 Ethereum 节点 RPC URL。你可以从 Infura (infura.io) 或 Alchemy (alchemy.com) 等服务提供商获取免费的开发用 RPC URL。切勿将你的私钥或敏感信息直接硬编码在代码中!EthereumAddress.isValid() 和 EthereumAddress.fromHex():web3dart 提供了工具类来验证和转换 Ethereum 地址。_web3client.getBalance(address):这是核心的区块链交互方法。它向连接的 Ethereum 节点发送请求,查询指定地址的 ETH 余额。返回的 EtherAmount 对象包含了余额信息。balance.getValueInUnit(EtherUnit.ether):EtherAmount 对象存储的是 Wei (以太坊的最小单位) 余额。getValueInUnit(EtherUnit.ether) 方法将其转换为更常用的 ETH 单位。_isLoading 状态和 _errorMessage,以提供更好的用户体验,显示加载指示器和错误信息。如何运行和测试:
_rpcUrl:将 lib/main.dart 中的 _rpcUrl 替换为你获取到的真实 RPC URL。flutter run。这个案例展示了 Flutter 应用如何与区块链网络进行基本的交互。这只是 Web3 世界的冰山一角,但它为构建更复杂的 DApp 奠定了基础。你可以进一步探索 web3dart 库的其他功能,例如发送交易、与智能合约交互等。