Flutter 完整入门指南

本文档详细介绍 Flutter 是什么、能做什么、如何实现、基本语法，以及 Flutter 在区块链中的应用，帮助小白快速入门并直接上手。

---

目录

1. Flutter 是什么？
2. Flutter 能干什么？
3. Flutter 如何实现？
4. Flutter 基本语法
5. 实战案例：开发一个简单的钱包应用
6. Flutter 在区块链中的应用
7. 快速上手教程
8. 学习资源

---

Flutter 是什么？

简单理解

Flutter 是 Google 开发的跨平台移动应用开发框架，可以理解为：

• 🎯 一套代码，多端运行：写一次代码，可以同时运行在 iOS 和 Android 上
• 🚀 性能接近原生：运行速度快，体验流畅
• 🎨 UI 美观：可以创建漂亮的用户界面
• 💻 使用 Dart 语言：Google 开发的编程语言

通俗比喻：

• 就像万能翻译器：你写一份"说明书"（代码），可以同时让 iOS 和 Android 两个"国家"的人（系统）都能看懂
• 或者像乐高积木：用相同的积木（组件）可以搭建出不同的房子（应用）

技术特点

特点	说明	优势
跨平台	一套代码，iOS 和 Android 都能用	节省开发时间，降低成本
高性能	直接编译为原生代码	运行速度快，体验流畅
热重载	修改代码立即看到效果	开发效率高
丰富的组件	内置大量 UI 组件	快速构建界面
开源免费	完全开源，免费使用	无成本，社区活跃

Flutter vs 其他技术

技术	特点	适用场景
原生开发	iOS 用 Swift，Android 用 Kotlin	需要极致性能
React Native	使用 JavaScript	Web 开发者友好
Flutter	使用 Dart，性能好	跨平台，性能要求高
Web 应用	使用 HTML/CSS/JS	简单应用，不需要安装

---

Flutter 能干什么？

主要用途

1. 移动应用开发

   • iOS 应用
   • Android 应用
   • 一套代码，两个平台

2. Web 应用开发

   • 浏览器中运行
   • 响应式设计

3. 桌面应用开发

   • Windows 应用
   • macOS 应用
   • Linux 应用

4. 嵌入式开发

   • IoT 设备
   • 智能设备

实际应用案例

知名应用：

• Google Pay：Google 的支付应用
• 阿里巴巴：淘宝、闲鱼等
• 腾讯：微信小程序部分功能
• 字节跳动：今日头条、抖音等
• 币安：币安 APP（区块链钱包）

区块链应用：

• 加密货币钱包（币安、OKX、Bybit 等）
• DeFi 应用
• NFT 市场
• 区块链浏览器

---

Flutter 如何实现？

架构原理

Flutter 应用
    ↓
Dart 代码
    ↓
Flutter 框架
    ├── Widget 树（UI 组件）
    ├── 渲染引擎（Skia）
    └── 平台通道（Platform Channels）
    ↓
原生平台
    ├── iOS
    └── Android

简单理解：

1. 你写 Dart 代码
2. Flutter 编译成原生代码
3. 在 iOS/Android 上运行
4. 使用 Skia 引擎直接绘制 UI（不依赖系统 UI）

核心概念

1. Widget（组件）

定义：Flutter 中一切皆是 Widget（组件）

通俗理解：

• 就像积木：每个积木是一个 Widget
• 组合积木可以搭建出完整的应用

示例：

// 文本 Widget
Text('Hello Flutter')

// 按钮 Widget
ElevatedButton(
  onPressed: () {},
  child: Text('点击我'),
)

// 容器 Widget
Container(
  width: 100,
  height: 100,
  color: Colors.blue,
)

2. 状态管理

定义：管理应用的数据和状态

类型：

• StatelessWidget：无状态组件（静态）
• StatefulWidget：有状态组件（动态）

示例：

// 无状态：显示固定内容
class MyText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('固定文本');
  }
}

