How to keep selected value in dropdown after click button - flutter

Question

I want to keep the selected value visible after the users click the connect button. How do I keep the selected value in this dropdown still appear when the user has clicked the connect button? This is the preview of my application:
And this is my code:
StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance
.collection('servers')
.snapshots(includeMetadataChanges: true),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) {
return Text('Something went wrong');
}
if (snapshot.connectionState == ConnectionState.waiting) {
return Text("Loading");
}
return Container(
child: DropdownSearch<String>(
dropdownDecoratorProps: DropDownDecoratorProps(
dropdownSearchDecoration: InputDecoration(
labelText: "Server",
labelStyle: TextStyle(color: Color(0xFFB4F4C8)),
hintText: "Select a server",
hintStyle: TextStyle(color: Color(0xFFB4F4C8)),
icon: Icon(
Icons.map_outlined,
color: Color(0xFFB4F4C8),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Color(0xFFB4F4C8)),
borderRadius: BorderRadius.circular(10.0),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xFFB4F4C8)),
borderRadius: BorderRadius.circular(8.0)),
),
),
dropdownBuilder: ((context, selectedItem) {
Icon(Icons.arrow_drop_down_circle_outlined,
color: Color(0xFFB4F4C8),
);
return Text(selectedItem ?? "",
style: TextStyle(color: Color(0xFFfcfcfc)),
);
}),
items: snapshot.data!.docs.map((DocumentSnapshot document) {
Map<String, dynamic> data = document.data()! as Map<String, dynamic>;
return data["address"];
})
.toList()
.cast<String>(),
onChanged: (var data) {
dataAddress = data;
}
),
);
},
),
Thank you in advance for any help.

Answer 1

It looks like you are not using showSearchBox: true on DropdownSearch widget.
Although docs shows that we can use dropdownDecoratorProps: DropDownDecoratorProps but in your case it seems it is not needed as there aren't many dropdown search fields.
Hence I have used it without those Props in my below code.
I have tried below code at my end i am able to list drop down. Here is the screenshot of my app :
main.dart with DropDownWidget :
class DropDownWidget extends StatefulWidget {
const DropDownWidget({Key? key}) : super(key: key);
#override
State<DropDownWidget> createState() => _DropDownWidgetState();
}
class _DropDownWidgetState extends State<DropDownWidget> {
String? dataAddress;
final snappy = FirebaseFirestore.instance
.collection('users')
.snapshots(includeMetadataChanges: true);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('AppBar Demo')),
body: StreamBuilder<QuerySnapshot>(
stream: snappy,
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) {
return const Text('Something went wrong');
}
if (snapshot.connectionState == ConnectionState.waiting) {
return const Text("Loading");
}
return DropdownSearch<String>(
dropdownSearchDecoration: const InputDecoration(
labelText: "Server",
hintText: "Select a server",
),
dropdownBuilder: ((context, selectedItem) {
const Icon(
Icons.arrow_drop_down_circle_outlined,
);
return Text(selectedItem ?? "");
}),
items: snapshot.data!.docs
.map((DocumentSnapshot document) {
Map<String, dynamic> data =
document.data()! as Map<String, dynamic>;
return data["address"];
})
.toList()
.cast<String>(),
onChanged: (var data) {
dataAddress = data;
});
},
),
);
}
}