Flutter下拉选择插件dropdown_model_list的使用

特性

dropdown_model_list 是一个灵活且易于使用的下拉选择插件，支持多种选择方式：

单选
带搜索功能的单选
多选
单选按钮选择

安装步骤

在 pubspec.yaml 文件中添加最新版本的依赖，并执行 dart pub get：

dependencies:
  flutter:
    sdk: flutter
  dropdown_model_list: any

导入包并在应用中使用它。

使用示例

简单示例

import 'package:dropdown_model_list/dropdown_model_list.dart';

// 示例数据模型
DropListModel dropListModel = DropListModel([
  OptionItem(id: "1", title: "Jatin Sharma", data: 'CSE Student'),
  OptionItem(id: "2", title: "Puneet Chand", data: 'CSE Student'),
  // 添加更多选项...
]);

OptionItem optionItemSelected = OptionItem(title: "Select User");

// 简单下拉选择
SelectDropList(
  itemSelected: optionItemSelected,
  dropListModel: dropListModel,
  showIcon: false,
  showArrowIcon: true,
  showBorder: true,
  onOptionSelected: (optionItem) {
    optionItemSelected = optionItem;
    setState(() {});
  },
)

// 搜索下拉选择
SearchDropList(
  itemSelected: optionItemSelected,
  dropListModel: dropListModel,
  showIcon: false,
  showArrowIcon: true,
  showBorder: true,
  textEditingController: TextEditingController(),
  onOptionSelected: (optionItem) {
    optionItemSelected = optionItem;
    if (kDebugMode) {
      print(optionItemSelected.id);
    }
    setState(() {});
  },
)

完整示例代码

以下是一个完整的Flutter应用示例，展示了如何使用 dropdown_model_list 插件的不同类型下拉选择组件。

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'DropDown Menu',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'DropDown Menu'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final DropListModel dropListModel = DropListModel([
    OptionItem(id: "1", title: "Jatin Sharma", data: 'CSE Student'),
    OptionItem(id: "2", title: "Puneet Chand", data: 'CSE Student'),
    OptionItem(id: "3", title: "Vikas Bhardwaj", data: 'CSE Student'),
    OptionItem(id: "4", title: "Rakesh Kumar", data: 'CSE Student'),
    OptionItem(id: "5", title: "Alok Dubey", data: 'CSE Student'),
    OptionItem(id: "6", title: "Kiran Yadav", data: 'CSE Student'),
    OptionItem(id: "7", title: "Pradeep Kumar", data: 'CSE Student'),
    OptionItem(id: "8", title: "Amit Kumar", data: 'CSE Student'),
    OptionItem(id: "9", title: "Shweta Sharma", data: 'CSE Student'),
    OptionItem(id: "10", title: "Ankit Bhist", data: 'CSE Student'),
  ]);

  OptionItem optionItemSelected = OptionItem(title: "Select User");
  final TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.only(top: 20),
        child: Column(
          children: <Widget>[
            /// 简单下拉选择
            SelectDropList(
              itemSelected: optionItemSelected,
              dropListModel: dropListModel,
              showIcon: false,
              showArrowIcon: true,
              showBorder: true,
              enable: true,
              paddingTop: 0,
              paddingDropItem: const EdgeInsets.only(left: 20, top: 10, bottom: 10, right: 20),
              suffixIcon: Icons.arrow_drop_down,
              containerPadding: const EdgeInsets.all(10),
              icon: const Icon(Icons.person, color: Colors.black),
              onOptionSelected: (optionItem) {
                optionItemSelected = optionItem;
                setState(() {});
              },
            ),

            /// 带搜索功能的下拉选择
            SearchDropList(
              itemSelected: optionItemSelected,
              dropListModel: dropListModel,
              showIcon: false,
              showArrowIcon: true,
              showBorder: true,
              enable: true,
              textEditingController: controller,
              paddingTop: 0,
              suffixIcon: Icons.arrow_drop_down,
              containerPadding: const EdgeInsets.all(10),
              icon: const Icon(Icons.person, color: Colors.black),
              onOptionSelected: (optionItem) {
                optionItemSelected = optionItem;
                if (kDebugMode) {
                  print(optionItemSelected.id);
                }
                setState(() {});
              },
            ),

            /// 多选下拉选择
            SelectDropMultipleList(
              defaultText: optionItemSelected,
              dropListModel: dropListModel,
              showIcon: false,
              showBorder: true,
              enable: true,
              paddingTop: 0,
              submitText: "OK",
              onTapCross: (data) {
                if (data) {
                  print("List Clear");
                }
              },
              colorSubmitButton: Colors.amber,
              selectedIconWidget: Container(
                decoration: const BoxDecoration(shape: BoxShape.rectangle, color: Colors.amber),
                child: const Icon(Icons.done, size: 15, color: Colors.white),
              ),
              suffixIcon: Icons.arrow_drop_down,
              containerPadding: const EdgeInsets.all(10),
              icon: const Icon(Icons.person, color: Colors.black),
              onOptionListSelected: (list) {
                for (var data in list) {
                  if (data.id != null) {
                    if (kDebugMode) {
                      print(data.id);
                    }
                  }
                }
                setState(() {});
              },
            ),

            /// 单选按钮选择下拉
            SelectDropRadio(
              defaultText: optionItemSelected,
              dropListModel: dropListModel,
              showIcon: false,
              showBorder: true,
              paddingTop: 0,
              enable: true,
              submitText: "OK",
              colorSubmitButton: Colors.amber,
              selectedRadioColor: Colors.amber,
              suffixIcon: Icons.arrow_drop_down,
              containerPadding: const EdgeInsets.all(10),
              icon: const Icon(Icons.person, color: Colors.black),
              onOptionListSelected: (data) {
                print(data.title);
                setState(() {});
              },
            ),
          ],
        ),
      ),
    );
  }
}

