Flutter下拉选择插件flutter_dropdown_x的使用

Flutter Dropdown X 是一个使用下拉按钮实现表单字段的下拉选择插件。

开始使用

添加依赖

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_dropdown_x: ^0.0.2

导入插件

在 Dart 文件中导入插件：

import 'package:flutter_dropdown_x/flutter_dropdown_x.dart';

使用方法

JSON 实现

String _selected = "";

var data = [
    {'id': "1", 'value': 'value1'},
    {'id': "2", 'value': 'value2'},
    {'id': "3", 'value': 'value3'},
    {'id': "4", 'value': 'value4'},
    {'id': "5", 'value': 'value5'},
    {'id': "6", 'value': 'value6'},
  ];
  
  
  DropDownField(
              value: _selected,
              hintText: 'Please choose one',
              dataSource: data,
              onChanged: (v) {
                print(v);
                setState(() {
                  _selected = v;
                });
              },
              valueField: 'id',
              textField: 'value',
            ),

示例

String _selected = "";

DropDownField(
              hintText: 'Please choose one',
              value: _selected,
              onChanged: (v) {
                setState(() {
                  _selected = v;
                });
              },
              dataSource: const [
                {
                  "display": "value 1",
                  "value": "1",
                },
                {
                  "display": "value 2",
                  "value": "2",
                } 
              ],
              textField: 'display',
              valueField: 'value',

            ),

完整示例

以下是一个完整的示例代码，展示了如何在 Flutter 应用程序中使用 flutter_dropdown_x 插件。

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

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

  [@override](/user/override)
  _DropdownExampleState createState() => _DropdownExampleState();
}

class _DropdownExampleState extends State<DropdownExample> {
  String _selected = "";

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Dropdown Field"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // 下拉选择框
            DropDownField(
              hintText: 'Please choose one',
              value: _selected,
              onChanged: (v) {
                setState(() {
                  _selected = v;
                });
              },
              dataSource: const [
                {
                  "display": "value 1",
                  "value": "1",
                },
                {
                  "display": "value 2",
                  "value": "2",
                },
                {
                  "display": "value 3",
                  "value": "3",
                },
                {
                  "display": "value 4",
                  "value": "4",
                },
                {
                  "display": "value 5",
                  "value": "5",
                },
                {
                  "display": "value 6",
                  "value": "6",
                },
                {
                  "display": "value 7",
                  "value": "7",
                },
              ],
              textField: 'display',
              valueField: 'value',
            ),

            // 显示选中的值
            const SizedBox(height: 20,),
            Text("Selected value is $_selected"),
          ],
        ),
      ),
    );
  }
}

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

sinazl 1楼•3 天前作者

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

当然，以下是如何在Flutter项目中使用flutter_dropdown_x插件的一个详细代码示例。flutter_dropdown_x是一个增强版的下拉选择插件，它提供了更多功能和更好的用户体验。

首先，确保你的pubspec.yaml文件中已经添加了flutter_dropdown_x依赖：

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

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

接下来是一个简单的示例，展示如何使用flutter_dropdown_x：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter DropdownX 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<String> items = ['Option 1', 'Option 2', 'Option 3', 'Option 4'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter DropdownX Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            DropdownX<String>(
              hint: Text('Select an option'),
              value: selectedValue,
              onChanged: (value) {
                setState(() {
                  selectedValue = value;
                });
              },
              items: items.map((String item) {
                return DropdownMenuItem<String>(
                  value: item,
                  child: Text(item),
                );
              }).toList(),
              searchEnabled: true,
              searchFieldStyle: TextStyle(color: Colors.grey),
              searchFieldDecoration: InputDecoration(
                prefixIcon: Icon(Icons.search),
                border: OutlineInputBorder(),
              ),
              dropdownDecoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey.withOpacity(0.2),
                    spreadRadius: 5,
                    blurRadius: 7,
                    offset: Offset(0, 3), // changes position of shadow
                  ),
                ],
              ),
              dropdownMenuItemBuilder: (BuildContext context, String item) {
                return Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: ListTile(
                    leading: Icon(Icons.arrow_forward),
                    title: Text(item),
                  ),
                );
              },
            ),
            SizedBox(height: 20),
            Text('Selected Value: $selectedValue'),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个使用flutter_dropdown_x的下拉选择菜单。以下是代码的主要部分及其功能：

DropdownX Widget:
- hint: 显示在下拉列表未选择任何选项时的提示文本。
- value: 当前选中的值。
- onChanged: 当选项改变时的回调函数。
- items: 下拉列表中的选项，每个选项都是一个DropdownMenuItem。
- searchEnabled: 启用搜索功能。
- searchFieldStyle 和 searchFieldDecoration: 自定义搜索字段的样式和装饰。
- dropdownDecoration: 自定义下拉列表的装饰，例如边框半径和阴影。
- dropdownMenuItemBuilder: 自定义每个菜单项的构建方式。
显示选中的值:
- 使用Text小部件显示当前选中的值。

运行这个示例，你将看到一个带有搜索功能的增强版下拉选择菜单，并可以实时看到选中的值。