Flutter动画下拉表单字段插件animated_drop_down_form

Flutter动画下拉表单字段插件animated_drop_down_form_field的使用

此包提供了带有内置动画和可自定义属性的炫酷下拉按钮，可以帮助你创建专业的用户界面。

我已经在YouTube上制作了一个视频来解释此包的所有细节。

使用

此包提供了许多属性，使你可以创建完全自定义的下拉表单字段。为了覆盖所有这些属性，我们将其分为5个类别：

1. 必需属性

只有一个必需属性，名为items。这些项是一系列将向用户显示的小部件。

AnimatedDropDownFormFormField(
    items:[
        Text("Item 1"),
        Text("Item 2"),
        Text("Item 3"),
        Text("Item 4"),
    ],
);

2. 按钮属性

这些属性允许你控制按钮小部件，共有5个属性：

buttonDecoration: 这是一个BoxDecoration对象，可以完全控制按钮装饰。

AnimatedDropDownFormFormField(
    items:_items,
    buttonDecoration:BoxDecoration(color:Colors.blueAccent,),
);

buttonPadding: 提供一些边距，使按钮内容与边缘之间有间距。

AnimatedDropDownFormFormField(
    items:_items,
    buttonPadding: EdgeInsets.all(20),
);

placeHolder: 如果用户尚未选择任何项目，则在此按钮中显示的小部件。

AnimatedDropDownFormFormField(
    items:_items,
    placeHolder: Text("No Data"),
);

actionWidget: 显示在下拉按钮末尾的小部件（通常是一个图标）。

AnimatedDropDownFormFormField(
    items:_items,
    actionWidget: Icon(Icons.arrow_drop_down),
);

onTapButton: 当用户点击按钮时执行的回调函数。

AnimatedDropDownFormFormField(
    items:_items,
    onTapButton:(){
        // 用户点击按钮时将执行此代码
    },
);

3. 下拉列表属性

这些属性用于控制下拉列表，共有9个属性。让我们逐一了解它们…

listHeight: 控制下拉列表的高度。

AnimatedDropDownFormFormField(
    items:_items,
    listHeight: 150,
);

listBackgroundDecoration: 此属性是一个BoxDecoration对象，用于控制列表的装饰。

AnimatedDropDownFormFormField(
    items:_items,
    listBackgroundDecoration: BoxDecoration(color:Colors.blueAccent,),
);

listPadding: 应用到列表内容的边距。

AnimatedDropDownFormFormField(
    items:_items,
    listPadding: EdgeInsets.all(20),
);

listScrollPhysics: 控制下拉列表的滚动行为。

AnimatedDropDownFormFormField(
    items:_items,
    listScrollPhysics: BouncingScrollPhysics(),
);

separatorWigdet: 在列表内的项目之间显示的小部件。

AnimatedDropDownFormFormField(
    items:_items,
    separatorWigdet:SizedBox(height: 15),
);

selectedItemIcon: 显示在选中项目的旁边的小部件（通常是图标）。

AnimatedDropDownFormFormField(
    items:_items,
    selectedItemIcon:Icon(Icons.done_rounded),
);

onChangeSelectedIndex: 当用户更改选中的项目时调用的函数，并传递当前选中项目的索引。

AnimatedDropDownFormFormField(
    items:_items,
    onChangeSelectedIndex: (int index){
        print(" Item At Index ${index} Is Currently Selected");
    },
);

onChangeListState: 当列表状态变化时（打开或关闭）调用的函数。

AnimatedDropDownFormFormField(
    items:_items,
    onChangeListState: (bool listIsOpened){
        print("The Drop Down List Is Currently ${listIsOpened?"Opened":"Closed"}");
    },
);

dropDownAnimationParameters: 此属性允许你控制下拉列表的打开和关闭动画，可以取一个对象，来自以下两个类之一：
- SizingDropDownAnimationParameters
- ScalingDropDownAnimationParameters
在这两个类中，你可以控制：
- Duration (列表打开的持续时间)
- Curve (列表打开的动画曲线)
- Reverse duration (列表关闭的持续时间)
- ReverseCurve (列表关闭的动画曲线)
但它们之间的区别在于：
- 在scaling中，你可以控制centerOfScaling属性，这是一个AlignmentGeometry对象，用于控制缩放开始和结束的点。

AnimatedDropDownFormFormField(
    items:_items,
    dropDownAnimationParameters: ScalingDropDownAnimationParameters(
        centerOfScaling:Alignment.topCenter,
        reverseDuration:Duration(seconds:2),
        reverseCurve:Curves.linear,
    ),
);

另一方面，在sizing中，你可以控制大小化的axis（可以是水平或垂直）。

AnimatedDropDownFormFormField(
    items:_items,
    dropDownAnimationParameters:SizingDropDownAnimationParameters(
        axis:Axis.vertical,
        duration:Duration(seconds:2),
        curve:Curves.linear,
    ),
);

4. 通用属性

本类别有3个属性。

defultTextStyle: 应用于任何没有样式的文本的TextStyle对象。

AnimatedDropDownFormFormField(
    items:_items,
    defultTextStyle: TextStyle(color:Colors.grey),
);

distanceBetweenListAndButton: 指定按钮与下拉列表之间的距离。

AnimatedDropDownFormFormField(
    items:_items,
    distanceBetweenListAndButton: 10,
);