通过上述示例，您可以轻松地在Flutter项目中集成和使用 dropdown_model_list 插件，实现不同类型的下拉选择功能。

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

wuwangju 1楼•1 天前

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

当然，以下是如何在Flutter项目中使用dropdown_model_list插件来实现下拉选择功能的代码案例。

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

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

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

接下来，我们可以创建一个简单的Flutter应用来展示如何使用dropdown_model_list。

主应用代码 (main.dart)

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

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

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

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

class _MyHomePageState extends State<MyHomePage> {
  // 定义一个枚举类型作为示例数据
  enum ItemType {
    Type1,
    Type2,
    Type3,
  }

  // 将枚举类型转换为模型类
  class ItemModel {
    final String name;
    final ItemType type;

    ItemModel(this.name, this.type);
  }

  // 初始化下拉列表数据
  final List<ItemModel> items = [
    ItemModel('Option 1', ItemType.Type1),
    ItemModel('Option 2', ItemType.Type2),
    ItemModel('Option 3', ItemType.Type3),
  ];

  ItemModel? selectedItem;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dropdown Model List Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text('Selected Item:'),
            if (selectedItem != null)
              Text(selectedItem!.name, style: TextStyle(fontSize: 18)),
            SizedBox(height: 16),
            DropdownModelList<ItemModel>(
              modelList: items,
              displayField: (ItemModel item) => item.name,
              valueField: (ItemModel item) => item,
              initialSelectedValue: selectedItem,
              onValueChanged: (ItemModel? newValue) {
                setState(() {
                  selectedItem = newValue;
                });
              },
              hintText: 'Select an option',
              searchEnabled: true,
            ),
          ],
        ),
      ),
    );
  }
}

代码解释

依赖导入：我们导入了flutter/material.dart和dropdown_model_list/dropdown_model_list.dart。
主应用：我们创建了一个简单的Flutter应用，包含一个MyApp和一个MyHomePage。
数据模型：我们定义了一个枚举类型ItemType和一个模型类ItemModel，用于表示下拉列表中的项目。
下拉列表数据：我们初始化了一个ItemModel对象的列表items。
状态管理：我们使用selectedItem来跟踪用户选择的项目。
UI布局：在MyHomePage的build方法中，我们构建了一个简单的UI，包含一个显示选定项目的文本和一个DropdownModelList。
DropdownModelList：
- modelList：传递我们的项目列表。
- displayField：指定用于显示每个项目的字段（这里我们显示项目的名称）。
- valueField：指定每个项目的唯一标识符（这里我们直接使用ItemModel对象）。
- initialSelectedValue：初始化选定值（默认为null）。
- onValueChanged：当用户选择一个新项时调用，更新selectedItem的状态。
- hintText：显示下拉列表的提示文本。
- searchEnabled：启用搜索功能（可选）。

这个代码案例展示了如何在Flutter中使用dropdown_model_list插件来实现一个带有搜索功能的下拉选择列表。你可以根据需要进一步自定义和扩展这个示例。