How to make a widget available after a selection in dropdown? - flutter

Question

I want to create a card after a user makes a selection in drop down how to achieve this in flutter. The UI model is given below.
The first card is like a permanent one but the second card should appear after if there is any change in the dropdown button.
The lower card should be scrollable and the size should be dynamic like a listview. if the Key and data increases the value should increase.
The Code I have used for creating the app bar and the 1st card is here.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
toolbarHeight: 75,
title: Center(
child: Text(
'Flutter App',
style: GoogleFonts.lato(
textStyle:
TextStyle(fontWeight: FontWeight.bold, fontSize: 26)),
),
),
),
body: ListView(children: [
Column(
children: [
Container(
height: 250,
child: Column(children: [
Card(
child: Column(
children: [
Row(children: [
Padding(
padding: EdgeInsets.only(left: 30, top: 15),
child: Text(
'Text here',
style: GoogleFonts.poppins(
textStyle: TextStyle(
fontWeight: FontWeight.w700,
fontSize: 37,
)),
textAlign: TextAlign.left,
),
),
]),
Padding(
padding: EdgeInsets.only(top: 30),
child: Text(
'Some text here',
style: GoogleFonts.lato(
textStyle: TextStyle(fontSize: 18)),
),
),
Padding(
padding: EdgeInsets.only(top: 30),
child: DropdownButton(
items: markets
.map<DropdownMenuItem<String>>((String val) {
return DropdownMenuItem<String>(
value: val, child: Text(val));
}).toList(),
onChanged: (sto) {
setState(() {
_mySelection = sto;
});
retrievedata.getPrice(_mySelection);
},
value: _mySelection,
hint: Text('Hint text here'),
),
),
],
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
margin: EdgeInsets.all(10),
),
]),
),
],
),
]),
);
}

Answer 1

You can wrap the Card that should appear after dropDownChanges to Visibility widget.
Add this variable
bool _isVisible = false;
Make changes to DropdownButton
DropdownButton(
...
onChanged: (sto) {
setState(() {
_mySelection = sto;
_isVisible = true;
});
retrievedata.getPrice(_mySelection);
},
...
),
Wrap the Card with Visiblity
Visibility (
visible: _isVisible,
child: Card(
child: ....
),
),
If you want the card to be always visible and enable interaction only after the DropdownButton changes, wrap the card to IgnorePointer instead of visibility.

Answer 2

You can achieve this by having an additional state that is responsible for visibility of second card. Something like this:
final visible = false;
#override
Widget build(BuildContext context) {
return
...
onChanged: (sto) {
setState(() {
_mySelection = sto;
visible = true;
});
retrievedata.getPrice(_mySelection);
},
...
And later on we can make the second card visible based on this value:
visible ? SecondCard(
...
) : SizedBox.shrink()
This ensures that nothing is shown until visible is set to true