How to hide FloatingActionButton under keyboard and not textformfield in flutter?

Question

So I am trying to hide FloatingActionButton using resizeToAvoidBottomInsert: false, but it also hiding textformfield. Is there any way to just hide FloatingActionButton alone and not textformfield and textformfield should appear when the keyboard appears. If you have time please share some kt how to focus textformfield because every time it only focusing first textfield. Below I attaching the Screenshots and full code.

    import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CardWithTextformfield(),
    );
  }
}

class CardWithTextformfield extends StatefulWidget {
  const CardWithTextformfield({Key? key}) : super(key: key);

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

class _CardWithTextformfieldState extends State<CardWithTextformfield>  {


  var name =<TextEditingController>[];
  var id =<TextEditingController>[];
  


  var addCard =1;  
  bool cardOneVisibility=true;
  bool cardTwoVisibility=false;
  bool cardThreeVisibility=false;
  bool cardFourVisibility=false;
  bool cardFiveVisibility=false;
  bool cardSixVisibility=false;


  void incrementcard(){
    setState(() {
      
      if(addCard==0){   
        cardOneVisibility=true;
      }
      else if(addCard==1){ 
        cardOneVisibility=true;
        cardTwoVisibility=true;
      }
      else if(addCard==2){ 
        cardOneVisibility=true;
        cardTwoVisibility=true;
        cardThreeVisibility=true;
      }
      else if(addCard==3){  
        cardOneVisibility=true;
        cardTwoVisibility=true;
        cardThreeVisibility=true;
        cardFourVisibility=true;
      }
      else if(addCard==4){  
        cardOneVisibility=true;
        cardTwoVisibility=true;
        cardThreeVisibility=true;
        cardFourVisibility=true;
        cardFiveVisibility=true;
      }
      else if(addCard==5){  
        cardOneVisibility=true;
        cardTwoVisibility=true;
        cardThreeVisibility=true;
        cardFourVisibility=true;
        cardFiveVisibility=true;
        cardSixVisibility=true;
      }
      addCard++;

    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomInset: false,
      appBar: AppBar(
        title: Text('Card with TextformField'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: addCard>=6 ? null : incrementcard, 
        child: Icon(Icons.add),
      ),
      body: Container(

        child:SingleChildScrollView(
          child: Column(
            children: [
              Visibility(visible: cardOneVisibility,child: cardslist(0)),
              Visibility(visible: cardTwoVisibility,child: cardslist(1)),
              Visibility(visible: cardThreeVisibility,child: cardslist(2)),
              Visibility(visible: cardFourVisibility,child: cardslist(3)),
              Visibility(visible: cardFiveVisibility,child: cardslist(4)),
              Visibility(visible: cardSixVisibility,child: cardslist(5)),
            ],
          ),
        ),
      ),
    );
  }
  Widget cardslist(int index){
    if(name.length <= index){
      name.add(TextEditingController());
      id.add(TextEditingController());
    }
    return Card(
      margin: EdgeInsets.all(10),
      child: Container(
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                    margin: EdgeInsets.all(10),
                    child: Text('Team Name: ')),
                Expanded(child: TextFormField(
                  controller: name[index],
                    decoration: InputDecoration(hintText: 'Team Name'),
                ),),
                Container(
                  margin: EdgeInsets.all(10),
                  child: Text('Team Id: '),),
                Expanded(child: TextFormField(
                  controller: id[index],
                    decoration: InputDecoration(hintText: 'Team Id'),
                ),),
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                GestureDetector(
                  child: Container(
                    width: 50,height: 50,
                    margin: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                      shape: BoxShape.rectangle,
                      color:Colors.grey,
                    ),
                    child: Center(child: Text('IT'),),
                  ),
                 
                ),
                GestureDetector(
                  child: Container(
                    width: 50,height: 50,
                    margin: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                      shape: BoxShape.rectangle,
                      color: Colors.grey,
                    ),
                    child: Center(child: Text('DEV'),),
                  ),
                ),
                GestureDetector(
                  child: Container(
                    width: 50,height: 50,
                    margin: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                      shape: BoxShape.rectangle,
                      color: Colors.grey,
                    ),
                    child: Center(child: Text('TEST'),),
                  ),
                ),
                GestureDetector(
                  child: Container(
                    width: 50,height: 50,
                    margin: EdgeInsets.all(10),
                    decoration: BoxDecoration(
                      shape: BoxShape.rectangle,
                      color: Colors.grey,
                    ),
                    child: Center(child: Text('HR'),),
                  ),
                ),
              ],
            )
          ],
        ),
      ),
    );
  }
}

Hey @JahidulIslam I tried but FAB is disappeared only after all cards reached the maximum number, but the problem is when I tried to give input in the 4th or 5th card textformfield is hiding below the FAB .screenshot here https://i.stack.imgur.com/RNSlp.png — shanmkha, Sep 01 '21 at 05:59
i got the issue and updated again please check one more time — Jahidul Islam, Sep 01 '21 at 07:02

Jahidul Islam · Answer 1 · 2021-09-01T07:02:11.083

please check. remove resizeToAvoidBottomInsert: false, and controll floating button based on addCard size.

import 'package:flutter/material.dart';

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: CardWithTextformfield(),
    );
  }
}

