Flutter动画下拉按钮插件animated_dropdown_button的使用

Flutter 动画下拉按钮插件 animated_dropdown_button 的使用

简介

animated_dropdown_button 是一个带有有趣动画的简单下拉按钮。目前它只能列出字符串，并且可以通过 AnimatedDropdownButtonController 获取值。请适度使用。

开始使用

首先，你需要实例化一个 AnimatedDropdownButtonController，并传入一个字符串列表和初始值，该初始值必须存在于列表中。然后你可以实例化一个 AnimatedDropdownButton 并传入创建好的控制器。

你还可以使用 AnimatedSearchBox。只需先实例化一个 AnimatedSearchBoxController。AnimatedSearchBox 完全可定制。

示例代码

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

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

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

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

  // 这个小部件是你的应用程序的根。
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '动画下拉按钮演示',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: '动画下拉按钮演示'),
    );
  }
}

class AnimalModel extends AnimatedDropdownItem {
  final String name;

  AnimalModel(this.name);

  @override
  String get text => name;

  @override
  String get value => name;
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final AnimatedSearchBoxController animatedSearchController;

  final AnimatedDropdownButtonController animalsController = AnimatedDropdownButtonController(
    items: [
      '猫',
      '狗',
      '鸟',
      '猫',
      '狗',
    ],
    initialValue: '狗',
  );

  @override
  void initState() {
    // 初始化状态
    super.initState();
    animatedSearchController = AnimatedSearchBoxController(
      items: animals,
      initialValue: AnimalModel(
        '猫',
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Container(
        color: const Color.fromARGB(255, 165, 149, 149),
        child: Center(
          child: SingleChildScrollView(
            child: Column(
              children: [
                const SizedBox(height: 50),
                AnimatedSearchBox(
                  width: 336,
                  controller: animatedSearchController,
                  backgroundColor: Colors.white,
                  hintText: '输入动物名称',
                ),
                const SizedBox(
                  height: 50,
                ),
                AnimatedDropdownButton(
                  controller: animalsController,
                  backgroundColor: Colors.red,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

// 动物模型列表
final List<AnimalModel> animals = [
  AnimalModel('猫'),
  AnimalModel('狗'),
  AnimalModel('鸟'),
  AnimalModel('驴'),
  AnimalModel('猴子'),
  AnimalModel('山羊'),
  AnimalModel('马'),
  AnimalModel('狮子'),
];

代码解释

1. 导入库

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

2. 主应用

   void main() {
     runApp(const MyApp());
   }
   
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: '动画下拉按钮演示',
         theme: ThemeData(
           colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
           useMaterial3: true,
         ),
         home: const MyHomePage(title: '动画下拉按钮演示'),
       );
     }
   }
   

3. 定义动物模型

   class AnimalModel extends AnimatedDropdownItem {
     final String name;
   
     AnimalModel(this.name);
   
     @override
     String get text => name;
   
     @override
     String get value => name;
   }
   

4. 主页状态

   class MyHomePage extends StatefulWidget {
     const MyHomePage({super.key, required this.title});
   
     final String title;
   
     @override
     State<MyHomePage> createState() => _MyHomePageState();
   }
   
   class _MyHomePageState extends State<MyHomePage> {
     late final AnimatedSearchBoxController animatedSearchController;
   
     final AnimatedDropdownButtonController animalsController = AnimatedDropdownButtonController(
       items: [
         '猫',
         '狗',
         '鸟',
         '猫',
         '狗',
       ],
       initialValue: '狗',
     );
   
     @override
     void initState() {
       super.initState();
       animatedSearchController = AnimatedSearchBoxController(
         items: animals,
         initialValue: AnimalModel(
           '猫',
         ),
       );
     }
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           backgroundColor: Theme.of(context).colorScheme.inversePrimary,
           title: Text(widget.title),
         ),
         body: Container(
           color: const Color.fromARGB(255, 165, 149, 149),
           child: Center(
             child: SingleChildScrollView(
               child: Column(
                 children: [
                   const SizedBox(height: 50),
                   AnimatedSearchBox(
                     width: 336,
                     controller: animatedSearchController,
                     backgroundColor: Colors.white,
                     hintText: '输入动物名称',
                   ),
                   const SizedBox(
                     height: 50,
                   ),
                   AnimatedDropdownButton(
                     controller: animalsController,
                     backgroundColor: Colors.red,
                   ),
                 ],
               ),
             ),
           ),
         ),
       );
     }
   }
   

5. 动物模型列表

   final List<AnimalModel> animals = [
     AnimalModel('猫'),
     AnimalModel('狗'),
     AnimalModel('鸟'),
     AnimalModel('驴'),
     AnimalModel('猴子'),
     AnimalModel('山羊'),
     AnimalModel('马'),
     AnimalModel('狮子'),
   ];