Flutter下拉选择插件flutter_dropdown_plus的使用

发布于 1周前 作者 itying888 来自 Flutter

Flutter下拉选择插件flutter_dropdown_plus的使用

flutter_dropdown_plus 是一个用于Flutter应用中的下拉选择插件,支持单选和多选,并且可以进行搜索和自定义。

使用方法

安装

首先,在你的 pubspec.yaml 文件中添加 flutter_dropdown_plus 作为依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_dropdown_plus:

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

示例代码

以下是一个完整的示例,展示了如何在Flutter应用中使用 flutter_dropdown_plus 插件。

1. 声明变量

List<DropdownItem> _itemList = [];
String _singleSelectedId = ""; // 用于单选下拉菜单
List<String> _multiSelectedIds = []; // 用于多选下拉菜单
final TextEditingController _conDropdownTextField = TextEditingController();

2. 生成项目列表

void _generateItems() {
  List<DropdownItem> list = [];
  for (int i = 1; i <= 3; i++) {
    list.add(DropdownItem(
        id: "$i",
        value: "Item $i",
        data: User(
            userId: "$i",
            userName: "User $i") // User类是另一个数据类(data字段可以使用任何数据类型)
    ));
  }
  setState(() {
    _itemList = list;
  });
}

3. 在构建函数中放置下拉菜单

单选下拉菜单
Dropdown.singleSelection(
  title: "Single Selection Dropdown",
  labelText: "Single",
  hintText: "Single Selection",
  list: _itemList,
  selectedId: _singleSelectedId,
  isAddItem: true,
  onTapAddItem: (searchValue) {
    log(searchValue);
  },
  onSingleItemListener: (selectedItem) {
    setState(() {
      _singleSelectedId = selectedItem.id;
    });
    String itemId = selectedItem.id;
    String itemName = selectedItem.value;
    User user = selectedItem.data as User;
    log("Item Id: $itemId -- Item Name: $itemName ## Other Details ## User Id: ${user.userId} -- User Name: ${user.userName}");
  }),
多选下拉菜单
Dropdown.multiSelection(
  title: "Multi Selection Dropdown",
  labelText: "Multi",
  hintText: "Multi Selection",
  list: _itemList,
  selectedIds: _multiSelectedIds,
  isAllSelection: true,
  isAddItem: true,
  onTapAddItem: (searchValue) {
    log(searchValue);
  },
  onMultipleItemListener: (selectedItemList) {
    for (DropdownItem selectedItem in selectedItemList) {
      String itemId = selectedItem.id;
      String itemName = selectedItem.value;
      User user = selectedItem.data as User;
      log("Item Id: $itemId -- Item Name: $itemName ## Other Details ## User Id: ${user.userId} -- User Name: ${user.userName}");
    }
  }),
带文本框的下拉菜单
DropdownTextField(
  controller: _conDropdownTextField,
  list: _itemList,
  hintText: "Item search",
  labelText: "Item search"
),

完整示例代码

import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:flutter_dropdown_plus/dropdown.dart';
import 'package:flutter_dropdown_plus/dropdown_item.dart';
import 'package:flutter_dropdown_plus/dropdown_textfield.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
        debugShowCheckedModeBanner: false, home: DropdownExample());
  }
}

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

  @override
  State<DropdownExample> createState() => _DropdownExampleState();
}

class _DropdownExampleState extends State<DropdownExample> {
  List<DropdownItem> _itemList = [];
  String _singleSelectedId = "";
  final List<String> _multiSelectedIds = [];
  final TextEditingController _conDropdownTextField = TextEditingController();

  @override
  void initState() {
    super.initState();
    _generateItems();
  }

