ww-sample/bloc_example/lib/screens/pin_input_screen.dart

import 'package:flutter/material.dart';

class PinInputScreen extends StatefulWidget {
  @override
  _PinInputScreenState createState() => _PinInputScreenState();
}

class _PinInputScreenState extends State<PinInputScreen> {
  List<String> pin = [];

  void _onKeyPressed(String value) {
    setState(() {
      if (value == 'back') {
        if (pin.isNotEmpty) pin.removeLast();
      } else if (pin.length < 6) {
        pin.add(value);
      }
    });
  }

  Widget _buildPinDots() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: List.generate(6, (index) {
        return Container(
          margin: EdgeInsets.all(8),
          width: 16,
          height: 16,
          decoration: BoxDecoration(
            shape: BoxShape.circle,
            border: Border.all(color: Colors.grey),
            color: index < pin.length ? Colors.black : Colors.transparent,
          ),
        );
      }),
    );
  }

  Widget _buildKey(String value, {String? letters, IconData? icon}) {
    return GestureDetector(
      onTap: () => _onKeyPressed(value),
      child: Container(
        decoration: BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.white,
          boxShadow: [
            BoxShadow(
                color: Colors.black26, blurRadius: 2, offset: Offset(0, 2)),
          ],
        ),
        width: 80,
        height: 80,
        alignment: Alignment.center,
        child: icon != null
            ? Icon(icon, size: 28)
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(value,
                      style:
                          TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
                  if (letters != null)
                    Text(letters,
                        style: TextStyle(fontSize: 12, color: Colors.grey)),
                ],
              ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final keys = [
      ['1', ''],
      ['2', 'ABC'],
      ['3', 'DEF'],
      ['4', 'GHI'],
      ['5', 'JKL'],
      ['6', 'MNO'],
      ['7', 'PQRS'],
      ['8', 'TUV'],
      ['9', 'WXYZ'],
    ];

    return Scaffold(
      backgroundColor: Color(0xFFF5F5F5),
      body: SafeArea(
        child: Column(
          children: [
            SizedBox(height: 60),
            Text('输入解锁密码',
                style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold)),
            SizedBox(height: 20),
            _buildPinDots(),
            SizedBox(height: 40),
            Expanded(
              child: GridView.count(
                crossAxisCount: 3,
                mainAxisSpacing: 24,
                crossAxisSpacing: 24,
                padding: EdgeInsets.symmetric(horizontal: 32),
                children: [
                  ...keys.map((e) => _buildKey(e[0], letters: e[1])),
                  SizedBox(), // empty space
                  _buildKey('0'),
                  _buildKey('back', icon: Icons.backspace),
                ],
              ),
            ),
            SizedBox(height: 30),
          ],
        ),
      ),
    );
  }
}