Pub

动画搜索栏

Animated Search Bar 包可让您为 Flutter 应用添加一个漂亮的搜索栏。

安装

  1. 将最新版本的包添加到您的 pubspec.yaml (并运行 dart pub get)

dependencies:
  expandable_search_bar: ^0.0.1
  1. 导入包并在您的 Flutter 应用中使用它。
import 'package:expandable_search_bar/expandable_search_bar.dart';

截图

Preview1

Preview2

⚠注意：正如您在截图中看到的，此包仅适用于鼠标设备（Web、Windows、macOS、Linux），但我正在努力为其添加对移动设备的支持。

示例

您可以修改许多属性。按需自定义

  • width
  • text
  • gutter（文本字段和按钮之间的间距）
  • 背景颜色
  • 图标颜色
  • 图标背景颜色
  • 条下的阴影
  • 按钮下的阴影
  • 动画时长（也适用于文本字段）
  • 动画曲线（也适用于文本字段）

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,
          ),
        ),  
      ),  
    );  
  }  
}

下一步目标

  • 支持移动设备（不幸的是，它仅适用于“鼠标”设备）。

  • 更改文本的字体和颜色样式。

支持

您可以通过在 Instagram 和 GitHub 上关注我来支持我。

另外，别忘了在 GitHub 上为本项目点星

GitHub

查看 Github