flutter如何实现awesome_select功能

在Flutter中如何实现类似awesome_select的多选功能？我需要一个支持搜索、分组和自定义样件的下拉选择组件，最好能兼容移动端和Web端。目前尝试过DropdownButton和PopupMenuButton，但功能比较简单。请问有没有现成的插件推荐，或者需要自己封装实现？如果自己实现的话，有哪些关键点需要注意？

2 回复

使用Flutter实现类似Awesome Select功能，推荐使用flutter_smart_select包。主要步骤：

  1. 添加依赖：flutter_smart_select: ^4.3.5
  2. 导入包
  3. 使用SmartSelect组件
  4. 配置选项列表、标题、默认值等

支持单选、多选、模态弹窗等多种交互形式。

更多关于flutter如何实现awesome_select功能的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现类似Awesome Select的功能，可以通过以下方式：

1. 使用现有包

推荐使用 flutter_awesome_select 包：

dependencies:
  flutter_awesome_select: ^7.0.0

基本使用示例：

import 'package:flutter_awesome_select/flutter_awesome_select.dart';

SmartSelect<String>.single(
  title: '选择城市',
  selectedValue: selectedCity,
  choiceItems: S2Choice.listFrom<String, String>(
    source: cities,
    value: (index, item) => item,
    title: (index, item) => item,
  ),
  onChange: (state) => setState(() => selectedCity = state.value),
);

2. 自定义实现

如果不想依赖第三方包，可以自己实现：

class CustomAwesomeSelect extends StatefulWidget {
  final List<String> options;
  final String? selectedValue;
  final ValueChanged<String?> onChanged;

  const CustomAwesomeSelect({
    Key? key,
    required this.options,
    this.selectedValue,
    required this.onChanged,
  }) : super(key: key);

  @override
  _CustomAwesomeSelectState createState() => _CustomAwesomeSelectState();
}

class _CustomAwesomeSelectState extends State<CustomAwesomeSelect> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _showSelectionDialog,
      child: Container(
        padding: EdgeInsets.all(12),
        decoration: BoxDecoration(
          border: Border.all(color: Colors.grey),
          borderRadius: BorderRadius.circular(8),
        ),
        child: Row(
          children: [
            Expanded(
              child: Text(
                widget.selectedValue ?? '请选择',
                style: TextStyle(fontSize: 16),
              ),
            ),
            Icon(Icons.arrow_drop_down),
          ],
        ),
      ),
    );
  }

  void _showSelectionDialog() {
    showModalBottomSheet(
      context: context,
      builder: (context) => Container(
        height: 300,
        child: ListView.builder(
          itemCount: widget.options.length,
          itemBuilder: (context, index) => ListTile(
            title: Text(widget.options[index]),
            onTap: () {
              widget.onChanged(widget.options[index]);
              Navigator.pop(context);
            },
          ),
        ),
      ),
    );
  }
}

3. 主要特性实现

  • 单选/多选：通过不同的状态管理
  • 搜索功能：添加TextField进行过滤
  • 分组：使用ListView.builder分组显示
  • 自定义样式：通过Theme或自定义装饰

推荐使用 flutter_awesome_select 包，它提供了丰富的功能和良好的自定义选项。

回到顶部