Flutter颜色选择器插件flutter_csc_picker的使用

flutter_csc_picker

一个用于显示选定国家、州（省）和城市的Flutter包。

使用

在pubspec.yaml文件中添加flutter_csc_picker作为依赖项即可使用此包。

FlutterCSCPicker(
  layout: Layout.vertical, // 设置布局为垂直方向
  onCountryChanged: (value) { // 国家选择回调
    setState(() {
      countryValue = value; // 更新国家值
    });
  },
  onStateChanged: (value) { // 州（省）选择回调
    setState(() {
      stateValue = value; // 更新州（省）值
    });
  },
  onCityChanged: (value) { // 城市选择回调
    setState(() {
      cityValue = value; // 更新城市值
    });
  },
)

示例

以下是一个完整的示例代码，展示如何在Flutter应用中使用flutter_csc_picker。

import 'package:flutter/material.dart';
import 'package:flutter_csc_picker/flutter_csc_picker.dart'; // 导入flutter_csc_picker包

void main() {
  runApp(const MyApp()); // 启动应用
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp( // 创建MaterialApp
      title: 'Flutter CSC Picker', // 应用标题
      theme: ThemeData(
        primarySwatch: Colors.blue, // 主色调
        visualDensity: VisualDensity.adaptivePlatformDensity, // 自适应密度
      ),
      debugShowCheckedModeBanner: false, // 隐藏调试标志
      home: const HomeScreen(), // 设置主页
    );
  }
}

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

  [@override](/user/override)
  _HomeScreenState createState() => _HomeScreenState(); // 创建状态管理类
}

class _HomeScreenState extends State<HomeScreen> {
  String countryValue = ""; // 存储国家值
  String stateValue = ""; // 存储州（省）值
  String cityValue = ""; // 存储城市值

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold( // 创建Scaffold布局
      appBar: AppBar( // 添加AppBar
        title: const Text("Flutter CSC Picker"), // 设置标题
      ),
      body: Container( // 包裹主内容
        padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10), // 添加内边距
        height: 600, // 设置高度
        child: Column( // 使用Column布局
          children: [
            /// 添加Flutter CSC Picker控件
            FlutterCSCPicker(
              /// 设置布局为垂直方向
              layout: Layout.vertical,
              /// 禁用国家标题
              isCountyTitle: false,
              /// 禁用州（省）标题
              isStateTitle: false,
              /// 禁用城市标题
              isCityTitle: false,
              /// 国家选择回调
              onCountryChanged: (value) {
                setState(() {
                  countryValue = value; // 更新国家值
                });
              },
              /// 州（省）选择回调
              onStateChanged: (value) {
                setState(() {
                  stateValue = value; // 更新州（省）值
                });
              },
              /// 城市选择回调
              onCityChanged: (value) {
                setState(() {
                  cityValue = value; // 更新城市值
                });
              },
            ),
          ],
        ),
      ),
    );
  }
}