  void _generateItems() {
    List<DropdownItem> list = [];
    for (int i = 1; i <= 3; i++) {
      list.add(DropdownItem(
          id: "$i",
          value: "Item $i",
          data: User(
              userId: "$i",
              userName: "User $i") // User类是另一个数据类(data字段可以使用任何数据类型)
      ));
    }
    setState(() {
      _itemList = list;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("flutter_dropdown_plus"),
      ),
      body: SafeArea(
          child: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(20),
          child: Column(
            children: [
              Dropdown.singleSelection(
                  title: "Single Selection Dropdown",
                  labelText: "Single",
                  hintText: "Single Selection",
                  list: _itemList,
                  selectedId: _singleSelectedId,
                  isAddItem: true,
                  onTapAddItem: (searchValue) {
                    log(searchValue);
                  },
                  onSingleItemListener: (selectedItem) {
                    setState(() {
                      _singleSelectedId = selectedItem.id;
                    });
                    String itemId = selectedItem.id;
                    String itemName = selectedItem.value;
                    User user = selectedItem.data as User;
                    log("Item Id: $itemId -- Item Name: $itemName ## Other Details ## User Id: ${user.userId} -- User Name: ${user.userName}");
                  }),
              const SizedBox(
                height: 20,
              ),
              Dropdown.multiSelection(
                  title: "Multi Selection Dropdown",
                  labelText: "Multi",
                  hintText: "Multi Selection",
                  list: _itemList,
                  selectedIds: _multiSelectedIds,
                  isAllSelection: true,
                  isAddItem: true,
                  onTapAddItem: (searchValue) {
                    log(searchValue);
                  },
                  onMultipleItemListener: (selectedItemList) {
                    for (DropdownItem selectedItem in selectedItemList) {
                      String itemId = selectedItem.id;
                      String itemName = selectedItem.value;
                      User user = selectedItem.data as User;
                      log("Item Id: $itemId -- Item Name: $itemName ## Other Details ## User Id: ${user.userId} -- User Name: ${user.userName}");
                    }
                  }),
              const SizedBox(
                height: 20,
              ),
              DropdownTextField(
                controller: _conDropdownTextField,
                list: _itemList,
                hintText: "Item search",
                labelText: "Item search",
              ),
            ],
          ),
        ),
      )),
    );
  }
}

class User {
  String userId;
  String userName;

  User({this.userId = "0", this.userName = ""});
}

以上是 flutter_dropdown_plus 插件的基本用法和完整示例代码。希望对你有所帮助!


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

1 回复

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


当然,以下是一个关于如何使用 flutter_dropdown_plus 插件的示例代码。这个插件扩展了 Flutter 提供的标准 DropdownButton,提供了更多功能和更好的用户体验。

首先,确保你已经在 pubspec.yaml 文件中添加了 flutter_dropdown_plus 依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_dropdown_plus: ^x.y.z  # 请替换为最新版本号

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

接下来是一个简单的示例,展示如何在 Flutter 应用中使用 flutter_dropdown_plus

import 'package:flutter/material.dart';
import 'package:flutter_dropdown_plus/flutter_dropdown_plus.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Dropdown Plus Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

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

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

  final List<DropdownMenuItemData> dropdownItems = [
    DropdownMenuItemData('Option 1'),
    DropdownMenuItemData('Option 2'),
    DropdownMenuItemData('Option 3'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Dropdown Plus Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            DropdownPlus<String>(
              data: dropdownItems,
              value: selectedValue,
              onChanged: (value) {
                setState(() {
                  selectedValue = value;
                });
              },
              searchEnabled: true, // 启用搜索功能
              searchDecoration: InputDecoration(
                labelText: 'Search...',
                border: OutlineInputBorder(),
              ),
              dialogBoxDecoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(8),
              ),
              itemBuilder: (context, item) {
                return ListTile(
                  leading: Icon(Icons.label),
                  title: Text(item.value),
                );
              },
            ),
            SizedBox(height: 20),
            Text('Selected Value: $selectedValue'),
          ],
        ),
      ),
    );
  }
}

// 自定义 DropdownMenuItemData 类,用于存储下拉选项的数据
class DropdownMenuItemData {
  final String value;

  DropdownMenuItemData(this.value);
}

在这个示例中,我们创建了一个简单的 Flutter 应用,其中包含一个使用 flutter_dropdown_plus 的下拉选择框。以下是一些关键点:

  1. DropdownPlus: 使用 DropdownPlus 替代标准的 DropdownButton。它接受一个 List<DropdownMenuItemData> 类型的数据列表。

  2. searchEnabled: 启用搜索功能,允许用户在下拉列表中搜索选项。

  3. searchDecoration: 自定义搜索输入框的装饰。

  4. dialogBoxDecoration: 自定义下拉对话框的装饰。

  5. itemBuilder: 自定义每个下拉选项的显示样式。

  6. DropdownMenuItemData: 自定义数据类,用于存储下拉选项的值。

这个示例展示了 flutter_dropdown_plus 的基本用法,并演示了如何启用搜索功能和自定义下拉选项的显示样式。你可以根据需要进一步自定义和扩展这个示例。

回到顶部