flutter 做一个真人验证的界面

Flutter 中可以通过使用 `CupertinoTextField` 和 `TextEditingController` 来实现一个简单的真人验证界面。

首先，我们需要在 `pubspec.yaml` 中添加 `cupertino_icons` 依赖，然后执行 `flutter packages get` 命令安装依赖。

接着，我们可以创建一个 `CupertinoTextField` 并使用 `TextEditingController` 控制其中的文本。在 `CupertinoTextField` 中，可以通过设置 `prefix` 属性来添加一个图标，例如人物头像或者验证码图标。然后，我们可以在 `onSubmitted` 回调函数中实现验证逻辑。

以下是一个简单的示例代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _controller = TextEditingController();

  void _verify() {
    String text = _controller.text.trim();
    if (text == '1234') {
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return CupertinoAlertDialog(
            title: Text('验证成功'),
            actions: [
              CupertinoDialogAction(
                child: Text('确定'),
                onPressed: () {
                  Navigator.of(context).pop();
                  _controller.clear();
                },
              ),
            ],
          );
        },
      );
    } else {
      showDialog(
        context: context,
        builder: (BuildContext context) {
          return CupertinoAlertDialog(
            title: Text('验证失败'),
            content: Text('验证码错误'),
            actions: [
              CupertinoDialogAction(
                child: Text('确定'),
                onPressed: () {
                  Navigator.of(context).pop();
                  _controller.clear();
                },
              ),
            ],
          );
        },
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('真人验证'),
      ),
      child: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              SizedBox(height: 16.0),
              CupertinoTextField(
                controller: _controller,
                placeholder: '请输入验证码',
                keyboardType: TextInputType.number,
                inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                prefix: Icon(CupertinoIcons.person),
                onSubmitted: (_) => _verify(),
              ),
              SizedBox(height: 16.0),
              CupertinoButton.filled(
                child: Text('验证'),
                onPressed: _verify,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

在这个例子中，我们使用了 `CupertinoAlertDialog` 来显示验证结果。当验证码输入正确时，会弹出一个提示框，显示验证成功的信息；当验证码输入错误时，也会弹出一个提示框，显示验证失败的信息。同时，我们在验证完成后，清空了文本框中的内容，以便下一次验证使用。