简单的数字键盘

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<KeyModel> keys = [
    KeyModel(text: '1', type: KeyType.num, num: 1),
    KeyModel(text: '2', type: KeyType.num, num: 2),
    KeyModel(text: '3', type: KeyType.num, num: 3),
    KeyModel(text: '4', type: KeyType.num, num: 4),
    KeyModel(text: '5', type: KeyType.num, num: 5),
    KeyModel(text: '6', type: KeyType.num, num: 6),
    KeyModel(text: '7', type: KeyType.num, num: 7),
    KeyModel(text: '8', type: KeyType.num, num: 8),
    KeyModel(text: '9', type: KeyType.num, num: 9),
    KeyModel(
      text: 'Cancel',
      type: KeyType.cancel,
    ),
    KeyModel(text: '0', type: KeyType.num, num: 0),
    KeyModel(text: 'Delete', type: KeyType.del),
  ];

  int maxNumLen = 6;

  void callback(KeyType type, int? num) {
    if (type == KeyType.num) {
      if (result.length < 6) {
        result.add(num!);
      }
    } else if (type == KeyType.cancel) {
      result.clear();
    } else if (type == KeyType.del) {
      if (result.isNotEmpty) {
        result.removeLast();
      }
    }
    setState(() {});
  }

  List<int> result = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 40),
              child: SizedBox(
                width: double.infinity,
                height: 100,
                child: GridView.builder(
                  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                    crossAxisCount: 6,
                    childAspectRatio: 0.5,
                  ),
                  itemBuilder: (context, index) {
                    return result.length > index
                        ? Container(
                            alignment: Alignment.center,
                            child: Text(
                              result[index].toString(),
                              style: TextStyle(fontSize: 40),
                            ),
                          )
                        // ? Icon(Icons.circle_sharp)
                        : Icon(Icons.circle_outlined);
                  },
                  itemCount: 6,
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 20),
              child: SizedBox(
                width: double.infinity,
                height: 500,
                child: Center(
                  child: GridView.builder(
                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 3,
                        childAspectRatio: 1,
                      ),
                      itemBuilder: (context, index) {
                        return KeyContainer(
                          text: keys[index].text,
                          type: keys[index].type,
                          num: keys[index].num,
                          onTapHandle: callback,
                        );
                      },
                      itemCount: keys.length),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class KeyContainer extends StatelessWidget {
  const KeyContainer({
    Key? key,
    required this.text,
    required this.type,
    required this.onTapHandle,
    this.num,
  }) : super(key: key);

  final String text;
  final KeyType type;
  final KeyInputCallback onTapHandle;
  final int? num;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => {
        onTapHandle(
          type,
          num,
        )
      },
      child: UnconstrainedBox(
        child: Container(
          width: 60,
          height: 60,
          alignment: Alignment.center,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(30),
            color: Color(0xFF334455),
          ),
          child: Text(
            text,
            style: TextStyle(color: Colors.white, fontSize: 16),
          ),
        ),
      ),
    );
  }
}

typedef KeyInputCallback = void Function(KeyType type, int? num);

enum KeyType {
  num,
  del,
  cancel,
}

class KeyModel {
  KeyModel({
    this.num,
    required this.text,
    required this.type,
  });
  final int? num;
  final String text;
  final KeyType type;
}