Linked dropboxes. Changing the selected value of the first, triggers the items replacement of the second

linked_dropboxes.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({Key? key, required this.title}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  Category? selectedCategory;
  Subcategory? selectedSubcategory;
  List<DropdownMenuItem<Category>>? categoryItems;
  List<DropdownMenuItem<Subcategory>>? subCategoryItems;

  @override
  initState() {
    super.initState();
    categoryItems = data()
        .map((json) => Category.fromJson(json))
        .map((cat) => DropdownMenuItem(child: Text(cat.name), value: cat))
        .toList();
    subCategoryItems = [];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            DropdownButton<Category>(
              value: selectedCategory,
              items: categoryItems,
              hint: Text("Select category name"),
              onChanged: (cat) {
                setState(() {
                  selectedCategory = cat;
                  
                  // Set subcat value to null or else there will be
                  // no change after the first category selection
                  // caused by the conflict between value and items 
                  // of the subcat dropdown.
                  selectedSubcategory = null;
                  subCategoryItems = cat?.subcategories
                      .map((subCat) => DropdownMenuItem(
                            child: Text(subCat.name),
                            value: subCat,
                          ))
                      .toList();
                });
              },
            ),
            DropdownButton<Subcategory>(
              value: selectedSubcategory,
              items: subCategoryItems,
              hint: Text("Select subcategory name"),
              onChanged: (subCat) {
                setState(() {
                  selectedSubcategory = subCat;
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}

class Category {
  String name = "<Empty>";
  List<Subcategory> subcategories = [];

  Category.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    if (json['subcategories'] != null) {
      json['subcategories'].forEach((v) {
        subcategories.add(new Subcategory.fromJson(v));
      });
    }
  }
}

class Subcategory {
  String name = "<Empty>";

  Subcategory.fromJson(Map<String, dynamic> json) {
    name = json['name'];
  }
}

List<Map<String, dynamic>> data() => [
      {
        "name": "cat 1",
        "subcategories": [
          {"name": "subcat 11"},
          {"name": "subcat 12"},
          {"name": "subcat 13"}
        ]
      },
      {
        "name": "cat 2",
        "subcategories": [
          {"name": "subcat 21"},
          {"name": "subcat 22"}
        ]
      }
    ];