Flutter综合下拉选择插件comprehensive_dropdown的使用

Flutter综合下拉选择插件comprehensive_dropdown的使用

comprehensive_dropdown 是一个具有额外功能的下拉菜单小部件。🚀

开始使用

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

import 'package:comprehensive_dropdown/comprehensive_dropdown.dart';

使用说明

添加额外的小部件到下拉菜单

你可以使用它来添加一个按钮以添加或创建项目。

CDropdownMenu(
    margin: EdgeInsets.symmetric(horizontal: 45),
    enableFilter: true,
    focusNode: FocusNode(),
    actionWidgetPosition: ActionWidgetPosition.bottom,
    actionWidget: TextButton.icon(
    onPressed: () {
        log('action worked');
    },
    label: const Text('Add Item'),
    icon: Icon(Icons.add),
    ),
    menuEntries: const [
        CMenuEntry(value: "Cat", label: 'Cat'),
        CMenuEntry(value: "Dog", label: 'Dog'),
        CMenuEntry(value: "Elephant", label: 'Elephant'),
    ],
)

或者为选项添加描述：

CDropdownMenu(
    margin: EdgeInsets.symmetric(horizontal: 45),
    enableFilter: true,
    focusNode: FocusNode(),
    actionWidgetPosition: ActionWidgetPosition.top,
    actionWidget: Text("filter applied = [[category='Animals']]"),
    menuEntries: const [
        CMenuEntry(value: "Cat", label: 'Cat'),
        CMenuEntry(value: "Dog", label: 'Dog'),
        CMenuEntry(value: "Elephant", label: 'Elephant'),
    ],
)

完整示例代码

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

import 'dart:developer';

import 'package:comprehensive_dropdown/comprehensive_dropdown.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Comprehensive Dropdown',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const ExampleWidget(),
    );
  }
}

class ExampleWidget extends StatefulWidget {
  const ExampleWidget({super.key});

  [@override](/user/override)
  State<ExampleWidget> createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidget> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.redAccent,
        title: const Text(
          "Comprehensive Dropdown",
          style: TextStyle(fontSize: 20, color: Colors.white),
        ),
      ),
      body: Padding(
        padding: const EdgeInsets.only(top: 200.0),
        child: CDropdownMenu(
          margin: const EdgeInsets.symmetric(horizontal: 45),
          enableFilter: false,
          actionWidgetPosition: ActionWidgetPosition.bottom,
          hintText: "Select Animal",
          actionWidget: TextButton.icon(
            style: TextButton.styleFrom(padding: EdgeInsetsDirectional.zero),
              icon: const Icon(
                Icons.add_circle,
                color: Colors.white,
              ),
              onPressed: () {},
              label: const Text("Add Item", style: TextStyle(color: Colors.white),)),
          trailingIcon: const Icon(
            CupertinoIcons.chevron_down,
            size: 18,
          ),
          menuStyle: MenuStyle(
              shadowColor: const WidgetStatePropertyAll<Color>(Colors.transparent),
              backgroundColor: WidgetStatePropertyAll<Color>(Colors.redAccent.withOpacity(0.8))),
          menuEntries: const [
            CMenuEntry(value: "Cat", label: 'Cat', labelWidget: Text("Cat", style: TextStyle(color: Colors.white),)),
            CMenuEntry(value: "Dog", label: 'Dog', labelWidget: Text("Dog", style: TextStyle(color: Colors.white),)),
            CMenuEntry(value: "Elephant", label: 'Elephant', labelWidget: Text("Elephant", style: TextStyle(color: Colors.white),)),
          ],
        ),
      ),
    );
  }
}