How to hide FloatingActionButton under keyboard and not textformfield in flutter? - 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'),),
),
),
],
)
],
),
),
);
}
}

Answer 1

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'),
),
),
),
],
)
],
),
);
}
}