android - 具有可见性的下拉菜单项给我项目之间的空白

Question

我希望用户从下拉菜单中选择他的地区，之后，另一个下拉菜单将显示该地区的确切城市，但是当我实现可见性小部件时，它给了我空白

我试图解决这个问题的是使用 Visibility Widgets，创建一个新列表。

  @override
  void initState() {
    super.initState();
    // * Load Data
    _loadCityData();
 }

// * City Data
  List<Map> _citiesList;

  Future _loadCityData() async {
    String jsonCities = await 
                   rootBundle.loadString("assets/json/cities.json");
    setState(() {
      _citiesList = List<Map>.from(jsonDecode(jsonCities) as List);
   });
 }

  Widget _buildCitiesRun(BuildContext context) {
    return DropdownButtonHideUnderline(
      child: DropdownButton<String>(
        hint: Text(
          AppLocalizations.of(context).translate('Select City'),
          style: normalBlack,
        ),
        isExpanded: true,
        style: editBoxLabel,
        value: _selectedCity,
        isDense: true,
        onChanged: (String newValue) {
          setState(() {
            _selectedCity = newValue;
            print('Selected City $_selectedCity');
          });
        },
        items: _citiesList.map((cities) {
          return DropdownMenuItem<String>(
            value: cities.toString(),
            child: Visibility(
              visible: _selectedRegion == cities["region_name"] ? true  
                                                                : false,
              child: Row(
                children: <Widget>[
                  // lanCode() is to get device language code
                  Text(
                    cities["name"][lanCode()].toString(),
                    style: normalBlack,
                    textAlign: TextAlign.center,
                   ),
                ],
              ),
            ),
          );
        }).toList(),
      ),
    );
  }

来自 JSON 文件的示例。

地区：

[
       {
        "region_id" : 4,
        "name" : {
            "ar" : "حائل",
            "en" : "Hail"
        }
    },
    {
        "region_id" : 5,
        "name" : {
            "ar" : "القصيم",
            "en" : "Al Qassim"
        }
    },
    {
        "region_id" : 6,
        "name" : {
            "ar" : "الرياض",
            "en" : "Ar Riyadh"
        }
    },
    {
        "region_id" : 7,
        "name" : {
            "ar" : "المدينة المنورة",
            "en" : "Al Madinah"
        }
    }
]

城市：

[
  {
     "city_id" : 295,
     "region_name" : "Ar Riyadh",
     "name" : {
          "ar" : "حفر العتك",
          "en" : "Hafr Al Atk"
      }
  },
  {
      "city_id" : 296,
      "region_name" : "Ar Riyadh",
      "name" : {
          "ar" : "المزيرع",
          "en" : "Al Muzayri"
      }
  },
  {
      "city_id" : 297,
      "region_name" : "Ar Riyadh",
      "name" : {
          "ar" : "شوية",
          "en" : "Shawyah"
      }
  },
  {
      "city_id" : 306,
      "region_name" : "Ar Riyadh",
      "name" : {
          "ar" : "الغاط",
          "en" : "Al Ghat"
      }
  },
  {
      "city_id" : 307,
      "region_name" : "Ar Riyadh",
      "name" : {
          "ar" : "مليح",
          "en" : "Mulayh"
      }
  },
]

请参考我下面的截图。

它不应该有任何空白。谢谢。

标签： androidflutter