NumberPad.dart

import 'package:flutter/cupertino.dart' show showCupertinoModalPopup;
import 'package:flutter/material.dart';

class _NumberPad extends StatefulWidget {
  final int value;
  final ValueWidgetBuilder<int> headerBuilder;
  final ValueChanged<int> onChanged;
  _NumberPad({this.headerBuilder, this.onChanged, this.value});

  @override
  __NumberPadState createState() => __NumberPadState();
}

class __NumberPadState extends State<_NumberPad> {
  final List<int> keys = List.generate(12, (index) => index + 1);
  int _currentValue = 0;

  void update(int value) {
    setState(() => _currentValue = value);
    widget.onChanged(value);
  }

  Widget keyNumber(int index) {
    return Container(
      alignment: Alignment.center,
      child: Text(
        '$index',
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
      ),
    );
  }

  void initState() {
    super.initState();
    _currentValue = widget.value;
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Material(
        child: Container(
          padding: EdgeInsets.only(top: 20),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              if (widget.headerBuilder != null)
                widget.headerBuilder(context, _currentValue, null),
              GridView.count(
                primary: false,
                shrinkWrap: true,
                childAspectRatio: 2 / 1.2,
                crossAxisCount: 3,
                physics: NeverScrollableScrollPhysics(),
                children: keys.map((index) {
                  if (index == 10) {
                    return InkWell(
                      onTap: () => Navigator.pop(context),
                      child: Container(
                        alignment: Alignment.center,
                        child: Text(
                          'Done',
                          style: TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ),
                    );
                  }
                  if (index == 11) {
                    return InkWell(
                      child: keyNumber(0),
                      onTap: () {
                        final old = _currentValue.toString();
                        update(int.parse('$old\0'));
                      },
                    );
                  }
                  if (index == 12) {
                    return InkWell(
                      child: Container(
                        alignment: Alignment.center,
                        child: Icon(Icons.backspace),
                      ),
                      onLongPress: () => update(0),
                      onTap: () {
                        final old = _currentValue.toString();
                        if (old.length <= 1) {
                          update(0);
                        } else {
                          final newValue = old.substring(0, old.length - 1);
                          update(int.parse('$newValue'));
                        }
                      },
                    );
                  }
                  return InkWell
                    child: keyNumber(index),
                    onTap: () {
                      final old = _currentValue.toString();
                      update(int.parse('$old$index'));
                    },
                  );
                }).toList(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

void showNumberPad({
  @required int value,
  @required BuildContext context,
  @required ValueChanged<int> onChanged,
  ValueWidgetBuilder<int> headerBuilder,
}) {
  showCupertinoModalPopup(
    context: context,
    builder: (context) {
      return _NumberPad(
        value: value,
        onChanged: onChanged,
        headerBuilder: headerBuilder,
      );
    },
  );
}