flutter 切换城市

话不多说，看图

点击省切换到对应省，点击市，选择市，县级可多选

话不多说，看代码

import 'package:flutter/material.dart';

class AreaModel {
  final String id;
  final String name;
  final List<AreaModel>? childs;

  AreaModel(this.id, this.name, this.childs);

  factory AreaModel.fromMap(Map<String, dynamic> map) {
    final id = map['id'] as String;
    final name = map['name'] as String;
    final List<AreaModel>? childs = (map['childs'] as List?)?.map((childMap) {
      return AreaModel.fromMap(childMap);
    }).toList();

    return AreaModel(id, name, childs);
  }
}

class LocationFilterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LocationSelectionPage();
  }
}

class LocationSelectionPage extends StatefulWidget {
  @override
  _LocationSelectionPageState createState() => _LocationSelectionPageState();
}

class _LocationSelectionPageState extends State<LocationSelectionPage> {
  AreaModel? selectedProvince;
  AreaModel? selectedCity;
  AreaModel? selectedDistrict;
  List<AreaModel> selectedDistricts = [];

  @override
  void initState() {
    super.initState();
    // 默认选择第一个省份及其第一个城市和第一个区县
    if (provinces.isNotEmpty) {
      if (homeG.showarea == true) {
        if (homeG.city.length > 0) {
          for (var province in provinces) {
            for (var city in province.childs!) {
              if (city.name == homeG.city) {
                setState(() {
                  selectedProvince = province;
                  selectedCity = city;
                  for (var districtName in homeG.area) {
                    for (var district in city.childs!) {
                      if (district.name == districtName) {
                        selectedDistricts.add(district);
                        print('selectedDistricts${selectedDistricts}');
                      }
                    }
                  }
                });
                return;
              }
            }
          }
        }
      } else {
        selectedProvince = provinces[0];
        if (selectedProvince!.childs != null &&
            selectedProvince!.childs!.isNotEmpty) {
          selectedCity = selectedProvince!.childs![0];
          if (selectedCity!.childs!.length > 0) {
            if (selectedCity!.childs != null &&
                selectedCity!.childs!.isNotEmpty) {
              selectedDistrict = selectedCity!.childs![0];
            }
          }
        }
      }
    }
  }

  void saveSelectedValues() {
    List<String> selectedDistrictNames =
        selectedDistricts.map((district) => district.name).toList();
    homeG.city = selectedCity!.name;
    homeG.area = selectedDistrictNames;
    homeG.showarea = true;
    Navigator.pop(context, '刷新');
  }