// 有状态：可以改变内容
class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;
  
  void increment() {
    setState(() {
      count++; // 改变状态
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Text('计数: $count');
  }
}

3. 热重载（Hot Reload）

定义：修改代码后立即看到效果，无需重启应用

优势：

• ✅ 开发效率高
• ✅ 快速迭代
• ✅ 实时预览

操作：

1. 修改代码
2. 保存文件（⌘ + S）
3. 自动热重载
4. 立即看到效果

---

Flutter 基本语法

Dart 语言基础

1. 变量和类型

// 变量声明
var name = 'Flutter';           // 自动推断类型
String name = 'Flutter';        // 明确类型
int age = 25;                   // 整数
double price = 99.99;           // 浮点数
bool isActive = true;           // 布尔值

// 常量
final name = 'Flutter';         // 运行时常量
const pi = 3.14;                // 编译时常量

// 空安全（Null Safety）
String? nullableName;           // 可以为 null
String name = '';               // 不能为 null

2. 函数

// 基本函数
void sayHello() {
  print('Hello');
}

// 带参数
void greet(String name) {
  print('Hello, $name');
}

// 返回值
int add(int a, int b) {
  return a + b;
}

// 箭头函数（单行）
int multiply(int a, int b) => a * b;

// 可选参数
void introduce(String name, {int? age}) {
  print('I am $name');
  if (age != null) {
    print('I am $age years old');
  }
}

// 使用
introduce('Flutter', age: 25);

3. 类和对象

// 定义类
class Person {
  String name;
  int age;
  
  // 构造函数
  Person(this.name, this.age);
  
  // 方法
  void introduce() {
    print('I am $name, $age years old');
  }
}

// 使用
var person = Person('Flutter', 25);
person.introduce();

4. 列表和映射

// 列表（数组）
List<String> fruits = ['苹果', '香蕉', '橙子'];
fruits.add('葡萄');
print(fruits[0]); // 苹果

// 映射（字典/对象）
Map<String, dynamic> user = {
  'name': 'Flutter',
  'age': 25,
  'email': 'flutter@example.com',
};
print(user['name']); // Flutter

5. 条件语句和循环

// if-else
if (age >= 18) {
  print('成年人');
} else {
  print('未成年人');
}

// for 循环
for (int i = 0; i < 5; i++) {
  print(i);
}

// for-in 循环
List<int> numbers = [1, 2, 3, 4, 5];
for (int num in numbers) {
  print(num);
}

// while 循环
int i = 0;
while (i < 5) {
  print(i);
  i++;
}

6. 异步编程

// Future（类似 Promise）
Future<String> fetchData() async {
  await Future.delayed(Duration(seconds: 2));
  return '数据加载完成';
}

// 使用
fetchData().then((data) {
  print(data);
});

// 或使用 async/await
void loadData() async {
  String data = await fetchData();
  print(data);
}

---

Flutter Widget 基础

1. 基础 Widget

// 文本
Text('Hello Flutter')

// 按钮
ElevatedButton(
  onPressed: () {
    print('按钮被点击');
  },
  child: Text('点击我'),
)

// 图片
Image.network('https://example.com/image.jpg')

// 容器
Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  child: Text('容器'),
)

2. 布局 Widget

// 行布局（水平）
Row(
  children: [
    Text('文本1'),
    Text('文本2'),
  ],
)

// 列布局（垂直）
Column(
  children: [
    Text('文本1'),
    Text('文本2'),
  ],
)

// 堆叠布局
Stack(
  children: [
    Container(color: Colors.blue),
    Text('覆盖文本'),
  ],
)

3. 页面结构

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '我的应用',
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body: Center(
        child: Text('Hello Flutter'),
      ),
    );
  }
}

---

实战案例：开发一个简单的钱包应用

案例目标

开发一个简单的加密货币钱包应用，功能包括：

• 显示余额
• 发送交易
• 查看交易历史

完整代码

1. 项目结构

wallet_app/
├── lib/
│   ├── main.dart          # 入口文件
│   ├── models/
│   │   └── wallet.dart    # 钱包数据模型
│   ├── screens/
│   │   ├── home_screen.dart      # 首页
│   │   ├── send_screen.dart      # 发送页面
│   │   └── history_screen.dart   # 历史页面
│   └── services/
│       └── wallet_service.dart   # 钱包服务
└── pubspec.yaml           # 依赖配置

2. 主文件（main.dart）

import 'package:flutter/material.dart';
import 'screens/home_screen.dart';

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

class WalletApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '加密货币钱包',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomeScreen(),
    );
  }
}

3. 钱包数据模型（models/wallet.dart）

class Wallet {
  String address;
  double balance;
  String currency;
  List<Transaction> transactions;

  Wallet({
    required this.address,
    required this.balance,
    required this.currency,
    required this.transactions,
  });
}

class Transaction {
  String hash;
  String from;
  String to;
  double amount;
  DateTime timestamp;
  String status;

