Flutter日期选择器插件dgst_selector的使用

Flutter日期选择器插件dgst_selector的使用

提供了与可单选或多选项目列表绑定的自定义TypeAhead。多选时，可以选择以基于id的chips形式显示。

使用方法

首先，我们需要创建一个初始化项列表：

final List<DgstSelectionItem> initItems = [
    const DgstSelectionItem(id: 1, name: 'Item 1'),
    const DgstSelectionItem(id: 2, name: 'Item 2')
];

然后，在你的应用中使用DgstSelector组件：

DgstSelector(
    title: 'Single-Selector', // 单选器标题
    sourceCallback: testCallback(), // 数据源回调
    initialSelectedItems: initItems, // 初始选中的项目
    onSelectedItemsChanged: (value) => print(' > Selected Item Changed < : $value'), // 选中项变化时的回调
)

对于多选器，可以设置dgstSelectorType为DgstSelectorType.MULTI_SELECTOR：

DgstSelector(
    title: 'Multi-Selector', // 多选器标题
    dgstSelectorType: DgstSelectorType.MULTI_SELECTOR, // 设置为多选模式
    sourceCallback: testCallback(), // 数据源回调
    initialSelectedItems: initItems, // 初始选中的项目
    onSelectedItemsChanged: (value) => print(' > Selected Items Changed < : $value'), // 选中项变化时的回调
)

完整示例

以下是一个完整的示例，展示了如何在Flutter应用中使用DgstSelector组件：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DgstSelector 测试应用',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({super.key});

  final List<DgstSelectionItem> initItems = [
    const DgstSelectionItem(id: 1, name: 'Item 1'),
    const DgstSelectionItem(id: 2, name: 'Item 2')
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DgstSelector 测试应用'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            DgstSelector(
              title: '单选器',
              sourceCallback: testCallback(),
              initialSelectedItems: initItems,
              onSelectedItemsChanged: (value) => print(' > 选中项变化 < : $value'),
            ),
            const SizedBox(height: 10.0),
            DgstSelector(
              title: '多选器',
              dgstSelectorType: DgstSelectorType.MULTI_SELECTOR,
              sourceCallback: testCallback(),
              initialSelectedItems: initItems,
              onSelectedItemsChanged: (value) => print(' > 选中项变化 < : $value'),
            ),
          ],
        ),
      ),
    );
  }

  Future<List<DgstSelectionItem>?> testCallback() async {
    return [for (var i = 0; i < 10; i++) DgstSelectionItem(id: i, name: 'Item $i')];
  }
}