Flutter下拉选择插件dropdown_flutter_fork的使用

Flutter下拉选择插件dropdown_flutter_fork的使用

Dropdown Flutter

DropdownFlutter 旨在增强您的 Flutter 应用程序，提供高度可定制的下拉组件，并具备高级功能，包括列表数据搜索、网络搜索和多选。

特性

有很多属性可以用来定制下拉组件以满足您的需求。也可以在 Form 组件下使用，以便进行必要的验证。

  • 使用构造函数 DropdownFlutter 创建的下拉组件。
  • 使用命名构造函数 DropdownFlutter 带有搜索字段的下拉组件。
  • 使用命名构造函数 DropdownFlutter 带有搜索请求字段的下拉组件。
  • 使用命名构造函数 DropdownFlutter 多选下拉组件。
  • 使用命名构造函数 DropdownFlutter 带有搜索字段的多选下拉组件。
  • 使用命名构造函数 DropdownFlutter 带有搜索请求字段的多选下拉组件。

预览

开始使用

1. 添加依赖

在您的 pubspec.yaml 文件中添加最新版本的包（并运行 flutter pub get）：

dependencies:
  dropdown_flutter: 1.0.1

2. 导入并使用

导入该包并在您的 Flutter 应用程序中使用它：

import 'package:dropdown_flutter/custom_dropdown.dart';

示例用法

1. 简单的下拉组件

import 'package:dropdown_flutter/custom_dropdown.dart';
import 'package:flutter/material.dart';
import 'dart:developer';

const List<String> _list = [
  'Developer',
  'Designer',
  'Consultant',
  'Student',
];

class SimpleDropdown extends StatelessWidget {
  const SimpleDropdown({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DropdownFlutter<String>(
      hintText: 'Select job role',
      items: _list,
      initialItem: _list[0],
      onChanged: (value) {
        log('changing value to: $value');
      },
    );
  }
}

2. 自定义类型模型的下拉组件

首先，定义一个自定义类型模型对象：

class Job {
  final String name;
  final IconData icon;
  const Job(this.name, this.icon);

  [@override](/user/override)
  String toString() {
    return name;
  }
}

然后，创建包含该模型的下拉组件：

import 'package:dropdown_flutter/custom_dropdown.dart';
import 'package:flutter/material.dart';
import 'dart:log';

const List<Job> _list = [
  Job('Developer', Icons.developer_mode),
  Job('Designer', Icons.design_services),
  Job('Consultant', Icons.account_balance),
  Job('Student', Icons.school),
];

class SimpleDropdown extends StatelessWidget {
  const SimpleDropdown({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DropdownFlutter<Job>(
      hintText: 'Select job role',
      items: _list,
      onChanged: (value) {
        log('changing value to: $value');
      },
    );
  }
}

3. 多选下拉组件

import 'package:dropdown_flutter/custom_dropdown.dart';
import 'package:flutter/material.dart';
import 'dart:log';

const List<Job> _list = [
  Job('Developer', Icons.developer_mode),
  Job('Designer', Icons.design_services),
  Job('Consultant', Icons.account_balance),
  Job('Student', Icons.school),
];

class MultiSelectDropDown extends StatelessWidget {
  const MultiSelectDropDown({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DropdownFlutter<Job>.multiSelect(
      items: _list,
      initialItems: _list.take(1).toList(),
      onListChanged: (value) {
        log('changing value to: $value');
      },
    );
  }
}

4. 带搜索功能的下拉组件

首先，增强您的 Job 模型以支持过滤：

class Job with DropdownFlutterListFilter {
  final String name;
  final IconData icon;
  const Job(this.name, this.icon);

  [@override](/user/override)
  String toString() {
    return name;
  }