  Transaction({
    required this.hash,
    required this.from,
    required this.to,
    required this.amount,
    required this.timestamp,
    required this.status,
  });
}

4. 首页（screens/home_screen.dart）

import 'package:flutter/material.dart';
import '../models/wallet.dart';
import 'send_screen.dart';
import 'history_screen.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  // 模拟钱包数据
  Wallet wallet = Wallet(
    address: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb',
    balance: 1.5,
    currency: 'ETH',
    transactions: [],
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('我的钱包'),
        backgroundColor: Colors.blue,
      ),
      body: Column(
        children: [
          // 余额卡片
          Container(
            margin: EdgeInsets.all(20),
            padding: EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.circular(15),
            ),
            child: Column(
              children: [
                Text(
                  '总余额',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 16,
                  ),
                ),
                SizedBox(height: 10),
                Text(
                  '${wallet.balance} ${wallet.currency}',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 32,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                SizedBox(height: 20),
                // 地址显示
                Container(
                  padding: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.2),
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        wallet.address,
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 12,
                        ),
                      ),
                      IconButton(
                        icon: Icon(Icons.copy, color: Colors.white, size: 16),
                        onPressed: () {
                          // 复制地址
                          ScaffoldMessenger.of(context).showSnackBar(
                            SnackBar(content: Text('地址已复制')),
                          );
                        },
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          
          // 功能按钮
          Padding(
            padding: EdgeInsets.symmetric(horizontal: 20),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                // 发送按钮
                ElevatedButton.icon(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => SendScreen(wallet: wallet),
                      ),
                    );
                  },
                  icon: Icon(Icons.send),
                  label: Text('发送'),
                  style: ElevatedButton.styleFrom(
                    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
                  ),
                ),
                // 历史按钮
                ElevatedButton.icon(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => HistoryScreen(wallet: wallet),
                      ),
                    );
                  },
                  icon: Icon(Icons.history),
                  label: Text('历史'),
                  style: ElevatedButton.styleFrom(
                    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
                  ),
                ),
              ],
            ),
          ),
          
          // 快速操作
          Expanded(
            child: ListView(
              padding: EdgeInsets.all(20),
              children: [
                _buildQuickAction(
                  icon: Icons.qr_code,
                  title: '接收',
                  subtitle: '显示二维码接收资产',
                  onTap: () {
                    // 显示二维码
                  },
                ),
                _buildQuickAction(
                  icon: Icons.swap_horiz,
                  title: '兑换',
                  subtitle: '兑换不同加密货币',
                  onTap: () {
                    // 打开兑换页面
                  },
                ),
                _buildQuickAction(
                  icon: Icons.settings,
                  title: '设置',
                  subtitle: '钱包设置和安全',
                  onTap: () {
                    // 打开设置页面
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildQuickAction({
    required IconData icon,
    required String title,
    required String subtitle,
    required VoidCallback onTap,
  }) {
    return Card(
      margin: EdgeInsets.only(bottom: 10),
      child: ListTile(
        leading: Icon(icon, size: 30),
        title: Text(title),
        subtitle: Text(subtitle),
        trailing: Icon(Icons.chevron_right),
        onTap: onTap,
      ),
    );
  }
}

5. 发送页面（screens/send_screen.dart）

import 'package:flutter/material.dart';
import '../models/wallet.dart';

class SendScreen extends StatefulWidget {
  final Wallet wallet;

  SendScreen({required this.wallet});

  @override
  _SendScreenState createState() => _SendScreenState();
}

class _SendScreenState extends State<SendScreen> {
  final _addressController = TextEditingController();
  final _amountController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('发送 ${widget.wallet.currency}'),
      ),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            // 余额显示
            Card(
              child: Padding(
                padding: EdgeInsets.all(15),
                child: Column(
                  children: [
                    Text('可用余额'),
                    Text(
                      '${widget.wallet.balance} ${widget.wallet.currency}',
                      style: TextStyle(
                        fontSize: 24,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            
            SizedBox(height: 20),
            
            // 接收地址输入
            TextField(
              controller: _addressController,
              decoration: InputDecoration(
                labelText: '接收地址',
                hintText: '0x...',
                border: OutlineInputBorder(),
                prefixIcon: Icon(Icons.account_circle),
              ),
            ),
            
            SizedBox(height: 20),
            
            // 金额输入
            TextField(
              controller: _amountController,
              decoration: InputDecoration(
                labelText: '金额',
                hintText: '0.0',
                border: OutlineInputBorder(),
                prefixIcon: Icon(Icons.attach_money),
                suffixText: widget.wallet.currency,
              ),
              keyboardType: TextInputType.numberWithOptions(decimal: true),
            ),
            
            SizedBox(height: 20),
            
            // 发送按钮
            ElevatedButton(
              onPressed: () {
                _sendTransaction();
              },
              child: Padding(
                padding: EdgeInsets.symmetric(vertical: 15),
                child: Text(
                  '发送',
                  style: TextStyle(fontSize: 16),
                ),
              ),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.blue,
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _sendTransaction() {
    String address = _addressController.text.trim();
    String amountStr = _amountController.text.trim();
    
    // 验证
    if (address.isEmpty) {
      _showError('请输入接收地址');
      return;
    }
    
    if (amountStr.isEmpty) {
      _showError('请输入金额');
      return;
    }
    
    double amount = double.tryParse(amountStr) ?? 0;
    if (amount <= 0) {
      _showError('金额必须大于0');
      return;
    }
    
    if (amount > widget.wallet.balance) {
      _showError('余额不足');
      return;
    }
    
    // 显示确认对话框
    showDialog(
      context: context,
      builder: (context) => AlertDialog(
        title: Text('确认发送'),
        content: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('接收地址：$address'),
            Text('金额：$amount ${widget.wallet.currency}'),
          ],
        ),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: Text('取消'),
          ),
          ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
              _confirmSend(address, amount);
            },
            child: Text('确认'),
          ),
        ],
      ),
    );
  }

  void _confirmSend(String address, double amount) {
    // 这里应该调用实际的区块链API发送交易
    // 示例中只是模拟
    
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('交易已提交'),
        backgroundColor: Colors.green,
      ),
    );
    
    // 延迟后返回
    Future.delayed(Duration(seconds: 1), () {
      Navigator.pop(context);
    });
  }

  void _showError(String message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(message),
        backgroundColor: Colors.red,
      ),
    );
  }

  @override
  void dispose() {
    _addressController.dispose();
    _amountController.dispose();
    super.dispose();
  }
}

