Dart Flutter dropDownMenu selected item not visible

Question

I want the item I selected from dropDownMenu to be changed by default. How can I do it? The code I wrote is not working.

Code:

import 'package:flutter/material.dart';
import 'package:flutter_emoji/flutter_emoji.dart';

class arayuzEkrani extends StatefulWidget {

  @override
  State<arayuzEkrani> createState() => _arayuzEkraniState();
}

class _arayuzEkraniState extends State<arayuzEkrani> {
  Map countryFlags = {"usa": "🇺🇸", "turkey": "🇹🇷", "italy": "🇮🇹", "germany": "🇩🇪", "france": "🇫🇷", "spain": "🇪🇸"}; 

  var defaultFlag = "🇺🇸";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        leading: Icon(Icons.public, color: Colors.black, size: 27,),

        title: Text("Learn words", style: TextStyle(color: Colors.black),),
        elevation: 0,

        actions: [
          DropdownButton(
            items: countryFlags.keys.map((country) {
              return DropdownMenuItem(
                child: Text(countryFlags[country]),
                value: defaultFlag,
              );
            }).toList(),
            onChanged: (country) {
              setState(() {
                defaultFlag = countryFlags[country];
                print(country);

              });
            },
          )
        ],
      ),
    );
  }
}

Also coming to the console are:

E/flutter (11954):
E/flutter (11954): [ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: type 'Null' is not a subtype of type 'String'
E/flutter (11954): #0      _arayuzEkraniState.build.<anonymous closure>.<anonymous closure>
package:kelimeogrenmeuygulamasi/arayuzEkrani.dart:35
E/flutter (11954): #1      State.setState
package:flutter/…/widgets/framework.dart:1088

My goal is to select a country via dropDownButton.

Answer 1

Check this out i have used your code and created an example for you :

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: MyApp()));
}

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

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  Map<String, String> countryFlags = {
    "usa": "🇺🇸",
    "turkey": "🇹🇷",
    "italy": "🇮🇹",
    "germany": "🇩🇪",
    "france": "🇫🇷",
    "spain": "🇪🇸"
  };

  var defaultFlag = "🇺🇸";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        leading: const Icon(
          Icons.public,
          color: Colors.black,
          size: 27,
        ),
        title: const Text(
          "Learn words",
          style: TextStyle(color: Colors.black),
        ),
        elevation: 0,
        actions: [
          DropdownButton<String>(
            items: countryFlags
                .map((country, flag) {
                  return MapEntry(
                      country,
                      DropdownMenuItem<String>(
                        value: flag,
                        child: Text(flag),
                      ));
                })
                .values
                .toList(),
            value: defaultFlag,
            onChanged: (String? country) {
              setState(() {
                defaultFlag = country!;
              });
            },
          )
        ],
      ),
    );
  }
}

Check out and let me know if it works.

Answer 2

Here is the example for Dropdown:

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 MaterialApp(
    title: 'Flutter DropDownButton',
    theme: ThemeData(
        primarySwatch: Colors.green,
    ),
    home: const MyHomePage(),
    debugShowCheckedModeBanner: false,
    );
}
}

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

@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
    
// Initial Selected Value
String dropdownvalue = 'Item 1';

// List of items in our dropdown menu
var items = [   
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
];
@override
Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
        title: const Text("Geeksforgeeks"),
    ),
    body: Center(
        child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
            DropdownButton(
                
            // Initial Value
            value: dropdownvalue,
                
            // Down Arrow Icon
            icon: const Icon(Icons.keyboard_arrow_down),    
                
            // Array list of items
            items: items.map((String items) {
                return DropdownMenuItem(
                value: items,
                child: Text(items),
                );
            }).toList(),
            // After selecting the desired option,it will
            // change button value to selected value
            onChanged: (String? newValue) {
                setState(() {
                dropdownvalue = newValue!;
                });
            },
            ),
        ],
        ),
    ),
    );
}
}