如何在下拉中显示嵌套依赖的动态数据？

Question

我有一个JSON数据，我想将其显示在下拉菜单中，以便最初的一个下拉列表将显示名称，然后选择它应该显示孩子下拉菜，每个孩子下拉菜也都有自己的孩子。

class LocationDetail {
  final String name;
  final String id;
  final String categoryId;
  final List<LocationDetail>? childrens;

  const LocationDetail({
    required this.name,
    required this.id,
    required this.categoryId,
    this.childrens,
  });

  Map<String, dynamic> toMap() {
    return {
      'name': name,
      'id': id,
      'categoryId': categoryId,
      'childrens': childrens,
    };
  }

  factory LocationDetail.fromMap(Map<String, dynamic> map) {
    List<LocationDetail> childrens = [];
    if (map['childrens'] != null) {
      map['childrens'].forEach((v) {
        childrens.add(LocationDetail.fromMap(v));
      });
    }
    return LocationDetail(
      name: map['name'] as String,
      id: map['id'] as String,
      categoryId: map['categoryId'] as String,
      childrens: childrens,
    );
  }
} 

这是位置。json数据

[
  {
    "name": "NewYork",
    "id": "NY",
    "categoryId": "A",
    "childrens": [
      {
        "name": "Rental Car 1",
        "id": "NY-Rental Car1",
        "categoryId": "T1"
      },
      {
        "name": "Rental Car 2",
        "id": "NY-Rental Car2",
        "categoryId": "T2",
        "childrens": [
          {
            "name": "Rental Car 21",
            "id": "NY-Rental Car21",
            "categoryId": "T21"
          },
          {
            "name": "Rental Car 22",
            "id": "NY-Rental Car22",
            "categoryId": "T22"
          }
        ]
      }
    ]
  }
]

这是我正在阅读JSON并转换为“位置尾巴

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

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: FutureBuilder<List<LocationDetail>>(
        future: _getJsonData(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            // all the  drop down will come here
          } else if (snapshot.hasError) {
            return Center(
              child: Text(snapshot.error.toString()),
            );
          } else {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
    );
  }

  Future<List<LocationDetail>> _getJsonData() async {
    final contents = await rootBundle.loadString(
      'assets/location.json',
    );
    List<dynamic> dataList = jsonDecode(contents);
    List<LocationDetail> locationList =
        dataList.map((v) => LocationDetail.fromMap(v)).toList();
    return locationList;
  }
}

预期输出”列表的方式：

1. 最初只有一个下拉列表应显示仅包含 newyork 的下拉列表。
2. 选择 nework 时，应该再显示一个下拉菜单，其中包含租车1 和租车2 。
3. 如果选择租车1 ，则什么都不应发生，因为这是最后一个节点。
4. 如果选择租车2 再下一个下拉订单应显示租车21 或租车22 。
5. 在我们到达结束之前，也应该发生同样的事情。

PS谢谢