Flutter- How to Get the Firebase Options Value in Text Instead Of the ID

Question

I trying to select the options value that retrieved from Firebase (A1) but why the hint value that displayed in text field is along with the text value of the option that selected instead of change the hint value into selected text value (A1) only? So, how can I make the hint change and display in the text value (A1) only and how to save the text value (A1) not the document id of the option that selected into another Firebase? Appreciate those help, thank you.

Code:

    String? selectedValue;
    
 StreamBuilder<QuerySnapshot<Map<String, dynamic>>> numberPlateField() {
    return StreamBuilder(
        stream: FirebaseFirestore.instance
            .collection('vehicle_options')
            .orderBy("number plate")
            .snapshots(),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Center(
              child: Text("Some error occured ${snapshot.error}"),
            );
          }
          List<DropdownMenuItem> optionItems = [];
          if (!snapshot.hasData) {
            return const CircularProgressIndicator();
          } else {
            final selectNumberPlate = snapshot.data?.docs.reversed.toList();
            if (selectNumberPlate != null) {
              for (var option in selectNumberPlate) {
                optionItems.add(
                  DropdownMenuItem(
                    value: option.id,
                    child: Text(option['number plate']),
                  ),
                );
              }
              optionItems.add(
                const DropdownMenuItem(
                  value: "new",
                  child: Text('Add new value'),
                ),
              );
            }
          }
          return InputField(
            title: 'Plate Number',
            hint: 'Please select your number plate',
            child: Expanded(
              child: DropdownButton(
                underline: const SizedBox(),
                isExpanded: true,
                value: selectedValue,
                items: optionItems,
                onChanged: (value) {
                  if (value == 'new') {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: ((context) => const AddVehiclePage()),
                      ),
                    );
                  } else {
                    setState(() {
                      selectedValue = value;
                    });
                  }
                },
                icon: const Icon(Icons.confirmation_number,
                    size: 32, color: Colors.grey),
                elevation: 6,
                borderRadius: BorderRadius.circular(15),
              ),
            ),
          );
        });
  }

Custom Input Field Code

class InputField extends StatelessWidget {
  final String title;
  final String hint;
  final TextEditingController? controller;
  final Widget? child;
  const InputField(
      {super.key,
      required this.title,
      required this.hint,
      this.controller,
      this.child});

  @override
  Widget build(BuildContext context) {
    // ignore: avoid_unnecessary_containers
    return Container(
      margin: const EdgeInsets.only(top: 16),
      child: Column(
        // place the text on the start
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: titleStyle,
          ),
          // gap between title and field container
          Container(
            height: 52,
            margin: const EdgeInsets.only(top: 8.0),
            padding: const EdgeInsets.only(left: 14),
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.grey,
                width: 1.00,
              ),
              borderRadius: BorderRadius.circular(12),
            ),
            child: Row(
              children: [
                Expanded(
                  child: TextFormField(
                    // if there is a widget come from add_task_bar.dart, we want to read only and clickable but not typable
                    readOnly: child == null ? false : true,
                    autofocus: true,
                    cursorColor:
                        Get.isDarkMode ? Colors.grey[100] : Colors.grey[700],
                    controller: controller,
                    style: subTitleStyle,
                    decoration: InputDecoration(
                      hintText: hint,
                      hintStyle: subTitleStyle,
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(
                            color: context.theme.scaffoldBackgroundColor,
                            width: 0),
                      ),
                      // remove the bottom border line shadow
                      enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(
                            color: context.theme.scaffoldBackgroundColor,
                            width: 0),
                      ),
                    ),
                  ),
                ),
                child == null ? Container() : Container(child: child),
              ],
            ),
          )
        ],
      ),
    );
  }
}

Flutter doctor

Sample:

1. Before Selecting Option

2. After Selecting Option