自定义下拉菜单

自定义下拉菜单包可让您添加可自定义的动画下拉小部件。

特点

提供大量属性，可根据您的需求自定义下拉小部件。也可在表单小部件中使用，以进行必需的验证。

  • 使用构造函数 CustomDropdown() 创建自定义下拉菜单。
  • 使用命名构造函数 CustomDropdown.search() 创建带搜索字段的自定义下拉菜单。
  • 使用命名构造函数 CustomDropdown.searchRequest() 创建带搜索请求字段的自定义下拉菜单。

入门

  1. 将最新版本的包添加到您的 pubspec.yaml (然后运行 flutter pub get)

dependencies:
  animated_custom_dropdown: 1.5.0
  1. 导入包并在您的 Flutter 应用中使用它。
import 'package:animated_custom_dropdown/custom_dropdown.dart';

用法示例

1. 自定义下拉菜单

import 'package:animated_custom_dropdown/custom_dropdown.dart';
import 'package:flutter/material.dart';

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

  @override
  State<CustomDropdownExample> createState() => _CustomDropdownExampleState();
}

class _CustomDropdownExampleState extends State<CustomDropdownExample> {
  final jobRoleCtrl = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return CustomDropdown(
      hintText: 'Select job role',
      items: const ['Developer', 'Designer', 'Consultant', 'Student'],
      controller: jobRoleCtrl,
    );
  }
}

2. 带搜索功能的自定义下拉菜单

import 'package:animated_custom_dropdown/custom_dropdown.dart';
import 'package:flutter/material.dart';

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

  @override
  State<CustomDropdownExample> createState() => _CustomDropdownExampleState();
}

class _CustomDropdownExampleState extends State<CustomDropdownExample> {
  final jobRoleCtrl = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return CustomDropdown.search(
      hintText: 'Select job role',
      items: const ['Developer', 'Designer', 'Consultant', 'Student'],
      controller: jobRoleCtrl,
    );
  }
}

3. 带搜索请求功能的自定义下拉菜单

import 'package:animated_custom_dropdown/custom_dropdown.dart';
import 'package:flutter/material.dart';

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

  @override
  State<CustomDropdownExample> createState() => _CustomDropdownExampleState();
}

class _CustomDropdownExampleState extends State<CustomDropdownExample> {
  final jobRoleCtrl = TextEditingController();

  Future<List<String>> getFakeRequestData(String query) async {
    List<String> data = ['Developer', 'Designer', 'Consultant', 'Student'];

    return await Future.delayed(const Duration(seconds: 1), () {
      return data.where((e) {
        return e.toLowerCase().contains(query.toLowerCase());
      }).toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return CustomDropdown.searchRequest(
      futureRequest: getFakeRequestData,
      hintText: 'Search job role',
      controller: jobRoleCtrl,
      futureRequestDelay: const Duration(seconds: 3),//it waits 3 seconds before start searching (before execute the 'futureRequest' function)
    );
  }
}

预览

Example App

待办事项

  • 下拉字段/标题构建器。
  • 仅当点击任何 GestureDetector 时显示下拉菜单

GitHub

查看 Github