Flutter自定义按钮插件flutter_ton_buttons的使用

flutter_ton_buttons

flutter_ton_buttons 是一个用于 Telegram TON HTTP 连接流的 Flutter 小部件集合。它提供了以下功能：

1. TON Connect 按钮 (TonConnectButton)

用于启动 Telegram TON 钱包连接流程。

示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('TON Connect Button Example')),
        body: Center(
          child: TonConnectButton(
            onPressed: () {
              print('TON Connect Button Pressed!');
            },
          ),
        ),
      ),
    );
  }
}

2. 钱包选择按钮 (TonOpenWalletWidget)

允许用户选择他们的 Telegram TON 钱包。

示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Wallet Selection Button Example')),
        body: TonOpenWalletWidget(
          onSelected: (walletAddress) {
            print('Selected Wallet Address: $walletAddress');
          },
        ),
      ),
    );
  }
}

3. 钱包连接确认进度 (TonConnectionPendingWidget)

显示钱包连接的等待状态。

示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Connection Pending Widget Example')),
        body: TonConnectionPendingWidget(
          message: 'Connecting to your wallet...',
        ),
      ),
    );
  }
}

4. 钱包连接失败信息 (TonConnectionPendingWidget with error = true)

显示钱包连接失败的信息。

示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Connection Failed Widget Example')),
        body: TonConnectionPendingWidget(
          error: true,
          message: 'Failed to connect to your wallet.',
        ),
      ),
    );
  }
}

5. 交易确认进度 (TonSendTrxWidget)

显示交易发送的确认进度。

示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Transaction Confirmation Widget Example')),
        body: TonSendTrxWidget(
          message: 'Sending transaction...',
        ),
      ),
    );
  }
}

主题支持

所有小部件都支持 Dark 和 Light 主题。可以根据应用的主题动态调整样式。

示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: Scaffold(
        appBar: AppBar(title: Text('Theme Example')),
        body: TonConnectButton(
          onPressed: () {},
        ),
      ),
    );
  }
}