Flutter选择组件插件flutter_easy_select的使用

Flutter Easy Select 的使用

Flutter Easy Select

Pub Version License: MIT

flutter_easy_select 是一个功能强大的 Flutter 包，用于简化应用中的项目选择和过滤。无论是单选还是多选功能，flutter_easy_select 都提供了直观且优雅的解决方案，并支持简单的数据类型和复杂对象。

特性

  • 🎯 单选模式：通过简洁的界面进行单一项目的选择。
  • ✨ 多选支持：轻松选择多个项目。
  • 🔍 智能搜索：内置搜索功能，支持自定义搜索属性。
  • ✏️ 自定义文本输入：在单选模式下可添加自定义文本条目。
  • 🎨 可定制项构建器：使用自定义小部件创建自己的项目布局。
  • 🎭 预选支持：初始化时带有预选项目。
  • 🔄 泛型类型支持：适用于简单类型和自定义对象。

示例

easySelect

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_easy_select: ^1.0.1

然后运行：

$ flutter pub get

使用

基本字符串选择

/// 定义一个字符串列表
final List<String> _fruits = [
  'Apple',
  'Banana',
  'Cherry',
  'Date',
  'Elderberry',
  'Fig',
  'Grape'
];

// 单选
final String? result = await FlutterEasySelect.single<String>(
  context: context,
  items: _fruits,
  itemBuilder: (fruit) => ListTile(
    title: Text(fruit),
    leading: CircleAvatar(
      child: Text(fruit[0]),
    ),
  ),
  searchProperty: (fruit) => fruit,
  title: 'Select a Fruit',
  initialSelectedItem: _selectedFruit,
  enableFreeText: false,
  freeTextSelected: (value) {
    print('Custom fruit entered: $value');
  },
);

复杂对象选择

/// 定义一个自定义类
class Country {
  final String name;
  final String code;
  final int population;

  Country({
    required this.name,
    required this.code,
    required this.population,
  });
}

/// 创建一个复杂对象列表
final List<Country> _countries = [
  Country(name: 'United States', code: 'US', population: 331002651),
  Country(name: 'China', code: 'CN', population: 1439323776),
  Country(name: 'India', code: 'IN', population: 1380004385),
  // 更多国家...
];

// 多选
final List<Country>? results = await FlutterEasySelect.multi<Country>(
  context: context,
  items: _countries,
  itemBuilder: (country) => ListTile(
    title: Text(country.name),
    subtitle: Text('Population: ${country.population}'),
    leading: CircleAvatar(
      child: Text(country.code),
    ),
  ),
  searchProperty: (country) => country.name,
  itemIdentifier: (country) => country.code,
  title: 'Select Countries',
  isSearchEnabled: true,
  initialSelectedItems: _selectedCountries,
);

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

1 回复

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


flutter_easy_select 是一个用于 Flutter 的简单易用的选择组件插件，它可以帮助你快速实现下拉选择、单选、多选等功能。以下是如何使用 flutter_easy_select 的基本步骤：

1. 添加依赖

首先，你需要在 pubspec.yaml 文件中添加 flutter_easy_select 依赖：

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

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

2. 导入包

在你的 Dart 文件中导入 flutter_easy_select 包：

import 'package:flutter_easy_select/flutter_easy_select.dart';

3. 使用 EasySelect 组件

EasySelect 是一个简单易用的选择组件，你可以通过以下方式使用它：

基本使用

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _selectedValue;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('EasySelect Example'),
      ),
      body: Center(
        child: EasySelect<String>(
          title: 'Select an option',
          value: _selectedValue,
          items: [
            EasySelectItem<String>(value: 'Option 1', label: 'Option 1'),
            EasySelectItem<String>(value: 'Option 2', label: 'Option 2'),
            EasySelectItem<String>(value: 'Option 3', label: 'Option 3'),
          ],
          onChanged: (value) {
            setState(() {
              _selectedValue = value;
            });
          },
        ),
      ),
    );
  }
}

自定义样式

你可以通过 EasySelect 的各个属性来自定义样式，例如：

EasySelect<String>(
  title: 'Select an option',
  value: _selectedValue,
  items: [
    EasySelectItem<String>(value: 'Option 1', label: 'Option 1'),
    EasySelectItem<String>(value: 'Option 2', label: 'Option 2'),
    EasySelectItem<String>(value: 'Option 3', label: 'Option 3'),
  ],
  onChanged: (value) {
    setState(() {
      _selectedValue = value;
    });
  },
  hint: 'Choose one',
  dropdownColor: Colors.blue[50],
  icon: Icon(Icons.arrow_drop_down),
  iconSize: 24.0,
  elevation: 8,
  style: TextStyle(fontSize: 16, color: Colors.blue),
  selectedStyle: TextStyle(fontSize: 16, color: Colors.red),
  dropdownPadding: EdgeInsets.all(10),
  borderRadius: BorderRadius.circular(10),
);

多选模式

如果你需要多选功能，可以使用 EasySelect.multiple：

List<String> _selectedValues = [];

EasySelect<String>.multiple(
  title: 'Select options',
  values: _selectedValues,
  items: [
    EasySelectItem<String>(value: 'Option 1', label: 'Option 1'),
    EasySelectItem<String>(value: 'Option 2', label: 'Option 2'),
    EasySelectItem<String>(value: 'Option 3', label: 'Option 3'),
  ],
  onChanged: (values) {
    setState(() {
      _selectedValues = values;
    });
  },
);
回到顶部