  void resetSelection() {
    setState(() {
      // 重置按钮点击事件处理
      selectedDistricts.clear();
      selectedProvince = provinces.isNotEmpty ? provinces[0] : null;
      selectedCity =
          selectedProvince != null && selectedProvince!.childs!.isNotEmpty
              ? selectedProvince!.childs![0]
              : null;
      if (selectedCity!.childs!.length > 0) {
        selectedDistrict =
            selectedCity != null && selectedCity!.childs!.isNotEmpty
                ? selectedCity!.childs![0]
                : null;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(
            Icons.arrow_back_ios,
            size: 17,
            color: AppColors.blackColor,
          ),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        backgroundColor: Colors.transparent,
        elevation: 0,
        centerTitle: true,
        title: Text('切换城市', style: CustomTextStyle.primaryTitle_1),
      ),
      body: Container(
        color: Color(0xFFF4F5F9),
        width: double.infinity,
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: [
            Expanded(
              flex: 9,
              child: buildSelectionRow(),
            ),
            Expanded(
              flex: 1,
              child: Container(
                padding: EdgeInsets.fromLTRB(12, 8, 12, 8),
                decoration: BoxDecoration(
                  color: Color(0xFFFFFFFF),
                  border: Border(
                    top: BorderSide(width: 0.5, color: Color(0xFFEEEEEE)),
                  ),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    InkWell(
                      onTap: () {
                        setState(() {
                          resetSelection();
                        });
                      },
                      child: Container(
                        width: 113,
                        height: 44,
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(4),
                          color: Color(0xFFF7F7F7),
                        ),
                        child: Text(
                          '重置',
                          style: CustomTextStyle.text16_5,
                        ),
                      ),
                    ),
                    InkWell(
                      onTap: () {
                        saveSelectedValues();
                      },
                      child: Container(
                        width: 222,
                        height: 44,
                        alignment: Alignment.center,
                        decoration: BoxDecorationLoginStyle.primary1Box,
                        child: Text(
                          '确定',
                          style: CustomTextStyle.text16_6,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget buildSelectionRow() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Expanded(
            flex: 1,
            child: Container(
              color: Colors.white,
              child:
                  buildSelectionList(provinces, selectedProvince, (selected) {
                setState(() {
                  selectedProvince = selected;
                  selectedCity = selectedProvince!.childs![0];
                  selectedDistrict = selectedCity!.childs![0];
                  selectedDistricts = [];
                });
              }),
            )),
        Expanded(
            flex: 1,
            child: Container(
              decoration: BoxDecoration(
                color: Color(0xFFF4F5F9),
              ),
              child: buildSelectionList1(
                  selectedProvince?.childs ?? [], selectedCity, (selected) {
                setState(() {
                  selectedCity = selected;
                  if (selectedCity!.childs!.length > 0) {
                    selectedDistrict = selectedCity!.childs![0];
                    selectedDistricts = [];
                  }
                  List<String> selectedDistrictNames = selectedDistricts
                      .map((district) => district.name)
                      .toList();
                });
              }),
            )),
        Expanded(
            flex: 1,
            child: Container(
              decoration: BoxDecoration(
                  color: Color(0xFFF4F5F9),
                  border: Border(
                      left: BorderSide(width: 0.5, color: Color(0xFFE4E8F8)))),
              child: buildSelectionLists(
                  selectedCity?.childs ?? [], selectedDistrict, (selected) {
                setState(() {
                  selectedDistrict = selected;
                  if (selectedDistricts.contains(selectedDistrict)) {
                    selectedDistricts.remove(selectedDistrict);
                  } else {
                    selectedDistricts.add(selectedDistrict!);
                  }
                  List<String> selectedDistrictNames = selectedDistricts
                      .map((district) => district.name)
                      .toList();
                });
              }),
            ))
      ],
    );
  }

  Widget buildSelectionLists(List<AreaModel> items, AreaModel? selected,
      Function(AreaModel) onItemSelected) {
    return Container(
      // height: 500,
      child: ListView.builder(
        itemCount: items.length,
        shrinkWrap: true,
        itemBuilder: (context, index) {
          final item = items[index];
          return ListTile(
            title: Text(
              item.name,
              style: selectedDistricts.contains(item)
                  ? CustomTextStyle.text22_1
                  : CustomTextStyle.text16_2,
            ),
            onTap: () {
              onItemSelected(item);
            },
          );
        },
      ),
    );
  }

  Widget buildSelectionList(List<AreaModel> items, AreaModel? selected,
      Function(AreaModel) onItemSelected) {
    return Container(
        // height: 500,
        child: ListView.builder(
      itemCount: items.length,
      shrinkWrap: true,
      itemBuilder: (context, index) {
        final item = items[index];
        final isSelected = item == selected;
        return ListTile(
          title: Text(
            item.name,
            style: isSelected
                ? CustomTextStyle.text22_1
                : CustomTextStyle.text16_2,
          ),
          onTap: () {
            onItemSelected(item);
          },
        );
      },
    ));
  }

  Widget buildSelectionList1(List<AreaModel> items, AreaModel? selected,
      Function(AreaModel) onItemSelected) {
    return Container(
        child: ListView.builder(
      itemCount: items.length,
      shrinkWrap: true,
      itemBuilder: (context, index) {
        final item = items[index];
        final isSelected = item == selected;
        return ListTile(
          title: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Container(
                width: 80,
                child: Text(
                  item.name,
                  softWrap: true,
                  style: isSelected
                      ? CustomTextStyle.text22_1
                      : CustomTextStyle.text16_2,
                ),
              ),
              if (isSelected)
                Container(
                  width: 18,
                  height: 18,
                  alignment: Alignment.center,
                  decoration: BoxDecorationStyle1.primaryFFD32367Box,
                  child: Text(
                      selectedDistricts.length == 0
                          ? '全'
                          : '${selectedDistricts.length}',
                      style: CustomTextStyle.text12_4),
                ),
            ],
          ),
          onTap: () {
            onItemSelected(item);
          },
        );
      },
    ));
  }
}

省市县地区代码，私