How to put a keyboard design

basic_keyboard.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @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> {
  double _keyboardHeight = 0.0;
  final _node = FocusNode();
  @override
  Widget build(BuildContext context) {
    _keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Stack(
          children: <Widget>[
            TextField(
              focusNode: _node,
            ),

            /// leave no afterimage
            if (_node.hasFocus) ...[
              KeyboardWidget(
                  nodeBottom: _node.rect.bottom,
                  keyboardHeight: _keyboardHeight),
            ],
          ],
        ),
      ),
    );
  }
}

class KeyboardWidget extends StatelessWidget {
  const KeyboardWidget({
    super.key,
    required this.nodeBottom,
    required this.keyboardHeight,
  });

  final double nodeBottom;
  final double keyboardHeight;

  @override
  Widget build(BuildContext context) {
    return _keyboardWidget(context);
  }

  Widget _keyboardWidget(
    BuildContext context,
  ) {
    /// calculate as you like
    final originY =
        MediaQuery.of(context).size.height - keyboardHeight - nodeBottom - 27;
    return AnimatedContainer(
      duration: const Duration(milliseconds: 1),
      transform: Matrix4.translationValues(
        0,
        keyboardHeight == 0 ? MediaQuery.of(context).size.height : originY,
        0,
      ),
      child: Container(
        width: MediaQuery.of(context).size.width,
        height: 60,
        color: Colors.red,
        child: Container(
          padding: const EdgeInsets.only(
            left: 24,
            right: 24,
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              GestureDetector(
                onTap: () {
                  FocusScope.of(context).unfocus();
                },
                child: const SizedBox(
                  width: 32,
                  height: 32,
                  child: Icon(Icons.add),
                ),
              ),
              GestureDetector(
                onTap: () {
                  FocusScope.of(context).unfocus();
                },
                child: const SizedBox(
                  width: 32,
                  height: 32,
                  child: Icon(Icons.check),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

example.mov