controller: 需要一个类型为AnimatedDropDownFormFieldController的对象。

AnimatedDropDownFormFieldController _controller= AnimatedDropDownFormFieldController();
AnimatedDropDownFormFormField(
    items:_items,
    controller: _controller,
);

这个控制器提供了对AnimatedDropDownFormField小部件的三个控制功能：

程序化地打开列表

ElevatedButton(
    onPressed: (){
        _controller.openList();
    }, 
    child: const Text("Open The List"),
);

程序化地关闭列表

ElevatedButton(
    onPressed: (){
        _controller.closeList();
    }, 
    child: const Text("Close The List"),
);

验证用户输入

ElevatedButton(
    onPressed: (){
        _controller.validate();
    }, 
    child: const Text("Validate Input"),
);

5. 错误属性

本类别也有3个属性，负责处理用户输入的无效状态。它们分别是：

errorWidget: 如果验证失败，将显示在按钮下方的小部件。

AnimatedDropDownFormFormField(
    items:_items,
    errorWidget: Text("Not Valid Input"),
);

errorTextStyle: 任何在errorWidget内部且没有样式的文本将应用此TextStyle。

AnimatedDropDownFormFormField(
    items:_items,
    errorTextStyle: TextStyle(color:Colors.red),
);

errorBorder: 如果验证方法被调用且输入无效，则此Border对象将使按钮周围有边框。

AnimatedDropDownFormFormField(
    items:_items,
    errorBorder: Border.all(color:Colors.red),
);

完整示例代码

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

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 const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomeScreen(),
    );
  }
}

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

class _HomeScreenState extends State<HomeScreen> {
  final _items = [
    Text("Item 1"),
    Text("Item 2"),
    Text("Item 3"),
    Text("Item 4"),
  ];

  final _controller = AnimatedDropDownFormFieldController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Drop Down Form Field Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            AnimatedDropDownFormFormField(
              items: _items,
              buttonDecoration: BoxDecoration(color: Colors.blueAccent),
              buttonPadding: EdgeInsets.all(20),
              placeHolder: Text("Select an item"),
              actionWidget: Icon(Icons.arrow_drop_down),
              onTapButton: () {
                // 用户点击按钮时将执行此代码
              },
              listHeight: 200,
              listBackgroundDecoration: BoxDecoration(color: Colors.white),
              listPadding: EdgeInsets.all(10),
              listScrollPhysics: BouncingScrollPhysics(),
              separatorWigdet: SizedBox(height: 15),
              selectedItemIcon: Icon(Icons.done_rounded),
              onChangeSelectedIndex: (int index) {
                print("Item At Index ${index} Is Currently Selected");
              },
              onChangeListState: (bool listIsOpened) {
                print("The Drop Down List Is Currently ${listIsOpened ? "Opened" : "Closed"}");
              },
              dropDownAnimationParameters: ScalingDropDownAnimationParameters(
                centerOfScaling: Alignment.topCenter,
                reverseDuration: Duration(seconds: 2),
                reverseCurve: Curves.linear,
              ),
              defultTextStyle: TextStyle(color: Colors.grey),
              distanceBetweenListAndButton: 10,
              controller: _controller,
              errorWidget: Text("Not Valid Input"),
              errorTextStyle: TextStyle(color: Colors.red),
              errorBorder: Border.all(color: Colors.red),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                _controller.openList();
              },
              child: Text("Open The List"),
            ),
            ElevatedButton(
              onPressed: () {
                _controller.closeList();
              },
              child: Text("Close The List"),
            ),
            ElevatedButton(
              onPressed: () {
                _controller.validate();
              },
              child: Text("Validate Input"),
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter动画下拉表单字段插件animated_drop_down_form_field的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

zlyuanteng 1楼作者

更多关于Flutter动画下拉表单字段插件animated_drop_down_form_field的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter中使用animated_drop_down_form_field插件的一个示例代码案例。这个插件用于创建带有动画效果的下拉表单字段。首先，你需要确保在pubspec.yaml文件中添加依赖项：

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

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

接下来，你可以在你的Flutter项目中使用AnimatedDropDownFormField。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Drop Down Form Field Demo',
      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> options = [
    'Option 1',
    'Option 2',
    'Option 3',
    'Option 4',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Drop Down Form Field Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            AnimatedDropDownFormField<String>(
              decoration: InputDecoration(
                labelText: 'Select an option',
                border: OutlineInputBorder(),
              ),
              value: selectedValue,
              hint: Text('Select...'),
              onChanged: (newValue) {
                setState(() {
                  selectedValue = newValue;
                });
              },
              items: options.map<DropdownMenuItem<String>>((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
            ),
            SizedBox(height: 20),
            Text('Selected Value: $selectedValue'),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

添加依赖：在pubspec.yaml文件中添加了animated_drop_down_form_field插件。
创建应用：创建了一个简单的Flutter应用，其中包含一个主屏幕MyHomePage。
定义选项：在MyHomePage类中定义了一个包含选项的列表options。
使用AnimatedDropDownFormField：在UI中使用AnimatedDropDownFormField来创建一个带有动画效果的下拉表单字段。
处理选择：使用onChanged回调来更新选中的值，并在UI中显示选中的值。

这个示例展示了如何使用animated_drop_down_form_field插件来创建一个带有动画效果的下拉表单字段，并处理用户的选择。希望这个示例对你有所帮助！