6. 历史页面（screens/history_screen.dart）

import 'package:flutter/material.dart';
import '../models/wallet.dart';

class HistoryScreen extends StatelessWidget {
  final Wallet wallet;

  HistoryScreen({required this.wallet});

  @override
  Widget build(BuildContext context) {
    // 模拟交易历史
    List<Transaction> transactions = [
      Transaction(
        hash: '0x1234...5678',
        from: wallet.address,
        to: '0xabcd...efgh',
        amount: 0.5,
        timestamp: DateTime.now().subtract(Duration(days: 1)),
        status: '已完成',
      ),
      Transaction(
        hash: '0x5678...9012',
        from: '0xijkl...mnop',
        to: wallet.address,
        amount: 1.0,
        timestamp: DateTime.now().subtract(Duration(days: 2)),
        status: '已完成',
      ),
    ];

    return Scaffold(
      appBar: AppBar(
        title: Text('交易历史'),
      ),
      body: transactions.isEmpty
          ? Center(
              child: Text('暂无交易记录'),
            )
          : ListView.builder(
              itemCount: transactions.length,
              itemBuilder: (context, index) {
                Transaction tx = transactions[index];
                bool isSent = tx.from == wallet.address;
                
                return Card(
                  margin: EdgeInsets.symmetric(horizontal: 15, vertical: 5),
                  child: ListTile(
                    leading: CircleAvatar(
                      backgroundColor: isSent ? Colors.red : Colors.green,
                      child: Icon(
                        isSent ? Icons.arrow_upward : Icons.arrow_downward,
                        color: Colors.white,
                      ),
                    ),
                    title: Text(
                      isSent ? '发送' : '接收',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    subtitle: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('地址: ${isSent ? tx.to : tx.from}'),
                        Text('时间: ${tx.timestamp.toString().substring(0, 16)}'),
                      ],
                    ),
                    trailing: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        Text(
                          '${isSent ? "-" : "+"}${tx.amount} ${wallet.currency}',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            color: isSent ? Colors.red : Colors.green,
                          ),
                        ),
                        Text(
                          tx.status,
                          style: TextStyle(
                            fontSize: 12,
                            color: Colors.grey,
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
    );
  }
}

7. 依赖配置（pubspec.yaml）

name: wallet_app
description: 一个简单的加密货币钱包应用

version: 1.0.0+1

environment:
  sdk: ">=2.17.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true

运行应用

# 1. 创建项目
flutter create wallet_app
cd wallet_app

# 2. 添加代码文件

# 3. 运行应用
flutter run

案例说明

这个案例展示了：

• ✅ 基本的 Flutter 应用结构
• ✅ 页面导航（Navigator）
• ✅ 状态管理（StatefulWidget）
• ✅ UI 组件使用（Card、TextField、Button等）
• ✅ 表单验证
• ✅ 对话框和提示
• ✅ 列表显示

可以扩展的功能：

• 连接真实的区块链节点
• 使用 Web3 库（如 web3dart）
• 添加钱包导入/导出
• 添加多币种支持
• 添加交易详情页面

---

Flutter 在区块链中的应用

主要应用场景

1. 加密货币钱包

应用：

• 币安 APP
• OKX Wallet
• Bybit Wallet
• MetaMask Mobile（部分功能）

功能：

• 资产管理
• 充值和提现
• 交易功能
• DApp 浏览器
• NFT 管理

为什么选择 Flutter：

• ✅ 跨平台：一套代码支持 iOS 和 Android
• ✅ 性能好：交易操作需要快速响应
• ✅ UI 美观：钱包需要良好的用户体验
• ✅ 开发效率高：快速迭代新功能

---

2. DeFi 应用

应用：

• Uniswap Mobile
• Aave Mobile
• Compound Mobile

功能：

• 流动性提供
• 借贷功能
• 收益管理
• 交易功能

---

3. NFT 市场

应用：

• OpenSea Mobile
• 各种 NFT 市场应用

功能：

• NFT 浏览
• NFT 交易
• 钱包连接
• 收藏管理

---

4. 区块链浏览器

应用：

• Etherscan Mobile
• BscScan Mobile

功能：

• 区块查询
• 交易查询
• 地址查询
• 合约交互

---

区块链开发常用库

1. web3dart

用途：与以太坊区块链交互

安装：

dependencies:
  web3dart: ^2.7.0

示例：

import 'package:web3dart/web3dart.dart';

// 连接到以太坊节点
final client = Web3Client('https://mainnet.infura.io/v3/YOUR_KEY', Client());

// 获取余额
Future<EtherAmount> getBalance(String address) async {
  final balance = await client.getBalance(EthereumAddress.fromHex(address));
  return balance;
}

// 发送交易
Future<String> sendTransaction({
  required String from,
  required String to,
  required double amount,
  required Credentials credentials,
}) async {
  final transaction = Transaction(
    from: EthereumAddress.fromHex(from),
    to: EthereumAddress.fromHex(to),
    value: EtherAmount.fromUnitAndValue(EtherUnit.ether, amount),
  );
  
  final txHash = await client.sendTransaction(
    credentials,
    transaction,
  );
  
  return txHash;
}

2. bip39

用途：生成和管理助记词

安装：

dependencies:
  bip39: ^1.0.6

示例：

import 'package:bip39/bip39.dart' as bip39;

// 生成助记词
String generateMnemonic() {
  return bip39.generateMnemonic();
}

// 验证助记词
bool validateMnemonic(String mnemonic) {
  return bip39.validateMnemonic(mnemonic);
}

// 从助记词生成种子
Uint8List mnemonicToSeed(String mnemonic) {
  return bip39.mnemonicToSeed(mnemonic);
}

3. wallet_connect

用途：连接 DApp 和钱包

安装：

dependencies:
  wallet_connect: ^1.0.0

4. qr_flutter

用途：生成二维码（用于接收地址）

安装：

dependencies:
  qr_flutter: ^4.1.0

示例：

import 'package:qr_flutter/qr_flutter.dart';

Widget buildQRCode(String address) {
  return QrImage(
    data: address,
    version: QrVersions.auto,
    size: 200.0,
  );
}

---

区块链钱包开发要点

1. 安全考虑

私钥管理：

• ✅ 使用安全存储（Keychain/Keystore）
• ✅ 不在代码中硬编码私钥
• ✅ 使用硬件安全模块（如支持）

代码示例：

import 'package:flutter_secure_storage/flutter_secure_storage.dart';

class SecureStorage {
  final _storage = FlutterSecureStorage();
  
  // 保存私钥
  Future<void> savePrivateKey(String key, String privateKey) async {
    await _storage.write(key: key, value: privateKey);
  }
  
  // 读取私钥
  Future<String?> getPrivateKey(String key) async {
    return await _storage.read(key: key);
  }
  
  // 删除私钥
  Future<void> deletePrivateKey(String key) async {
    await _storage.delete(key: key);
  }
}

2. 网络请求

使用 HTTP 客户端：

import 'package:http/http.dart' as http;

Future<Map<String, dynamic>> getBalance(String address) async {
  final response = await http.get(
    Uri.parse('https://api.etherscan.io/api?module=account&action=balance&address=$address'),
  );
  
  return json.decode(response.body);
}

3. 状态管理

推荐使用：

• Provider：简单易用
• Riverpod：更现代的选择
• Bloc：复杂应用

示例（Provider）：

import 'package:provider/provider.dart';

// 钱包状态
class WalletProvider extends ChangeNotifier {
  double _balance = 0.0;
  
  double get balance => _balance;
  
  Future<void> loadBalance(String address) async {
    // 加载余额
    _balance = await fetchBalance(address);
    notifyListeners();
  }
}

// 使用
Consumer<WalletProvider>(
  builder: (context, wallet, child) {
    return Text('余额: ${wallet.balance}');
  },
)

---

快速上手教程

步骤 1：安装 Flutter

macOS 安装

# 1. 下载 Flutter SDK
# 访问 https://flutter.dev/docs/get-started/install/macos
# 下载并解压

# 2. 添加到 PATH
export PATH="$PATH:`pwd`/flutter/bin"

# 3. 验证安装
flutter doctor

# 4. 安装 Xcode（iOS 开发）
# 从 App Store 安装 Xcode

# 5. 安装 Android Studio（Android 开发）
# 下载并安装 Android Studio

安装检查

flutter doctor

应该看到：

[✓] Flutter (Channel stable, 3.x.x)
[✓] Android toolchain
[✓] Xcode
[✓] VS Code / Android Studio

---

步骤 2：创建第一个项目

# 创建项目
flutter create my_first_app
cd my_first_app

# 运行项目
flutter run

---

步骤 3：修改代码

打开 lib/main.dart：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '我的第一个应用',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello Flutter'),
        ),
        body: Center(
          child: Text(
            '欢迎使用 Flutter！',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
    );
  }
}

保存后自动热重载，立即看到效果！

---

步骤 4：学习路径

第 1 周：基础语法

• Dart 语言基础
• 变量和类型
• 函数和类
• 异步编程

第 2 周：Flutter 基础

• Widget 概念
• 常用 Widget
• 布局 Widget
• 状态管理

第 3 周：实战项目

• 开发简单应用
• 页面导航
• 表单处理
• 网络请求

第 4 周：区块链集成

• 学习 Web3 库
• 连接区块链节点
• 实现钱包功能
• 完成钱包应用

---

学习资源

官方资源

• Flutter 官网：https://flutter.dev
• Flutter 中文网：https://flutter.cn
• Dart 官网：https://dart.dev
• Flutter 文档：https://docs.flutter.dev

推荐教程

• Flutter 官方教程：https://docs.flutter.dev/get-started/codelab
• Flutter 实战：https://book.flutterchina.club
• B站 Flutter 教程：搜索"Flutter 教程"

社区资源

• Flutter 中文社区：https://flutter.cn/community
• Stack Overflow：https://stackoverflow.com/questions/tagged/flutter
• GitHub：搜索 Flutter 项目学习

区块链相关

• web3dart 文档：https://pub.dev/packages/web3dart
• 以太坊开发文档：https://ethereum.org/developers
• 区块链钱包开发指南：参考本文档案例

---

总结

Flutter 核心优势

1. 跨平台：一套代码，iOS 和 Android 都能用
2. 性能好：接近原生性能
3. 开发快：热重载，快速迭代
4. UI 美：丰富的组件，美观的界面

在区块链中的应用

• ✅ 加密货币钱包（币安、OKX 等）
• ✅ DeFi 应用
• ✅ NFT 市场
• ✅ 区块链浏览器

快速上手建议

1. 先学 Dart：掌握基础语法
2. 再学 Flutter：理解 Widget 概念
3. 做项目：通过实践学习
4. 学 Web3：集成区块链功能

下一步行动

• 安装 Flutter 开发环境
• 完成官方教程
• 开发第一个应用
• 学习区块链集成
• 开发钱包应用

---

记住：Flutter 学习曲线平缓，多练习、多实践，很快就能开发出漂亮的应用！

---