Dropdownbutton with int and string value

I'm trying to make a dropdownbutton with int and string value in it, but I don't know how to call both string and int at the same time.

code

 int selectedValue = 10;

 List<DropdownMenuItem<int>> dropdownItems = [
  DropdownMenuItem(
   value: 10,
   child: Text(
     'Small',
     style: TextStyle(
       fontSize: 20,
       fontFamily: 'Inconsolata',
       fontWeight: FontWeight.bold,
       color: Color(0xCBFDC4AB),
     ),
   ),
 ),
 const DropdownMenuItem(
   value: 20,
   child: Text(
     'Medium',
     style: TextStyle(
       fontSize: 20,
       fontFamily: 'Inconsolata',
       fontWeight: FontWeight.bold,
       color: Color(0xCBFDC4AB),
     ),
   ),
 ),
 const DropdownMenuItem(
   value: 30,
   child: Text(
     'Large',
     style: TextStyle(
       fontSize: 20,
       fontFamily: 'Inconsolata',
       fontWeight: FontWeight.bold,
       color: Color(0xCBFDC4AB),
     ),
   ),
 ),
];'

// the text with int value

     Text(
                          "\$$selectedValue",
                          style: const TextStyle(
                            fontSize: 40,
                            fontFamily: 'Inconsolata',
                            fontWeight: FontWeight.bold,
                            color: Color(0xADFFF0E8),
                          ),
                        ),

// the text with string value

    Text (value),

// dropdownbutton

      DropdownButton(
                              value: selectedValue,
                              items: dropdownItems,
                              dropdownColor: Colors.brown,
                              underline: Container(
                                height: 3,
                                color: const Color(0xCBFDC4AB),
                              ),
                              icon: Icon(
                                CupertinoIcons.arrowtriangle_down_fill,
                                color: const Color(0xCBFDC4AB),
                                size: 10,
                                shadows: [
                                  Shadow(
                                    color: Colors.yellow.withOpacity(0.9),
                                    blurRadius: 10,
                                  )
                                ],
                              ),

                              onChanged: (int? newValue) {
                                setState(() {
                                  selectedValue = newValue!;
                                });
                              },
                            ),

I want the child text to be the string value, and the value of the dropdownitem would be tre int value.

Thank you.

import 'package:flutter/material.dart';

/// Flutter code sample for [DropdownButton].

void main() => runApp(const DropdownButtonApp());

class DropdownButtonApp extends StatelessWidget {
  const DropdownButtonApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('DropdownButton Sample')),
        body: const Center(
          child: DropdownButtonExample(),
        ),
      ),
    );
  }
}

class DropdownButtonExample extends StatefulWidget {
  const DropdownButtonExample({super.key});

  @override
  State<DropdownButtonExample> createState() => _DropdownButtonExampleState();
}

class _DropdownButtonExampleState extends State<DropdownButtonExample> {
  int dropdownValue = list.first;
  int? selectedValue;

  @override
  Widget build(BuildContext context) {
    /// use either option 1 or option 2

    /// options 1
    List<DropdownData> dropdownItems = [
      DropdownData(10, 'Small'),
      DropdownData(20, 'Medium'),
      DropdownData(30, 'Large'),
    ];

    /// options 2
    List<EnumSize> dropdownItems = [
      EnumSize.small,
      EnumSize.medium,
      EnumSize.large,
    ];

    return DropdownButton(
      value: selectedValue,
      items: dropdownItems
          .map<DropdownMenuItem<int>>((e) => DropdownMenuItem(
                value: e.value,
                child: Text(
                  e.label,
                  style: const TextStyle(
                    fontSize: 20,
                    fontFamily: 'Inconsolata',
                    fontWeight: FontWeight.bold,
                    color: Color(0xCBFDC4AB),
                  ),
                ),
              ))
          .toList(),
      dropdownColor: Colors.brown,
      underline: Container(
        height: 3,
        color: const Color(0xCBFDC4AB),
      ),
      icon: const Icon(Icons.arrow_downward),
      onChanged: (int? newValue) {
        setState(() {
          selectedValue = newValue!;
          print([newValue, newValue.runtimeType]);
        });
      },
    );
  }
}

class DropdownData {
  final int value;
  final String label;
  DropdownData(this.value, this.label);
}

enum EnumSize {
  small(10, 'Small'),
  medium(20, 'Medium'),
  large(30, 'Large');

  final int value;
  final String label;
  const EnumSize(this.value, this.label);
}

• Explain

DropdownButton(
    items : ... /// require `List<DropdownMenuItem<int>>`
)

• So basically it's a list of a DropdownMenuItem with value of int

DropdownButton(
    items : dropdownItems // loop through list `dropdownItems`
          .map<DropdownMenuItem<int>>((e) => DropdownMenuItem( /// return a `DropdownMenuItem`
                value: e.value, /// with value of `int`
                child: Text( /// and a child `Widget`
                  e.label, // label of child `Widget`
                  style: const TextStyle(
                    fontSize: 20,
                    fontFamily: 'Inconsolata',
                    fontWeight: FontWeight.bold,
                    color: Color(0xCBFDC4AB),
                  ),
                ),
              ))
          .toList(), because `.map()` return a `Iterable` but we need a `List`
)

• Learn more: you should reach out the document of DropdownButton. They provide an example and explanation with video.