keyboard is a part of my flutter app screen

Question

my application is simply to add contacts using textfields and delete it but when i add more than 1 contact i find that the keyboard of the text field overflowed because of the other widgets so how can i make the keyboard not a part of the screen.For information only, when they keyboard is closed and i press add button there would be no errors in this case.

i want the keybaord to be separated layer or something like that.

import 'package:contactapp/button.dart';
import 'package:contactapp/info_col.dart';
import 'package:contactapp/new_contact.dart';
import 'package:flutter/material.dart';

class ContactScreen extends StatefulWidget {
  ContactScreen({super.key});

  @override
  State<ContactScreen> createState() => _ContactScreenState();
}

class _ContactScreenState extends State<ContactScreen> {
  late TextEditingController nameController;
  late TextEditingController phoneController;
  bool is_v = false;
  bool is_v1 = false;
  bool is_v2 = false;

  @override
  void dispose() {
    super.dispose();
  }

  @override
  void initState() {
    nameController = TextEditingController();
    phoneController = TextEditingController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      appBar: AppBar(
        title: Text("Contact Screen"),
      ),
      body: Column(
        children: [
          InfoColoumn("Enter Your Name Here", Icons.person, nameController,
              TextInputType.name),
          InfoColoumn("Enter Your Phone Here", Icons.call, phoneController,
              TextInputType.phone),
          SizedBox(
            height: 20,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SizedBox(
                width: 20,
              ),
              Button("Add", Colors.blue, addCon),
              Button("Delete", Colors.red, delCon),
              SizedBox(
                width: 20,
              ),
            ],
          ),
          Visibility(
              visible: is_v,
              child: NewContact("Name: ${nameController.text}",
                  "Phone: ${phoneController.text}")),
          Visibility(
              visible: is_v1,
              child: NewContact("Name: ${nameController.text}",
                  "Phone: ${phoneController.text}")),
          Visibility(
              visible: is_v2,
              child: NewContact("Name: ${nameController.text}",
                  "Phone: ${phoneController.text}")),
        ],
      ),
    );
  }

  void addCon() {
    if (is_v == false) {
      is_v = true;
    } else {
      if (is_v1 == false) {
        is_v1 = true;
      } else if (is_v2 == false) {
        is_v2 = true;
      }
    }

    setState(() {});
  }

  void delCon() {
    if (is_v2 == true) {
      is_v2 = false;
    } else {
      if (is_v1 == true) {
        is_v1 = false;
      } else if (is_v == true) {
        is_v = false;
      }
    }
    setState(() {});
  }
}

Answer 1

I found the solution. it is very simple. in Scaffold , property resizeToAvoidBottomInset default is true, so I changed it to true and that worked.

Scaffold(
      resizeToAvoidBottomInset: false
    .......................)