Flutter自定义下拉列表插件flutter_custom_dropdown_list的使用

Flutter自定义下拉列表插件flutter_custom_dropdown_list的使用

flutter_custom_dropdown_list 是一个用于Flutter的可定制下拉列表包。该包允许开发者通过底部弹出层或全屏模式显示下拉列表。此包支持动态项渲染，可选的 itemBuilder，可定制的搜索功能，以及三种不同的底部弹出层显示模式，使其易于集成到任何Flutter项目中。

特性

  • 可定制的项目：可以使用任意类型的动态项目，并通过可选的 itemBuilder 显示它们。
  • 多种底部弹出层模式：支持模态、普通和全屏模式的下拉列表。
  • 搜索功能：可以轻松启用或禁用搜索以过滤项目。
  • 通用支持：允许使用任何类或数据模型作为下拉列表项。
  • toString验证：自动检查自定义类是否覆盖了 toString() 方法，以确保正确显示。
  • 可选的 itemBuilder：可以使用构建器函数自定义项目的显示方式，或者默认为 ListTile。
  • 可选的 itemSearchCondition：可选的搜索功能是一个可选参数，允许定义自定义逻辑来搜索下拉列表项。
  • 可选的可定制颜色和主题：可以为下拉列表和搜索界面设置颜色和主题。

开始使用

要在项目中使用该包，请在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_custom_dropdown_list: ^1.0.1

或者从GitHub克隆仓库：

dependencies:
  flutter_custom_dropdown_list:
    git:
      url: https://github.com/gmadhu27/flutter_custom_dropdown.git

然后在你的Dart文件中导入该包：

import 'package:flutter_custom_dropdown_list/flutter_custom_dropdown.dart';

使用示例

简单下拉列表示例

import 'package:flutter/material.dart';
import 'package:flutter_custom_dropdown_list/flutter_custom_dropdown.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Dropdown Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Custom Dropdown Example'),
        ),
        body: const Padding(
          padding: EdgeInsets.all(16.0),
          child: DropdownExample(),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    final items = [
      DropdownItem(id: "1", name: 'Item 1'),
      DropdownItem(id: "2", name: 'Item 2'),
      DropdownItem(id: "3", name: 'Item 3'),
    ];

    return Center(
      child: ElevatedButton(
        onPressed: () {
          CustomDropdownHelper.showDropdown<DropdownItem>(
            context: context,
            items: items,
            title: "Select an Item",
            onItemSelected: (item) {
              if (item != null) {
                print("Selected: ${item.name}");
              }
            },
            itemBuilder: (item) {
              return ListTile(
                title: Text(item.name),
                subtitle: Text("ID: ${item.id}"),
              );
            },
          );
        },
        child: const Text("Show Dropdown"),
      ),
    );
  }
}

DropdownItem 类示例

这是一个基本的 DropdownItem 类示例，它在下拉列表中使用。该类实现了 toString() 方法以确保项目名称正确显示。

class DropdownItem {
  final String id;
  final String name;

  DropdownItem({required this.id, required this.name});

  @override
  String toString() => name; // 覆盖toString方法以便显示
}

可搜索的下拉列表示例

CustomDropdownHelper.showDropdown<DropdownItem>(
  context: context,
  items: myItemsList, // DropdownItem 或自定义类的列表
  title: "Select an Occupation",
  showSearch: true, // 启用搜索功能
  onItemSelected: (selectedItem) {
    // 处理选中的项目
    print('Selected: ${selectedItem.name}');
  },
);

可选的 itemSearchCondition

itemSearchCondition 是一个可选参数，允许你定义自定义逻辑来搜索下拉列表项。以下是如何在Flutter应用中使用下拉列表的示例，包括 itemSearchCondition 以实现自定义搜索行为：

CustomDropdownHelper.showDropdown<DropdownItem>(
  context: context,
  items: items,
  title: 'Select Item',
  onItemSelected: (selectedItem) {
    print('Selected: ${selectedItem?.name}');
  }, 
  showSearch: true,
  itemSearchCondition: (item, searchText) {
    // 自定义搜索条件：匹配id和name
    return item.name.toLowerCase().contains(searchText.toLowerCase()) ||
           item.id.contains(searchText);
  },
);

在上面的示例中，搜索会检查项目的名称或ID是否包含搜索文本。你可以根据具体的数据结构和搜索需求来自定义这一点。

如果没有提供 itemSearchCondition，则下拉列表将使用默认行为，即匹配 toString() 方法以过滤搜索期间的项目。

底部弹出层模式

可以使用三种不同的模式来显示下拉列表：

  • 普通（默认）：显示一个不完全覆盖屏幕的普通底部弹出层。
  • 模态：以模态底部弹出层的形式显示下拉列表。
  • 全屏：以全屏模式显示下拉列表。
CustomDropdownHelper.showDropdown<DropdownItem>(
  context: context,
  items: myItemsList,
  title: "Choose Item",
  bottomSheetMode: BottomSheetMode.full, // 全屏模式
  onItemSelected: (selectedItem) {
    print('Selected: ${selectedItem.name}');
  },
);

自定义项目显示

可以提供一个自定义的项目构建器来在下拉列表中显示项目。如果没有提供，则包默认使用 ListTile 并调用项目的 toString() 方法。

CustomDropdownHelper.showDropdown<DropdownItem>(
  context: context,
  items: myItemsList,
  title: "Custom Item Display",
  itemBuilder: (item) {
    return Card(
      child: ListTile(
        title: Text(item.name),
        subtitle: Text("ID: ${item.id}"),
      ),
    );
  },
  onItemSelected: (selectedItem) {
    print('Selected: ${selectedItem.name}');
  },
);

自定义下拉列表主题

