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 分類

安裝套件