Flutter仿拟态下拉菜单插件material_neumorphic_dropdown的使用

Flutter仿拟态下拉菜单插件material_neumorphic_dropdown的使用

简介

material_neumorphic_dropdown 是 Material Neumorphic 小部件套件的一部分。它提供了带有仿拟态效果的下拉菜单组件，可以为您的 Flutter 应用程序添加现代且美观的设计。

使用方法

添加依赖

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

dependencies:
  material_neumorphic: ^x.x.x

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

基本用法

NeumorphicDropdown 和 NeumorphicDropdownFormField 是两个主要的小部件，它们扩展了原生的 DropdownButton 和 DropdownButtonFormField，并增加了仿拟态风格。

属性说明

示例代码

以下是一个完整的示例代码，展示如何使用 NeumorphicDropdown 和 NeumorphicDropdownFormField：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Neumorphic Dropdown Example')),
        body: Center(child: DemoPage()),
      ),
    );
  }
}

class DemoPage extends StatefulWidget {
  [@override](/user/override)
  _DemoPageState createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  String name = 'A'; // 当前选中的值

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 使用 NeumorphicDropdown
          NeumorphicDropdown(
            margin: const EdgeInsets.symmetric(vertical: 12),
            borderRadius: const BorderRadius.all(Radius.circular(12.0)),
            depth: -4,
            value: name,
            items: [
              DropdownMenuItem(
                child: Text('A'),
                value: 'A',
              ),
              DropdownMenuItem(
                child: Text('B'),
                value: 'B',
              ),
              DropdownMenuItem(
                child: Text('C'),
                value: 'C',
              ),
            ],
            onChanged: (value) {
              setState(() {
                name = value as String;
              });
            },
          ),

          // 使用 NeumorphicDropdownFormField
          NeumorphicDropdownFormField(
            margin: const EdgeInsets.symmetric(vertical: 12),
            borderRadius: const BorderRadius.all(Radius.circular(12.0)),
            depth: -4,
            value: name,
            items: [
              DropdownMenuItem(
                child: Text('A'),
                value: 'A',
              ),
              DropdownMenuItem(
                child: Text('B'),
                value: 'B',
              ),
              DropdownMenuItem(
                child: Text('C'),
                value: 'C',
              ),
            ],
            onChanged: (value) {
              setState(() {
                name = value as String;
              });
            },
          ),
        ],
      ),
    );
  }
}