Flutter选择器插件psgc_picker的使用

Flutter选择器插件psgc_picker的使用

该插件用于列出所有地区、省份、城市、直辖市和街区。这些数据基于菲律宾标准地理代码（Philippine Standard Geographic Codes）。

安装

在 pubspec.yaml 文件的 dependencies: 部分添加以下行：

dependencies:
  psgc_picker: <latest_version>

使用

以下是使用 psgc_picker 的完整示例代码：

import 'package:flutter/material.dart';
import 'package:psgc_picker/psgc_picker.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: PsgcPicker(
            // 设置各个级别的标签
            regionLabel: 'Region',
            provinceLabel: 'Province',
            cityLabel: 'City/Municipality',
            
            // 设置默认选中的值
            selectedRegion: 'CALABARZON',
            selectedProvince: 'RIZAL',
            selectedCity: 'CAINTA',
            
            // 设置间距
            spacing: 10,

            // 添加事件处理函数，用于获取选中的值
            onRegionChanged: (value) => {
              // 当区域改变时，打印选中的值
              print(value)
            },
            onProvinceChanged: (value) => {
              // 当省份改变时，打印选中的值
              print(value)
            },
            onCityChanged: (value) => {
              // 当城市改变时，打印选中的值
              print(value)
            },
          ),
        ),
      ),
    );
  }
}

更多关于Flutter选择器插件psgc_picker的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter选择器插件psgc_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


psgc_picker 是一个 Flutter 插件，用于在应用中选择菲律宾的地理区域（如省、市、镇等）。它基于菲律宾标准地理代码（Philippine Standard Geographic Code, PSGC）构建，可以帮助开发者轻松地实现地理位置选择功能。

以下是如何在 Flutter 项目中使用 psgc_picker 插件的步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 psgc_picker 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  psgc_picker: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 以获取依赖。

2. 导入包

在需要使用 psgc_picker 的 Dart 文件中导入包：

import 'package:psgc_picker/psgc_picker.dart';

3. 使用 PSGCPicker

psgc_picker 提供了一个简单的接口来选择省、市、镇等地理位置。以下是一个基本的使用示例：

class LocationPicker extends StatefulWidget {
  [@override](/user/override)
  _LocationPickerState createState() => _LocationPickerState();
}

class _LocationPickerState extends State<LocationPicker> {
  String? selectedProvince;
  String? selectedCity;
  String? selectedBarangay;

  Future<void> _pickLocation() async {
    final location = await showPSGCPicker(
      context: context,
    );

    if (location != null) {
      setState(() {
        selectedProvince = location.province;
        selectedCity = location.city;
        selectedBarangay = location.barangay;
      });
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PSGC Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Selected Province: ${selectedProvince ?? "None"}'),
            Text('Selected City: ${selectedCity ?? "None"}'),
            Text('Selected Barangay: ${selectedBarangay ?? "None"}'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickLocation,
              child: Text('Pick Location'),
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部