  [@override](/user/override)
  bool filter(String query) {
    return name.toLowerCase().contains(query.toLowerCase());
  }
}

然后，创建包含搜索功能的下拉组件：

import 'package:dropdown_flutter/custom_dropdown.dart';
import 'package:flutter/material.dart';
import 'dart:log';

const List<Job> _list = [
  Job('Developer', Icons.developer_mode),
  Job('Designer', Icons.design_services),
  Job('Consultant', Icons.account_balance),
  Job('Student', Icons.school),
];

class SearchDropdown extends StatelessWidget {
  const SearchDropdown({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DropdownFlutter<Job>.search(
      hintText: 'Select job role',
      items: _list,
      excludeSelected: false,
      onChanged: (value) {
        log('changing value to: $value');
      },
    );
  }
}

5. 带搜索请求的下拉组件

首先，定义一个个性化对象用于项目：

class Pair {
  final String text;
  final IconData icon;
  const Pair(this.text, this.icon);

  [@override](/user/override)
  String toString() {
    return text;
  }
}

然后，创建带搜索请求的下拉组件：

import 'package:dropdown_flutter/custom_dropdown.dart';
import 'package:flutter/material.dart';
import 'dart:log';

const List<Pair> _list = [
  Pair('Developer', Icons.developer_board),
  Pair('Designer', Icons.deblur_sharp),
  Pair('Consultant', Icons.money_off),
  Pair('Student', Icons.edit),
];

class SearchRequestDropdown extends StatelessWidget {
  const SearchRequestDropdown({Key? key}) : super(key: key);

  // 这应该是一个 API 或服务调用
  Future<List<Pair>> _getFakeRequestData(String query) async {
    return await Future.delayed(const Duration(seconds: 1), () {
      return _list.where((e) {
        return e.text.toLowerCase().contains(query.toLowerCase());
      }).toList();
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DropdownFlutter<Pair>.searchRequest(
      futureRequest: _getFakeRequestData,
      hintText: 'Search job role',
      items: _list,
      onChanged: (value) {
        log('changing value to: $value');
      },
    );
  }
}

6. 带验证的下拉组件

首先，创建一个表单键：

final _formKey = GlobalKey<FormState>();

然后，创建带有验证的下拉组件：

import 'package:dropdown_flutter/custom_dropdown.dart';
import 'package:flutter/material.dart';
import 'dart:log';

const List<String> _list = [
  'Developer',
  'Designer',
  'Consultant',
  'Student',
];

class ValidationDropdown extends StatelessWidget {
  ValidationDropdown({Key? key}) : super(key: key);

  final _formKey = GlobalKey<FormState>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          DropdownFlutter<String>(
            hintText: 'Select job role',
            items: _list,
            onChanged: (value) {
              log('changing value to: $value');
            },
            // 在项被选择时运行验证
            validateOnChange: true,
            // 验证当前所选项目的有效性
            validator: (value) => value == null ? "Must not be null" : null,
          ),
          const SizedBox(height: 16),
          SizedBox(
            width: double.infinity,
            child: ElevatedButton(
              onPressed: () {
                if (!_formKey.currentState!.validate()) return;
              },
              child: const Text(
                'Submit',
                style: TextStyle(fontWeight: FontWeight.w600),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

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

1 回复

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


dropdown_flutter_fork 是一个 Flutter 插件，用于创建自定义的下拉选择框。它提供了比 Flutter 默认的 DropdownButton 更多的灵活性和自定义选项。以下是使用 dropdown_flutter_fork 插件的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  dropdown_flutter_fork: ^1.0.0  # 请根据实际情况使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入包

在需要使用下拉选择框的 Dart 文件中导入 dropdown_flutter_fork 包：

import 'package:dropdown_flutter_fork/dropdown_flutter_fork.dart';

3. 使用 DropdownFlutter

你可以在你的 Widget 中使用 DropdownFlutter 来创建一个下拉选择框。以下是一个简单的示例：

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

class _MyHomePageState extends State<MyHomePage> {
  String? selectedValue;

  final List<String> items = [
    'Option 1',
    'Option 2',
    'Option 3',
    'Option 4',
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DropdownFlutter Example'),
      ),
      body: Center(
        child: DropdownFlutter<String>(
          items: items.map((String value) {
            return DropdownMenuItem<String>(
              value: value,
              child: Text(value),
            );
          }).toList(),
          onChanged: (String? newValue) {
            setState(() {
              selectedValue = newValue;
            });
          },
          value: selectedValue,
          hint: Text('Select an option'),
        ),
      ),
    );
  }
}
回到顶部