How to hide/show widgets using radio buttons in flutter - flutter

Question

I have a simple app that I am trying to hide or different widgets when a user clicks on yes or no, but when I select Yes or No all the two widgets are shown instead of only showing one when yes is clicked and No when no is clicked and hide Yes or vice versa,
This is what I have done so far
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
// Hide the debug banner
debugShowCheckedModeBanner: false,
title: 'Show Hide Widgets',
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
// The inital group value
bool visibilityTag = false;
bool visibilityObs = false;
void _changed(bool visibility, String field) {
setState(() {
if (field == "no"){
visibilityTag = visibility;
}
if (field == "yes"){
visibilityObs = visibility;
}
});
}
String _selectedGender = 'None';
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(
'Show Hide Widgets',
),
),
body: Padding(
padding: EdgeInsets.all(25),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Please pick one:'),
ListTile(
leading: Radio(
value: 'Yes',
groupValue: _selectedGender,
onChanged: (value) {
setState(() {
_selectedGender = value as String;
visibilityObs ? null : _changed(true, "yes");
});
},
),
title: Text('Yes'),
),
ListTile(
leading: Radio(
value: 'no',
groupValue: _selectedGender,
onChanged: (value) {
setState(() {
_selectedItem = value as String;
visibilityTag ? null : _changed(true, "no");
});
},
),
title: Text('No'),
),
SizedBox(height: 25),
visibilityObs ? new Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Expanded(
flex: 11,
child: new TextField(
maxLines: 1,
style: Theme.of(context).textTheme.headline6,
decoration: new InputDecoration(
labelText: "Yes",
isDense: true
),
),
),
new Expanded(
flex: 1,
child: new IconButton(
color: Colors.grey[400],
icon: const Icon(Icons.cancel, size: 22.0,),
onPressed: () {
_changed(false, "yes");
},
),
),
],
) : new Container(),
visibilityTag ? new Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
new Expanded(
flex: 11,
child: new TextField(
maxLines: 1,
style: Theme.of(context).textTheme.title,
decoration: new InputDecoration(
labelText: "yesno",
isDense: true
),
),
),
new Expanded(
flex: 1,
child: new IconButton(
color: Colors.grey[400],
icon: const Icon(Icons.cancel, size: 22.0,),
onPressed: () {
_changed(false, "no");
},
),
),
],
) : new Container(),
],
)),
);
}
How can I only show the a widget when yes is clicked, and no when no is clicked and Hide the previous yes selected?

Answer 1

From the example in docs:
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const Center(
child: MyStatefulWidget(),
),
),
);
}
}
enum SingingCharacter { lafayette, jefferson }
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
#override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
SingingCharacter? _character = SingingCharacter.lafayette;
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
ListTile(
title: const Text('Lafayette'),
leading: Radio<SingingCharacter>(
value: SingingCharacter.lafayette,
groupValue: _character,
onChanged: (SingingCharacter? value) {
setState(() {
_character = value;
});
},
),
),
ListTile(
title: const Text('Thomas Jefferson'),
leading: Radio<SingingCharacter>(
value: SingingCharacter.jefferson,
groupValue: _character,
onChanged: (SingingCharacter? value) {
setState(() {
_character = value;
});
},
),
),
// -------------------------
_character == SingingCharacter.jefferson
? const ListTile(
title: Text('Something goes here!'),
)
: Container(),
// ----------------------
],
);
}
}