core114
Reputation: 5325
flutter radio button select show hide
I'm beginner to flutter, I have some conflict on the show and hide flutter radio button select after display text filed, anyone know how to display when i select yes and then display remark text filed
here the my code
class MyBookPage extends StatefulWidget {
final BookDetails _bookDetails;
MyBookPage(this._bookDetails);
@override
MyBookPageState createState() {
return MyBookPageState();
}
}
class MyBookPageState extends State<MyBookPage> {
final _formKey = GlobalKey<FormState>();
final TextEditingController _textNameController = new TextEditingController();
final TextEditingController _textPhoneController =
new TextEditingController();
String _selectBookType = "";
String title;
@override
void initState() {
_textNameController.text = widget._bookDetails.fullName;
}
@override
Widget build(BuildContext context) {
return BlocBuilder<LoginCubit, LoginState>(
builder: (context, state) {
return Scaffold(
appBar: AppBar(
title: Text("Add New Book"),
),
body: Container(
margin: EdgeInsets.symmetric(horizontal: 0, vertical: 0),
padding: const EdgeInsets.all(20.0),
child: SingleChildScrollView(
child: bookForm(context),
),
),
);
},
);
}
Widget bookForm(BuildContext context) {
final format = DateFormat("yyyy-MM-dd");
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 10,),
FormBuilderRadio( activeColor: Colors.deepOrange,
decoration: InputDecoration(
labelText: 'Please Select Book type \*',
hintText: 'Please select book',
border: OutlineInputBorder(),
filled: true,
),
attribute: "book_type",
validators: [
FormBuilderValidators.required(),
],
options: [
"Yes",
"No",
]
.map((lang) => FormBuilderFieldOption(
value: lang,
child: Text(
lang,
),
))
.toList(growable: false),
),
SizedBox(height: 15,),
TextFormField(
keyboardType: TextInputType.multiline,
maxLines: 4,
maxLength: 100,
/* controller: _textNameController,*/
decoration: const InputDecoration(
hintText: ' please add here the reason',
labelText: 'Select Reason',
border: OutlineInputBorder(),
),
validator: (value) {
if (value.isEmpty) {
return 'Please add remark ';
}
return null;
},
),
SizedBox(height: 10,),
SafeArea(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: Container(
height: 80,
width: double.infinity,
padding: EdgeInsets.all(16),
child: FlatButton(
onPressed: () {
{
AwesomeDialog(
context: context,
animType: AnimType.LEFTSLIDE,
headerAnimationLoop: true,
dialogType: DialogType.SUCCES,
title: 'Successfully Submitted',
desc:
'Your data has been successfully submitted',
btnOkOnPress: () {
debugPrint('OnClcik');
},
btnOkIcon: Icons.check_circle,
onDissmissCallback: () {
debugPrint('Dialog Dissmiss from callback');
})
..show();
}
// It returns true if the form is valid, otherwise returns false
/* if (_formKey.currentState.validate()) {
print(_textPhoneController.value.text +
"->" +
_selectLeadType);
// If the form is valid, display a Snackbar.
Scaffold.of(context)
.showSnackBar(SnackBar(content: Text('Data is in processing.')));
}*/
},
child: Text("SUBMIT",style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),),
color: m_primaryColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4),
),
),
),
),
)
,
],
),
);
}
}
Upvotes: 1
Views: 3304
Answers (1)
Ravi Singh Lodhi
Reputation: 2793
You can use the Visibility widget. It takes in a bool value. Initially, you can set it to false & the widget will not be visible & once you click on the radio button, you can call setState & change the boolean value to true inside the onChanged callback. This will show the input field.
Also, in the library, it says that FormBuilderRadio is deprecated so please use FormBuilderRadioGroup.
class MyBookPage extends StatefulWidget {
final BookDetails _bookDetails;
MyBookPage(this._bookDetails);
@override
MyBookPageState createState() {
return MyBookPageState();
}
}
class MyBookPageState extends State<MyBookPage> {
final _formKey = GlobalKey<FormState>();
final TextEditingController _textNameController = new TextEditingController();
final TextEditingController _textPhoneController =
new TextEditingController();
String _selectBookType = "";
String title;
bool isVisible = false; // New <----------
@override
void initState() {
_textNameController.text = widget._bookDetails.fullName;
}
@override
Widget build(BuildContext context) {
return BlocBuilder<LoginCubit, LoginState>(
builder: (context, state) {
return Scaffold(
appBar: AppBar(
title: Text("Add New Book"),
),
body: Container(
margin: EdgeInsets.symmetric(horizontal: 0, vertical: 0),
padding: const EdgeInsets.all(20.0),
child: SingleChildScrollView(
child: bookForm(context),
),
),
);
},
);
}
Widget bookForm(BuildContext context) {
final format = DateFormat("yyyy-MM-dd");
return Form(
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 10,),
FormBuilderRadioGroup( activeColor: Colors.deepOrange, // New <----------
decoration: InputDecoration(
labelText: 'Please Select Book type \*',
hintText: 'Please select book',
border: OutlineInputBorder(),
filled: true,
),
attribute: "book_type",
validators: [
FormBuilderValidators.required(),
],
onChanged: (value) { // New <----------
if (value == "Yes") {
setState((){
isVisible = true;
});
} else {
setState(() {
isVisible = false;
});
}
},
options: [
"Yes",
"No",
]
.map((lang) => FormBuilderFieldOption(
value: lang,
child: Text(
lang,
),
))
.toList(growable: false),
),
SizedBox(height: 15,),
Visibility(visible: isVisible, // New <----------
child: TextFormField(
keyboardType: TextInputType.multiline,
maxLines: 4,
maxLength: 100,
/* controller: _textNameController,*/
decoration: const InputDecoration(
hintText: ' please add here the reason',
labelText: 'Select Reason',
border: OutlineInputBorder(),
),
validator: (value) {
if (value.isEmpty) {
return 'Please add remark ';
}
return null;
},
),
),
SizedBox(height: 10,),
SafeArea(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: Container(
height: 80,
width: double.infinity,
padding: EdgeInsets.all(16),
child: FlatButton(
onPressed: () {
{
AwesomeDialog(
context: context,
animType: AnimType.LEFTSLIDE,
headerAnimationLoop: true,
dialogType: DialogType.SUCCES,
title: 'Successfully Submitted',
desc:
'Your data has been successfully submitted',
btnOkOnPress: () {
debugPrint('OnClcik');
},
btnOkIcon: Icons.check_circle,
onDissmissCallback: () {
debugPrint('Dialog Dissmiss from callback');
})
..show();
}
// It returns true if the form is valid, otherwise returns false
/* if (_formKey.currentState.validate()) {
print(_textPhoneController.value.text +
"->" +
_selectLeadType);
// If the form is valid, display a Snackbar.
Scaffold.of(context)
.showSnackBar(SnackBar(content: Text('Data is in processing.')));
}*/
},
child: Text("SUBMIT",style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),),
color: m_primaryColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(4),
),
),
),
),
)
,
],
),
);
}
}
Upvotes: 5
Related Questions
- Radio button not changing the selection in Flutter
- How to unselect a radio button in flutter?
- Trouble with flutter radio button
- how to show a text field when a specific radio button is selected in flutter?
- Flutter unselect RadioListTile buttons
- How to unselect RadioListTile Flutter
- Flutter Radio Button not showing that it is selected
- Flutter toggle Radio widget
- Flutter one time choice radio buttons
- Flutter radio button custom to select single item