Value not selected in dropdown flutter

Question

I tried to make a dropdown in Flutter and I have adjusted it to the documentation from Flutter and also tried from the article but when I try it in my application when I select one of the values I want it doesn't appear, I have to click again and the new selected data appears. how do i solve this?

 List listItem = [
    'Transkrip Sementara',
    'KHS',
  ];
  String? selectedValue;

in widget

return Scaffold(
      appBar: AppBar(
        backgroundColor: primaryColor,
        title: const Center(
          child: Text(
            'Transkrip Nilai',
          ),
        ),
        actions: [
          IconButton(
            icon: const Icon(Icons.print),
            onPressed: () {
              showDialog(
                context: context,
                builder: (context) {
                  return Dialog(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8),
                    ),
                    elevation: 5,
                    child: SizedBox(
                      width: double.infinity,
                      child: Padding(
                        padding: const EdgeInsets.all(14),
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Center(
                              child: Text(
                                'Cetak Transkrip/KHS',
                                style: bold5,
                              ),
                            ),
                            const Divider(),
                            Text(
                              'Pilih Jenis Transkrip',
                              style: regular5,
                            ),
                            Container(
                              width: double.infinity,
                              height: 50,
                              decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(8),
                                border: Border.all(
                                  color: Colors.grey,
                                ),
                              ),
                              child: Padding(
                                padding: const EdgeInsets.all(8.0),
                                child: DropdownButtonHideUnderline(
                                  child: DropdownButton<String>(
                                    hint: const Text('Pilih Jenis Transkrip'),
                                    value: selectedValue,
                                    onChanged: (newValue) {
                                      setState(() {
                                        selectedValue = newValue;
                                      });
                                    },
                                    items: listItem.map((valueItem) {
                                      return DropdownMenuItem<String>(
                                        value: valueItem,
                                        child: Text(
                                          valueItem,
                                        ),
                                      );
                                    }).toList(),
                                  ),
                                ),
                              ),
                            ),

Answer 1

use StatefulBuilder

read this for reference: https://api.flutter.dev/flutter/widgets/StatefulBuilder-class.html

showDialog(
  context: context,
  builder: (context) {
    return Dialog(
       shape: RoundedRectangleBorder(
       borderRadius: BorderRadius.circular(8),
       child: StatefulBuilder( // add this to your code
        builder: (BuildContext context, StateSetter setState) {
          return Your content dialog
.....