Taiwan City Picker #

台灣縣市選擇器，可以自訂樣式。

Features #

• 設定座標由近到遠顯示
• 縣市區黑名單、白名單控制顯示
• 大小寫臺、台切換
• 選項顯示郵遞區號
• 英文語系
• 文字輸入搜尋
• 框線樣式設定
• 水平和垂直佈局
• 自訂 Builder
• 提供 Controller 控制器

Options #

基本設定 #

Layout #

Style #

功能設定 #

Location #

Filter #

Default Value #

Custom UI Builder #

使用範例 #

基本使用 #

TaiwanCityPicker(
  onChange: (ChangeType changeType, SelectedCounty? county, SelectedDistrict? district) {
    print('changeType: $changeType');
    print('county: $county');
    print('district: $district');
  },
)

Vertical (垂直 Layout) #

TaiwanCityPicker(
  layoutDirection: LayoutDirection.vertical,
  onChange: (ChangeType changeType, SelectedCounty? county, SelectedDistrict? district) {},
)

Custom Border (框線設定) #

TaiwanCityPicker(
  border: OutlineInputBorder(
    borderRadius: BorderRadius.circular(12),
    borderSide: BorderSide(color: Colors.blue, width: 2),
  ),
  onChange: (ChangeType changeType, SelectedCounty? county, SelectedDistrict? district) {},
)

Location Sorting (距離由近到遠排序) #

TaiwanCityPicker(
  latitude: 24.0541621,   // 台中市緯度
  longitude: 120.6478417, // 台中市經度
  onChange: (ChangeType changeType, SelectedCounty? county, SelectedDistrict? district) {},
)

Whitelist Zip Code (只顯示樹林、龜山) #

TaiwanCityPicker(
  whitelistZipCode: [238, 333], // 樹林區、龜山區
  onChange: (ChangeType changeType, SelectedCounty? county, SelectedDistrict? district) {},
)

Blacklist County (不顯示外島縣市) #

TaiwanCityPicker(
  blacklistCountyCode: ['09007', '10016', '09020'], // 金門、連江、澎湖
  onChange: (ChangeType changeType, SelectedCounty? county, SelectedDistrict? district) {},
)

Variant Chinese characters (異體字) #

TaiwanCityPicker(
  defaultZipCode: 950,
  stdWord: false,
  onChange: (ChangeType changeType, SelectedCounty? county, SelectedDistrict? district) {},
)

Default County Code (預設臺中市) #

TaiwanCityPicker(
  defaultCountyCode: '66000', // 臺中市代碼
  onChange: (ChangeType changeType, SelectedCounty? county, SelectedDistrict? district) {},
)

Default Zip Code (預設信義區 110) #

TaiwanCityPicker(
  defaultZipCode: 110, // 信義區郵遞區號
  onChange: (ChangeType changeType, SelectedCounty? county, SelectedDistrict? district) {},
)

Searchable Mode #

TaiwanCityPicker(
  searchable: true, // 啟用搜尋功能
  onChange: (ChangeType changeType, SelectedCounty? county, SelectedDistrict? district) {},
)

Controller Methods (控制器操作) #

final TaiwanCityPickerController controller = TaiwanCityPickerController();

TaiwanCityPicker(
  controller: controller,
  onChange: (ChangeType changeType, SelectedCounty? county, SelectedDistrict? district) {},
)

ElevatedButton(
  onPressed: () => controller.setCountyCode('64000'),
  child: Text('設定高雄市'),
),
ElevatedButton(
  onPressed: () => controller.setZipCode(238),
  child: Text('設定樹林區'),
),
ElevatedButton(
  onPressed: () => controller.reset(),
  child: Text('清空'),
),

English Mode (英文) #

TaiwanCityPicker(
  layoutDirection: LayoutDirection.vertical,
  language: Language.enUS,
  showZipCode: true,
  onChange: (ChangeType changeType, SelectedCounty? county, SelectedDistrict? district) {},
)

Only County (只需要縣市選擇) #

TaiwanCityPicker(
  onlyCounty: true,
  onChange: (ChangeType changeType, SelectedCounty? county, SelectedDistrict? district) {},
)

Custom Builder 1 (自訂樣式 1) #

