DropdownMenu doesn't display selected item when clearing the search text and unfocusing about flutter HOT 3 OPEN

So mabye the dropdown menu claborated with the d.f file so it gdlitched?

from flutter.

The DropdownMenu should display the item that is selected when the DropdownMenu text field has no text and loses focus.

@andrew-moreno You mean to say if I had selected cat, deleted it manually and unfocused from the field and then try to validate, it should show cat again ?
If so, do you know if the expected behavior matches with any native platform ?

from flutter.

@andrew-moreno hello i think you should try this.

To achieve the expected behavior, you need to make a couple of adjustments to your code:

1.Display the selected value when the DropdownMenu text field has no text and loses focus.
2.Set a breakpoint in the validation function and validate the DropdownMenu selection.

Here is the modified code hope it will help you

SAMPLE CODE:
import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);

@OverRide
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);

@OverRide
State createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
final _formKey = GlobalKey();
static const List animals = ["Cat", "Dog", "Raccoon", "Eagle"];
String? _selectedAnimal;

@OverRide
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Form(
key: _formKey,
child: FormField(
validator: (value) {
if (value == null || value.isEmpty) {
return "Please select an animal";
}
return null;
},
builder: (state) {
return DropdownButtonFormField(
value: _selectedAnimal,
items: animals
.map((animal) =>
DropdownMenuItem(value: animal, child: Text(animal)))
.toList(),
onChanged: (value) {
setState(() {
_selectedAnimal = value;
});
state.didChange(value);
},
onSaved: (value) {
_selectedAnimal = value;
},
validator: (value) {
if (value == null || value.isEmpty) {
return "Please select an animal";
}
return null;
},
decoration: InputDecoration(
labelText: "Select an animal",
border: OutlineInputBorder(),
),
);
},
),
),
TextButton(
onPressed: () {
_formKey.currentState!.validate();
// Set a breakpoint here to validate the DropdownMenu selection
},
child: const Text("Validate"),
),
],
),
),
);
}
}

Explanation of the provided code:
1.I replaced DropdownMenu with DropdownButtonFormField for a simpler and more standard dropdown implementation in Flutter.
2.I added a _selectedAnimal variable to keep track of the selected animal.
3.Modified the DropdownButtonFormField to use _selectedAnimal as the value and updated it when the selection changes.
4.Added validation for the dropdown to ensure an animal is selected before form submission.
5.Set a breakpoint in the validation function where indicated. This breakpoint will be triggered when you press the "Validate" button.

from flutter.