Flutter页面转场动画插件flutter_turnstile的使用

Flutter页面转场动画插件flutter_turnstile的使用

flutter_turnstile 是一个用于在 Flutter 应用中集成 Cloudflare Turnstile 验证的插件。该插件提供了易于使用的API，并允许自定义选项以及错误处理和令牌过期回调。

特性

• 易于使用的API
• 可定制的选项
• 错误处理和令牌过期回调

安装

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

dependencies:
  flutter_turnstile: ^1.2.0

然后运行 flutter pub get 命令以获取依赖项。

示例代码

以下是一个完整的示例代码，展示了如何在 Flutter 应用中使用 flutter_turnstile 插件。

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

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  // 初始化 Turnstile 控制器和选项
  final TurnstileController _controller = TurnstileController();
  final TurnstileOptions _options = TurnstileOptions(
    mode: TurnstileMode.managed,
    size: TurnstileSize.normal,
    theme: TurnstileTheme.light,
    language: 'zh',
    retryAutomatically: true,
    refreshTimeout: TurnstileRefreshTimeout.manual,
  );

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Builder(
        builder: (context) => Scaffold(
          body: Center(
            // 使用 Turnstile 组件
            child: Container(
              color: Colors.red,
              padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
              child: CloudFlareTurnstile(
                siteKey: '3x00000000000000000000FF', // 你的站点密钥
                baseUrl: "https://www.baidu.com", // 你的基础URL
                options: _options,
                controller: _controller,
                onTokenReceived: (token) {
                  // 处理接收到的令牌
                },
                onWidgetReady: () {
                  print("onWidgetReady"); // 组件准备就绪时调用
                },
                onWidgetBeforeInteractive: () {
                  print("AAAAAA"); // 组件交互前调用
                },
                onWidgetAfterInteractive: () {
                  print("BBBBBB"); // 组件交互后调用
                },
                onTokenExpired: () {
                  // 处理令牌过期事件
                },
                onError: (error) {
                  // 处理错误事件
                  /*ScaffoldMessenger.of(context).showSnackBar(
                    SnackBar(content: Text(error)),
                  );*/
                },
              ),
            ),
          ),
        ),
      ),
    );
  }
}

代码解释

1. 初始化控制器和选项：

   final TurnstileController _controller = TurnstileController();
   final TurnstileOptions _options = TurnstileOptions(
     mode: TurnstileMode.managed,
     size: TurnstileSize.normal,
     theme: TurnstileTheme.light,
     language: 'zh',
     retryAutomatically: true,
     refreshTimeout: TurnstileRefreshTimeout.manual,
   );
   

2. 释放资源：

   [@override](/user/override)
   void dispose() {
     super.dispose();
     _controller.dispose();
   }
   

3. 构建UI：

   [@override](/user/override)
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Flutter Demo',
       home: Builder(
         builder: (context) => Scaffold(
           body: Center(
             child: Container(
               color: Colors.red,
               padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
               child: CloudFlareTurnstile(
                 siteKey: '3x00000000000000000000FF',
                 baseUrl: "https://www.baidu.com",
                 options: _options,
                 controller: _controller,
                 onTokenReceived: (token) {
                   // 处理接收到的令牌
                 },
                 onWidgetReady: () {
                   print("onWidgetReady");
                 },
                 onWidgetBeforeInteractive: () {
                   print("AAAAAA");
                 },
                 onWidgetAfterInteractive: () {
                   print("BBBBBB");
                 },
                 onTokenExpired: () {
                   // 处理令牌过期事件
                 },
                 onError: (error) {
                   // 处理错误事件
                 },
               ),
             ),
           ),
         ),
       ),
     );
   }