Neelu Modanwal
Reputation: 87
How to TextField hide/show click on the text in flutter
I have an Alert dialog in which have three option, I want to that when I click on the text(Enter RC Number) once the below TextField will be shown and again click on text(Enter RC Number) second-time the below TextField hide and (the below TextField will be hidden by default) how to do this please suggest to me.
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main()=> runApp(MyHomePages());
class MyHomePages extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "KYC Formm",
theme: ThemeData(
primarySwatch: Colors.green,
),
home: MyHomePageDesign(title: "Kyc form"),
);
}
}
class MyHomePageDesign extends StatefulWidget {
MyHomePageDesign({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePageDesign> {
var _isVisible = false ;
TextEditingController phoneController = new TextEditingController();
@override
void initState() {
// TODO: implement initState
super.initState();
setState(() {
});
}
_displayDialog(BuildContext context) async {
return showDialog(
barrierDismissible: true,
context: context,
builder: (context) {
return AlertDialog(
title: Text('Choose any one'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text("Capture Photo",
style: TextStyle(
fontSize: 20.0,
),
),
),
SizedBox(height: 10.0,),
Align(
alignment: Alignment.centerLeft,
child: Text("Pick Photo",
style: TextStyle(
fontSize: 20.0,
),
),
),
SizedBox(height: 10.0,),
Align(
alignment: Alignment.centerLeft,
child: InkWell(
onTap: (){
setState(() {
// _isVisible = !_isVisible;
// if(_isVisible){
// _isVisible=true;
// }else{
// _isVisible=false;
// }
});
},
child: Text("Enter RC Number",
style: TextStyle(
fontSize: 20.0,
),
),
),
),
SizedBox(height: 10.0,),
Visibility(
visible: _isVisible,
child: Align(
alignment: Alignment.centerLeft,
child: Container(
width: 200.0,
height: 60.0,
padding: const EdgeInsets.only(top: 10.0, left: 0.0,bottom: 10.0,right: 0.0),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Enter RC No',
),
style: TextStyle(
color: Colors.red,
fontSize: 18.0,
),
),
),
),
),
Align(
alignment: Alignment.centerRight,
child: new FlatButton(
child: new Text('OK',
style: TextStyle(
color: Colors.teal
),),
onPressed: () {
Navigator.of(context).pop();
},
),
)
],
),
);
// );
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Demo'),
),
body: Center(
child:Container(
width: 160.0,
height: 50.0,
padding: const EdgeInsets.only(top: 0.0, left: 5.0,bottom: 10.0,right: 0.0),
child: RaisedButton(
color: Colors.green,
child: Text('Open Dialog'),
onPressed: () {
_displayDialog(context);
},
),
),
),
);
}
}
Upvotes: 3
Views: 2868
Answers (2)
Alok
Reputation: 8998
Answer 2.0
Your code seems fine, the problem was AlertDialog doesn't rebuild, even if the value is changing. So in order to see the changes, the solution is StatefulBuilder which has to be there to wrap your AlertDialog, it will help your Widget to rebuild
showDialog(
context: context,
builder: (context) {
String contentText = "Content of Dialog";
return StatefulBuilder(
builder: (context, setState) {
return AlertDialog();
}
);
)
Now, let us jump into the code. I have used your code only with some error rectifications, so you can simply copy-paste the code, and see the result
Please Note: I have demonstrated your _displayDialog(), since it had the issue. So just use this in your code, and rest your code will do
void _displayDialog(BuildContext context) async {
return showDialog(
barrierDismissible: true,
context: context,
builder: (context) {
// this was required, rest is same
return StatefulBuilder(
builder: (BuildContext context, setState){
return AlertDialog(
title: Text('Choose any one'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text("Capture Photo",
style: TextStyle(
fontSize: 20.0,
),
),
),
SizedBox(height: 10.0,),
Align(
alignment: Alignment.centerLeft,
child: Text("Pick Photo",
style: TextStyle(
fontSize: 20.0,
),
),
),
SizedBox(height: 10.0,),
Align(
alignment: Alignment.centerLeft,
child: InkWell(
onTap: (){
setState(() => _isVisible = !_isVisible);
},
child: Text("Enter RC Number",
style: TextStyle(
fontSize: 20.0,
),
),
),
),
SizedBox(height: 10.0,),
Visibility(
visible: _isVisible,
child: Align(
alignment: Alignment.centerLeft,
child: Container(
width: 200.0,
height: 60.0,
padding: const EdgeInsets.only(top: 10.0, left: 0.0,bottom: 10.0,right: 0.0),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Enter RC No',
),
style: TextStyle(
color: Colors.red,
fontSize: 18.0,
),
),
),
),
),
Align(
alignment: Alignment.centerRight,
child: new FlatButton(
child: new Text('OK',
style: TextStyle(
color: Colors.teal
),),
onPressed: () {
Navigator.of(context).pop();
},
),
)
]
)
);
}
);
});
}
RESULT
Upvotes: 1
Mobina
Reputation: 7109
Since the changes should place in the dialog, you need to use a StatefullBuilder. Also, you need to call setState() when changing the visibility in the dialog so that the changes apply to it.
_toggleVisibility() { // this is new
setState(() {
_isVisible = !_isVisible;
});
}
_unsetVisibility() { // this is new, used when closing the dialog
setState(() {
_isVisible = false;
});
}
_displayDialog(BuildContext context) async {
return showDialog(
barrierDismissible: true,
context: context,
builder: (context) {
return StatefulBuilder(builder: (context, setState) { // this is new
return AlertDialog(
title: Text('Choose any one'),
content: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: Text(
"Capture Photo",
style: TextStyle(
fontSize: 20.0,
),
),
),
SizedBox(
height: 10.0,
),
Align(
alignment: Alignment.centerLeft,
child: Text(
"Pick Photo",
style: TextStyle(
fontSize: 20.0,
),
),
),
SizedBox(
height: 10.0,
),
Align(
alignment: Alignment.centerLeft,
child: InkWell(
onTap: () {
_toggleVisibility(); // this is new
setState(() {}); // this is new
},
child: Text(
"Enter RC Number",
style: TextStyle(
fontSize: 20.0,
),
),
),
),
SizedBox(
height: 10.0,
),
Visibility(
visible: _isVisible,
child: Align(
alignment: Alignment.centerLeft,
child: Container(
width: 200.0,
height: 60.0,
padding: const EdgeInsets.only(
top: 10.0, left: 0.0, bottom: 10.0, right: 0.0),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Enter RC No',
),
style: TextStyle(
color: Colors.red,
fontSize: 18.0,
),
),
),
),
),
Align(
alignment: Alignment.centerRight,
child: new FlatButton(
child: new Text(
'OK',
style: TextStyle(color: Colors.teal),
),
onPressed: () {
_unsetVisibility(); // this is new
Navigator.of(context).pop();
},
),
)
],
),
);
});
});
}
Upvotes: 1
Related Questions
- Flutter How to always hide keyboard when click on TextField but keep focus(Keep show cursor)
- Click button Show/hide TextField
- TextField not accept text on first click Flutter
- When entering text into the TextField, display the button, otherwise do not display in Flutter
- how to hide and show specific text when click on it using flutter
- How to show TextField when button is pressed?
- make TextField enable after button click not work flutter
- Flutter TextField hide by Keyboard
- How to toggle text of button on click in flutter?
- Hide Text Widget visibility in Flutter on the click of button