可以通过背景颜色、文本样式、图标等属性来自定义下拉列表的主题。以下是使用方法的一个示例：

CustomDropdownHelper.showDropdown(
  context: context,
  items: items,
  title: "Select an Item",
  // 底部弹出层模式（可选，默认为普通模式）
  bottomSheetMode: BottomSheetMode.full,
  // 是否显示搜索栏（可选，默认为true）
  showSearch: true,
  onItemSelected: (DropdownItem? selectedItem) {
    // 处理选中的项目
    setState(() {
      _selectedItemName = selectedItem?.name;
    });
  },
  // 自定义项目构建器（可选）
  itemBuilder: (item) {
    return ListTile(
      title: Text(item.name),
      subtitle: Text(item.id),
    );
  },
  // 自定义搜索逻辑（可选）
  itemSearchCondition: (item, searchText) {
    return item.id.toLowerCase().contains(searchText) ||
           item.name.toLowerCase().contains(searchText);
  },
  // 应用自定义下拉主题（可选）
  theme: CustomDropdownTheme(
    // 下拉列表和底部弹出层的背景颜色（可选）
    backgroundColor: Colors.deepOrange,
    // 返回按钮的颜色（可选）
    backIconColor: Colors.white,
    // 标题文本样式（可选）
    titleTextStyle: const TextStyle(color: Colors.white, fontSize: 22),
    // 搜索框装饰（可选）
    searchBoxDecoration: InputDecoration(
      hintText: 'Search here',
      hintStyle: const TextStyle(color: Colors.white, fontSize: 18),
      filled: true,
      fillColor: Colors.orange.shade100,
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10),
        borderSide: const BorderSide(color: Colors.orange, width: 2),
      ),
      prefixIcon: const Icon(Icons.search, color: Colors.white),
    ),
    // 底部弹出层装饰（可选）
    bottomSheetBoxDecoration: const BoxDecoration(
      color: Colors.deepOrange,
      borderRadius: BorderRadius.vertical(top: Radius.circular(30.0)),
    ),
  ),
);

自定义下拉主题属性

属性 类型 描述
backgroundColor Color? 下拉列表和底部弹出层的背景颜色。默认值为 Colors.grey.withOpacity(0.6)。
backIconColor Color? 返回按钮或关闭按钮的颜色。默认值为 Colors.black。
titleTextStyle TextStyle? 下拉列表或底部弹出层标题的文本样式。
searchBoxDecoration InputDecoration? 搜索框输入字段的自定义装饰，包括提示文本、边框和前缀图标。
bottomSheetBoxDecoration BoxDecoration? 底部弹出层的自定义装饰，允许控制背景颜色、形状等。

示例

  1. 背景颜色：可以通过传递自定义颜色给 backgroundColor 属性来改变下拉列表的背景颜色。这会影响整个底部弹出层的背景。
backgroundColor: Colors.deepOrange
  1. 返回按钮颜色：可以通过传递自定义颜色给 backIconColor 属性来改变下拉列表的返回按钮颜色。这会影响整个底部弹出层的关闭按钮。
backIconColor: Colors.deepOrange
  1. 标题文本样式：可以通过使用 titleTextStyle 属性来修改下拉列表内部标题文本的外观。这允许调整字体大小、颜色和粗细。
titleTextStyle: TextStyle(color: Colors.white, fontSize: 22)
  1. 搜索框装饰：可以通过传递自定义的 InputDecoration 给 searchBoxDecoration 来自定义搜索输入字段的外观。你可以更改提示文本、输入边框和前缀图标。
searchBoxDecoration: InputDecoration(
  hintText: 'Search here',
  hintStyle: TextStyle(color: Colors.white, fontSize: 18),
  filled: true,
  fillColor: Colors.orange.shade100,
  border: OutlineInputBorder(
    borderRadius: BorderRadius.circular(10),
    borderSide: BorderSide(color: Colors.orange, width: 2),
  ),
  prefixIcon: Icon(Icons.search, color: Colors.white),
)
  1. 底部弹出层装饰：可以通过使用 bottomSheetBoxDecoration 来自定义底部弹出层的形状和颜色。你可以通过添加圆角来修改形状。
bottomSheetBoxDecoration: BoxDecoration(
  color: Colors.deepOrange,
  borderRadius: BorderRadius.vertical(top: Radius.circular(30.0)),
)

更多关于Flutter自定义下拉列表插件flutter_custom_dropdown_list的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义下拉列表插件flutter_custom_dropdown_list的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


flutter_custom_dropdown_list 是一个自定义的下拉列表插件，允许开发者根据需求自定义下拉列表的外观和行为。以下是如何使用该插件的基本步骤：

1. 添加依赖

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

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

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

2. 导入插件

在你的 Dart 文件中导入插件：

import 'package:flutter_custom_dropdown_list/flutter_custom_dropdown_list.dart';

3. 使用 CustomDropdownList

CustomDropdownList 是插件提供的主要组件。你可以通过传递参数来自定义下拉列表的外观和行为。

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

class _MyHomePageState extends State<MyHomePage> {
  String _selectedValue;

  final List<String> _items = [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Custom Dropdown List Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CustomDropdownList(
              items: _items,
              hintText: 'Select an item',
              value: _selectedValue,
              onChanged: (String newValue) {
                setState(() {
                  _selectedValue = newValue;
                });
              },
              dropdownColor: Colors.white,
              textStyle: TextStyle(color: Colors.black),
              hintStyle: TextStyle(color: Colors.grey),
              icon: Icon(Icons.arrow_drop_down, color: Colors.black),
              iconSize: 24.0,
              elevation: 8,
              isExpanded: false,
            ),
            SizedBox(height: 20),
            Text('Selected Value: $_selectedValue'),
          ],
        ),
      ),
    );
  }
}
回到顶部