TaiwanCityPicker(
  countyBuilder:
      (
        BuildContext context,
        List<TaiwanCityModel> counties,
        TaiwanCityModel? selectedCounty,
        void Function(TaiwanCityModel?) onCountySelected,
        String hintText,
      ) {
        return Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(colors: [Colors.blue, Colors.lightBlue]),
            borderRadius: BorderRadius.circular(12),
          ),
          child: Row(
            children: [
              Padding(
                padding: EdgeInsets.all(12),
                child: Icon(Icons.location_city, color: Colors.white),
              ),
              Expanded(
                child: DropdownButton<TaiwanCityModel>(
                  value: selectedCounty,
                  hint: Text(hintText, style: TextStyle(color: Colors.white)),
                  isExpanded: true,
                  underline: SizedBox.shrink(),
                  dropdownColor: Colors.blue,
                  items: counties.map((county) {
                    return DropdownMenuItem<TaiwanCityModel>(
                      value: county,
                      child: Text(county.countyName, style: TextStyle(color: Colors.white)),
                    );
                  }).toList(),
                  onChanged: onCountySelected,
                ),
              ),
            ],
          ),
        );
      },
  districtBuilder:
      (
        BuildContext context,
        List<TaiwanCityModel> districts,
        TaiwanCityModel? selectedDistrict,
        void Function(TaiwanCityModel?)? onDistrictSelected,
        String hintText,
        bool enabled,
      ) {
        return Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: enabled ? [Colors.green, Colors.lightGreen] : [Colors.grey.shade500, Colors.grey.shade500],
            ),
            borderRadius: BorderRadius.circular(12),
          ),
          child: Row(
            children: [
              Padding(
                padding: EdgeInsets.all(12),
                child: Icon(Icons.location_on, color: enabled ? Colors.white : Colors.grey.shade100),
              ),
              Expanded(
                child: DropdownButton<TaiwanCityModel>(
                  iconDisabledColor: Colors.grey.shade100,
                  value: selectedDistrict,
                  hint: Text(hintText, style: TextStyle(color: enabled ? Colors.white : Colors.grey.shade100)),
                  isExpanded: true,
                  underline: SizedBox.shrink(),
                  dropdownColor: Colors.green,
                  items: enabled
                      ? districts
                            .map(
                              (district) => DropdownMenuItem<TaiwanCityModel>(
                                value: district,
                                child: Text('${district.townName} (${district.zipCode})', style: TextStyle(color: Colors.white)),
                              ),
                            )
                            .toList()
                      : null,
                  onChanged: enabled ? onDistrictSelected : null,
                ),
              ),
            ],
          ),
        );
      },
  layoutBuilder: (BuildContext context, Widget countyWidget, Widget districtWidget) {
    return Card(
      elevation: 3,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Column(crossAxisAlignment: CrossAxisAlignment.start, spacing: 12, children: [countyWidget, districtWidget]),
      ),
    );
  },
)

Custom Builder 2 (自訂樣式 2) #

TaiwanCityPicker(
  defaultCountyCode: '63000',
  countyBuilder:
      (
        BuildContext context,
        List<TaiwanCityModel> counties,
        TaiwanCityModel? selectedCounty,
        void Function(TaiwanCityModel?) onCountySelected,
        String hintText,
      ) {
        return SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: SegmentedButton<TaiwanCityModel>(
            segments: counties.map((county) {
              return ButtonSegment<TaiwanCityModel>(
                value: county,
                label: Text(county.countyName, style: TextStyle(fontSize: 12)),
              );
            }).toList(),
            emptySelectionAllowed: true,
            selected: selectedCounty != null ? {selectedCounty} : {},
            onSelectionChanged: (Set<TaiwanCityModel> selection) {
              onCountySelected(selection.isNotEmpty ? selection.first : null);
            },
            multiSelectionEnabled: false,
            showSelectedIcon: false,
          ),
        );
      },
  districtBuilder:
      (
        BuildContext context,
        List<TaiwanCityModel> districts,
        TaiwanCityModel? selectedDistrict,
        void Function(TaiwanCityModel?)? onDistrictSelected,
        String hintText,
        bool enabled,
      ) {
        return Expanded(
          child: ListView(
            children: districts.map((district) {
              return RadioListTile<TaiwanCityModel>(
                title: Text('(${district.zipCode}) ${district.townName}'),
                value: district,
                contentPadding: EdgeInsets.zero,
                groupValue: selectedDistrict,
                onChanged: enabled ? onDistrictSelected : null,
              );
            }).toList(),
          ),
        );
      },
  layoutBuilder: (BuildContext context, Widget countyWidget, Widget districtWidget) {
    return SizedBox(
      height: 500,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [SizedBox(height: 8), countyWidget, SizedBox(height: 8), districtWidget],
      ),
    );
  },
  onChange: (ChangeType changeType, SelectedCounty? county, SelectedDistrict? district) {},
)

資料來源 #

3碼郵遞區號與行政區地理座標對照KML