SampleDropdownButtonApp

main.dart

import 'package:flutter/material.dart';

const List<String> firstList = <String>["a", "b"];
const Map<String,List<String>> secondDataMap =
    {
      "a": ["1", "2", "3"],"b": ["4", "5", "6"]
    };

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> {

  String firstValue = firstList.first;
  
  List<String> secondDataList = [];
  String secondValue = "";
  
  @override
  initState(){
    secondDataList = secondDataMap['a']!;
    secondValue = secondDataList.first;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: [
      SizedBox(
        width: 100,
        height: 50,
        child: DropdownButton<String>(
          value: firstValue,
          icon: const Icon(Icons.arrow_downward),
          elevation: 16,
          style: const TextStyle(color: Colors.deepPurple),
          underline: Container(
            height: 2,
            color: Colors.deepPurpleAccent,
          ),
          onChanged: (String? value) {
            // This is called when the user selects an item.
            setState(() {
              firstValue = value!;
              // change second List data
              secondDataList = secondDataMap[firstValue]!;
              secondValue = secondDataList.first;
            });
          },
          items: firstList.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
      ),
      SizedBox(
        width: 100,
        height: 50,
        child: DropdownButton<String>(
          value: secondValue,
          icon: const Icon(Icons.arrow_downward),
          elevation: 16,
          style: const TextStyle(color: Colors.deepPurple),
          underline: Container(
            height: 2,
            color: Colors.deepPurpleAccent,
          ),
          onChanged: (String? value) {
            // This is called when the user selects an item.
            setState(() {
              secondValue = value!;
            });
          },
          items: secondDataList.map<DropdownMenuItem<String>>((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
        ),
      ),
    ]);
  }
}