expandable_search_bar

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个视觉吸引力强且带有动画效果的Flutter搜索栏，提供流畅的过渡效果和高度可定制性。它通过动态展开和直观的设计提升了用户体验，适用于需要引人入胜的搜索界面的应用程序。该包支持多个平台，并允许开发者根据应用主题自定义其外观和行为。

适合场景

增强移动应用搜索界面
创建交互式网络搜索体验
在桌面应用程序中集成动画搜索
提升电子商务应用的用户体验
向仪表板添加响应式搜索栏

主要特点

平滑可扩展动画
高度可定制的外观
跨平台兼容性
支持深色模式
与现有 UI 的轻松集成
可配置的搜索触发器

适合对象

Flutter 开发者构建搜索密集型应用
注重设计的UI/UX团队
针对多个平台的应用
寻求动画组件的开发者
需要现代搜索栏美学的项目

使用建议

可能需要在低端设备上进行性能调优
自定义样式可能会增加开发时间
内置搜索逻辑有限（需要外部实现）
依赖于 Flutter 的动画框架
未针对非常大的数据集进行优化，需要额外处理

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Pub

Animated Search Bar

Animated Search Bar package lets you add a beautiful search bar to your Flutter app.

Installation

Add the latest version of package to your pubspec.yaml (and rundart pub get):

dependencies:
  expandable_search_bar: ^latest_version

Import the package and use it in your Flutter App.

import 'package:expandable_search_bar/expandable_search_bar.dart';

Screenshots

⚠Note: As you see in the screenshots this package is only available on Mouse devices (Web, Windows, macOS, Linux), but I'm working on a solution to add mobile devices too.

Example

There are a number of properties that you can modify. Customize them as you want:

width
text
gutter (space between TextField and Button)
background color
icon color
icon background color
shadow under the bar
shadow under the button
animation duration (also for TextField)
animation curve (also for TextField)

class AnimatedBar extends StatelessWidget {  
  const AnimatedBar({
    Key? key,
  }) : super(key: key);

  final TextEditingController? searchController 
  = TextEditingController();

  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      body: Center(  
        child: const AnimatedSearchBar(  
          ExpandableSearchBar(
            onTap: () {
              print(
                searchController!.text.toString(),
              );
            },
            hintText: "search something",
            editTextController: searchController,
          ),
        ),  
      ),  
    );  
  }  
}

Next Goals

[ ] Support mobile devices (Unfortunately it's only available for "Mouse" devices).
[ ] Change font style and color for text.

Support

You can support me by following me on and GitHub

And also don't forget to star this package on GitHub

搜索插件、代码仓与 APP 分类

安装插件