TextInput style like WhatApp

Question

I am making a message application. How can I put my own custom widget where the keyboard is, without closing the keyboard.

When the add button is clicked, its own widget will appear where the keyboard is.

I want to do the same as the gif looks like.

I designed the input and related icons in this way. But I couldn't find any information about putting its own widget where the keyboard is located.

Container _buildMessageInput(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 16),
      decoration: BoxDecoration(
        color: context.theme.appBarTheme.backgroundColor,
      ),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        children: [
          SizedBox(
            height: 35,
            width: 35,
            child: Center(
              child: Icon(
                Icons.add,
                size: 25,
                color: Theme.of(context).disabledColor.withOpacity(0.5),
              ),
            ),
          ),
          const SizedBox(width: 10),
          Flexible(
            child: Container(
              constraints: const BoxConstraints(
                minHeight: 35,
                maxHeight: 300,
              ),
              child: CupertinoTextField(
                onSubmitted: (value) => _controller.sendMessage(),
                controller: _controller.messageTextController,
                placeholder: "Write a message ....",
                keyboardType: TextInputType.multiline,
                maxLines: 5,
                minLines: 1,
                padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 16),
                style: Theme.of(context).textTheme.bodyMedium,
                decoration: BoxDecoration(
                  color: Theme.of(context).disabledColor.withOpacity(0.1),
                  borderRadius: BorderRadius.circular(15),
                ),
              ),
            ),
          ),
          const SizedBox(width: 10),
         InkWell(
            onTap: () => _controller.sendMessage(),
            child: Container(
              // padding: const EdgeInsets.all(8),
              height: 35,
              width: 35,
              decoration: BoxDecoration(color: context.theme.primaryColor, shape: BoxShape.circle),
              child: const Center(
                child: Icon(
                  Icons.send,
                  size: 20,
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }