Flutter下拉选择插件gt_dropdown的使用

Flutter下拉选择插件gt_dropdown的使用

gt_dropdown 是一个高度可定制且功能丰富的Flutter下拉菜单小部件，提供了与表单、验证、动画和广泛样式选项的无缝集成。

功能特性

• 完全可自定义的下拉菜单和菜单外观：包括颜色、边框、文本样式和圆角等。
• 内置验证：支持自定义错误消息和样式，确保表单集成的流畅性。
• 平滑动画：打开和关闭下拉菜单时提供平滑动画，提升用户体验。
• 悬停效果：支持悬停效果并高亮显示选中的项目，增强用户交互。
• 分隔线：可以在下拉项之间添加分隔线，以提高视觉分离和清晰度。

入门指南

要使用此插件，首先需要在 pubspec.yaml 文件中添加 gt_dropdown 作为依赖项。

使用示例

最简示例

GTDropdown<String>(
  items: const ['Option 1', 'Option 2', 'Option 3'],
)

自定义设置

GTDropdown<String>(
  items: const ['Option 1', 'Option 2', 'Option 3'],
  dropdownBorderRadius: BorderRadius.circular(8), // 设置下拉菜单的圆角
  dropdownBorderColor: Colors.greenAccent, // 设置下拉菜单的边框颜色
  menuBorderRadius: BorderRadius.circular(8), // 设置菜单项的圆角
  menuBorderColor: Colors.green, // 设置菜单项的边框颜色
  highlightSelectedItem: true, // 高亮选中的项目
  selectedHighlightTextStyle: const TextStyle(
    color: Colors.blue, // 选中项的文本颜色
    fontWeight: FontWeight.bold, // 选中项的文本加粗
  ),
  selectedItemColor: Colors.blue.shade100, // 选中项的背景颜色
  validator: (value) => value != null, // 验证函数
  validationMessage: 'Please select an option', // 验证失败时的提示信息
  errorBorderColor: Colors.red, // 验证失败时的边框颜色
  name: 'dropdown1', // 可选：用于标识
)

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 gt_dropdown 插件，并结合表单验证和提交功能。

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

/// Flutter应用的主入口点。
void main() {
  runApp(const MyApp());
}

/// 应用的根小部件。
class MyApp extends StatefulWidget {
  const MyApp({super.key});

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

/// `MyApp` 小部件的状态类。
class _MyAppState extends State<MyApp> {
  /// 用于管理表单状态并执行验证的Key。
  final _formKey = GlobalKey<FormState>();

  /// 处理表单提交。
  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      // 表单有效，可以进行提交
      debugPrint('Form is valid');
    } else {
      // 表单无效
      debugPrint('Form is invalid');
    }
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const Text('GTDropdown Example'),
        ),
        body: Form(
          key: _formKey,
          child: Column(
            children: [
              // GTDropdown 小部件
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 10.0),
                child: GTDropdown<String>(
                  items: const ['Option 1', 'Option 2', 'Option 3'],
                  defaultText: 'Select an option', // 默认文本
                  dropdownBorderRadius: BorderRadius.circular(8), // 下拉菜单的圆角
                  dropdownBorderColor: Colors.greenAccent, // 下拉菜单的边框颜色
                  menuBorderRadius: BorderRadius.circular(8), // 菜单项的圆角
                  menuBorderColor: Colors.green, // 菜单项的边框颜色
                  highlightSelectedItem: true, // 高亮选中的项目
                  selectedHighlightTextStyle: const TextStyle(
                    color: Colors.blue, // 选中项的文本颜色
                    fontWeight: FontWeight.bold, // 选中项的文本加粗
                  ),
                  selectedItemColor: Colors.blue.shade100, // 选中项的背景颜色
                  validator: (value) => value != null, // 验证函数
                  validationMessage: 'Please select an option', // 验证失败时的提示信息
                  errorBorderColor: Colors.red, // 验证失败时的边框颜色
                  name: 'dropdown1', // 可选：用于标识
                ),
              ),
              const SizedBox(height: 20),
              // 提交按钮
              ElevatedButton(
                onPressed: _submitForm,
                child: const Text('Submit'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}