class CardWithTextformfield extends StatefulWidget {
  const CardWithTextformfield({Key key}) : super(key: key);

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

class _CardWithTextformfieldState extends State<CardWithTextformfield> {
  List<TextEditingController> name = <TextEditingController>[];
  List<TextEditingController> id = <TextEditingController>[];

  var addCard = 1;
  bool cardOneVisibility = true;
  bool cardTwoVisibility = false;
  bool cardThreeVisibility = false;
  bool cardFourVisibility = false;
  bool cardFiveVisibility = false;
  bool cardSixVisibility = false;

  bool showFab = false;

  void incrementcard() {
    setState(() {
      if (addCard == 0) {
        cardOneVisibility = true;
      } else if (addCard == 1) {
        cardOneVisibility = true;
        cardTwoVisibility = true;
      } else if (addCard == 2) {
        cardOneVisibility = true;
        cardTwoVisibility = true;
        cardThreeVisibility = true;
      } else if (addCard == 3) {
        cardOneVisibility = true;
        cardTwoVisibility = true;
        cardThreeVisibility = true;
        cardFourVisibility = true;
      } else if (addCard == 4) {
        cardOneVisibility = true;
        cardTwoVisibility = true;
        cardThreeVisibility = true;
        cardFourVisibility = true;
        cardFiveVisibility = true;
      } else if (addCard == 5) {
        cardOneVisibility = true;
        cardTwoVisibility = true;
        cardThreeVisibility = true;
        cardFourVisibility = true;
        cardFiveVisibility = true;
        cardSixVisibility = true;
      }
      addCard++;
    });
  }

  @override
  Widget build(BuildContext context) {
    final bool keyboardIsOpen = MediaQuery.of(context).viewInsets.bottom != 0;
    return Scaffold(
      resizeToAvoidBottomInset: true,
      appBar: AppBar(
        title: const Text('Card with TextformField'),
      ),
      floatingActionButton: Visibility(
        visible: !keyboardIsOpen,
        child: FloatingActionButton(
          onPressed: addCard >= 6 ? null : incrementcard,
          child: const Icon(Icons.add),
        ),
      ),
      body: ListView(
        shrinkWrap: true,
        physics: const ScrollPhysics(),
        children: [
          Visibility(visible: cardOneVisibility, child: cardslist(0)),
          Visibility(visible: cardTwoVisibility, child: cardslist(1)),
          Visibility(visible: cardThreeVisibility, child: cardslist(2)),
          Visibility(visible: cardFourVisibility, child: cardslist(3)),
          Visibility(visible: cardFiveVisibility, child: cardslist(4)),
          Visibility(visible: cardSixVisibility, child: cardslist(5)),
        ],
      ),
    );
  }

  Widget cardslist(int index) {
    if (name.length <= index) {
      name.add(TextEditingController(text: ""));
      id.add(TextEditingController(text: ""));
    }
    return Card(
      margin: EdgeInsets.all(10),
      child: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Container(
                  margin: EdgeInsets.all(10), child: Text('Team Name: ')),
              Expanded(
                child: TextFormField(
                  controller: name[index],
                  decoration: InputDecoration(hintText: 'Team Name'),
                ),
              ),
              Container(
                margin: EdgeInsets.all(10),
                child: Text('Team Id: '),
              ),
              Expanded(
                child: TextFormField(
                  controller: id[index],
                  decoration: InputDecoration(hintText: 'Team Id'),
                ),
              ),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              GestureDetector(
                child: Container(
                  width: 50,
                  height: 50,
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    shape: BoxShape.rectangle,
                    color: Colors.grey,
                  ),
                  child: Center(
                    child: Text('IT'),
                  ),
                ),
              ),
              GestureDetector(
                child: Container(
                  width: 50,
                  height: 50,
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    shape: BoxShape.rectangle,
                    color: Colors.grey,
                  ),
                  child: Center(
                    child: Text('DEV'),
                  ),
                ),
              ),
              GestureDetector(
                child: Container(
                  width: 50,
                  height: 50,
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    shape: BoxShape.rectangle,
                    color: Colors.grey,
                  ),
                  child: Center(
                    child: Text('TEST'),
                  ),
                ),
              ),
              GestureDetector(
                child: Container(
                  width: 50,
                  height: 50,
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    shape: BoxShape.rectangle,
                    color: Colors.grey,
                  ),
                  child: Center(
                    child: Text('HR'),
                  ),
                ),
              ),
            ],
          )
        ],
      ),
    );
  }
}

score 0 · Answer 2 · answered Mar 23 '23 at 17:42

To hide the FloatingActionButton when opening the keyboard, I use this:

floatingActionButton: MediaQuery.of(context).viewInsets.bottom != 0 ? null : FloatingActionButton(
  // FloatingActionButton code
)

As written in this answer, MediaQuery.of(context).viewInsets.bottom detects when the keyboard is opened or not.

Using MediaQuery, the screen will be rebuilt automatically when that value changes, so when the keyboard is closed, the floatingActionButton is rendered, instead, when user opens the keyboard, the floatingActionButton will be null.

How to hide FloatingActionButton under keyboard and not textformfield in flutter?

2 Answers2

Linked