Flutter 动画搜索栏
本项目展示了一个 Flutter 应用的自定义动画搜索栏，搜索图标在点击后会扩展成一个文本输入框。
概述
搜索栏最初是一个简单的圆形图标。点击图标后，它会平滑地过渡成一个矩形搜索栏，用户可以在其中输入文本。当用户从输入框失去焦点时，搜索栏会恢复为原始图标，提供了流畅的用户体验。
动画是通过 Flutter 的 AnimatedContainer 小部件实现的，该小部件提供了高度可定制的动画时长和属性控制。
特点
- 搜索图标和输入框之间的平滑动画
- 易于集成到现有的 Flutter 项目中
- 通过 Flutter 主题定制外观和感觉
How It Works (它是如何工作的)
核心逻辑封装在 AnimatedSearchBar 小部件中。该小部件维护一个布尔状态来跟踪搜索栏是否处于活动状态。
- 当搜索栏不活跃时（_isSearchActive = false），它会显示一个图标。
- 当用户点击图标时，布尔状态会切换，图标会动画成一个文本输入框。
- 如果用户从输入框失去焦点（通过提交搜索或点击屏幕的其他地方），布尔状态会再次切换，搜索栏会动画回图标。
所有这些过渡都通过 AnimatedContainer 小部件进行了平滑动画。
使用方法
要在您的项目中使用此自定义小部件，请按照以下步骤操作：
- 克隆此存储库或将
animated_search_bar.dart文件复制到您的项目中。 - 在您想使用搜索栏的文件中导入
animated_search_bar.dart。 - 将
AnimatedSearchBar小部件添加到您的 Widget 树中。
您可以在 AnimatedContainer 小部件中修改颜色、borderRadius、boxShadow 等属性，以进一步自定义搜索栏的外观和感觉。
