Help developers build the most beautiful search bar🍹.

Related tags

Templates fsearch
Overview

fsearch

Help developers build the most beautiful search bar 🍹 .

[FSearch] provides developers with a one-stop search bar construction service. Supports borders, corners, gradient background colors and shadows, as well as any number of prefix and suffix action buttons. Provides beautiful Hint animation.

Author:Newton([email protected])

English | 简体中文

Like it? Please cast your Star 🥰

Features

  • Support beautiful border effect

  • Provide rich corner configuration

  • Support stunning gradient effects

  • Provides easy to use shadow capabilities

  • Support any number of prefix and suffix action buttons

  • Provide colorful, flexible and powerful Hint effects

  • Controllers that are easier to use for developers

🛠 Guide

⚙️ Parameter & Interface

🔩 FSearch Param

Param Type Necessary Default desc
controller FSearchController false null Controller. See [FSearchController] for details
width double false null width
height double false null height
enable bool false true enable
onTap VoidCallback false null Callback when the input box is clicked
text String false null Input content
onSearch ValueChanged false null Callback when the keyboard search button is clicked
corner FSearchCorner false null Corner effect. See [FSearchCorner] for details
cornerStyle FSearchCornerStyle false null Corner style. The default [FSearchCornerStyle.round]. See [FSearchCornerStyle] for details
strokeColor Color false null Border color
strokeWidth double false null border width
backgroundColor Color false null background color
gradient Gradient false null Background gradient. Will overwrite [backgroundColor]
shadowColor Color false null Set widget shadow color
shadowOffset Offset false null Set widget shadow color
shadowBlur double false null Set the standard deviation of the widget Gaussian and shadow shape convolution
cursorColor Color false null Cursor color
cursorWidth double false null Cursor width
cursorRadius double false null Cursor corner size
prefixes List false null Prefix action widget
suffixes List false null Suffix action widget
padding EdgeInsets false null The distance between the actual input area and the edge of [FSearch]
margin EdgeInsets false null [FSearch] outer spacing
style TextStyle false null Input text style
hintStyle TextStyle false null Hint text style
hints List false null Hint. If there is only one Hint, Hint swap animation cannot be enabled.
hintSwitchDuration Duration false null Hint exchange interval
hintSwitchAnimDuration Duration false null Hint swap animation time
hintSwitchEnable bool false null Whether to enable Hint swap animation
hintSwitchType FSearchAnimationType false null Hint exchanges animation types. The default [FSearchAnimationType.Scroll]. See [FSearchAnimationType] for details.
stopHintSwitchOnFocus bool true null When the focus is obtained, whether to automatically stop the Hint exchange animation.
hintPrefix Widget false null Hint prefix widget
center bool false null Centered。

💻 FSearchController

FSearchController is the controller of FSearch, which can return to the input text, Hint, focus status and other information. At the same time provide a variety of monitoring and text update capabilities.

🔩 Param

Param Type Desc
text String Input text
hint String Current Hint text
focus bool Focus state

📲 Interface

  • setListener(VoidCallback listener)

Set input monitor

  • setOnFocusChangedListener(ValueChanged<bool> listener)

Set focus change monitoring

  • requestFocus()

Request focus

  • clearFocus()

Remove focus

🎥 FSearchAnimationType

FSearchAnimationType Used to specify the FSearch Hint exchange animation type.

enum FSearchAnimationType {
  /// 渐变动画
  ///
  /// Alpha animation
  Fade,

  /// 缩放动画
  ///
  /// Scale animation
  Scale,

  /// 上下滚动动画
  ///
  /// Scroll up and down animation
  Scroll,
}

📺 Demo

🔩 Base Demo

FSearch(

  /// 设置高
  ///
  /// Set height
  height: 30.0,
  
  /// 设置背景颜色
  ///
  /// Set background color
  backgroundColor: color,

  /// 设置输入内容样式
  ///
  /// Set input text style
  style: style,

  /// 点击键盘搜索时触发
  ///
  /// Fired when you click on the keyboard to search
  onSearch: (value) {
    /// do something
  },

  prefixes: [buildAction()],
)

Using FSearch to build a search bar is very relaxing.

Through some simple parameters, developers can easily change the size, color, and font of the search bar.

When the user clicks on the keyboard to search for Action, onSearch will be triggered, allowing the developer to perform some search operations here.

🌖 Prefixes & Suffixes

FSearch(
  height: 30.0,
  backgroundColor: mainBackgroundColor,
  style: style,

  /// 前缀 Widget
  ///
  /// prefix widget
  prefixes: [ buildAction() ],

  /// 后缀 Widget
  ///
  /// suffix widget
  suffixes: [
    buildAction_1(),
    buildAction_2(),
    buildAction_3(),
  ],
  onSearch: _onSearch,
)

In FSearch, developers can configure any number of prefix or suffix action buttons for the search bar through the prefixes and suffixes parameters.

🌈 Gradient

FSearch(
  height: 30.0,
  backgroundColor: mainBackgroundColor,
  style: style,

  /// 配置渐变色
  ///
  /// Set gradient
  gradient: _gradient,
  prefixes: [ buildAction() ],
)

FSearch can support developers to create a beautiful gradient search bar.

Only need to configure through the gradient parameter.

🍄 Corner & Stroke & Shadow

/// #1
FSearch(
  height: 30.0,
  backgroundColor: color,
  style: style,

  /// 边角
  ///
  /// Corner
  corner: FSearchCorner(
      leftTopCorner: 15.0,
      leftBottomCorner: 15.0,
      rightBottomCorner: 15.0),

  /// 边框宽
  ///
  /// border width
  strokeWidth: 1.0,

  /// 边框颜色
  ///
  /// border color
  strokeColor: mainTextTitleColor,

  /// 阴影
  ///
  /// shadow
  shadowColor: Colors.black38,
  shadowBlur: 5.0,
  shadowOffset: Offset(2.0, 2.0),
  prefixes: [buildAction()],
)

The Border and Shadow effects of FSearch are the same as those of other FWidget members, and are simple and easy to use.

Through the corner parameter, developers can use FSearchCorner to freely control the table corner size of FSearch.

/// #2
FSearch(
  height: 30.0,
  backgroundColor: color,
  style: style,

  /// 边角
  ///
  /// Corner
  corner: FSearchCorner.all(6.0),

  /// 边角风格
  ///
  /// Corner style
  cornerStyle: FSearchCornerStyle.bevel,
  prefixes: [buildAction()],
)

If combined with cornerStyle, more complex and exquisite effects can be achieved.

📍 Cursor

FSearch(
  /// 光标配置
  ///
  /// Cursor
  cursorColor: Colors.red[200],
  cursorRadius: 5.0,
  cursorWidth: 5.0,

  height: 36.0,
  style: style,
  gradient: _gradient,
  corner: _corner,
  prefixes: [ buildAction() ],
  suffixes: [ buildAction() ],
)

FSearch supports modifying the cursor in the input box of the search bar. You can change it to whatever you want.

🗂 Hint

/// #1
FSearch(
  height: 36.0,
  style: style,
  color: _color,
  corner: _corner,
  prefixes: [ buildAction() ],
  suffixes: [ buildAction() ],

  /// Hints
  hints: [
    "FSuper is awesome 👍",
    "Come to use FButton",
    "You will love FSearch",
  ],

  /// 开启 hint 交换动画
  ///
  /// Turn on hint exchange animation
  hintSwitchEnable: true,

  /// 配置 hint 交换动画类型
  ///
  /// Configure hint exchange animation type
  hintSwitchType: FSearchAnimationType.Fade,
)

FSearch provides developers with a very powerful Hint effect.

Developers can easily set multiple Hint for FSearch, and can configure multiple Hint swap animations by configuring hintSwitchEnable: true.

When the user starts typing, Hint will be automatically hidden, and the swap animation will also be stopped.

When the content of the search input box becomes empty again, Hint will appear again, and the exchange animation will start playing.

/// #2
FSearch(
  height: 36.0,
  style: style,
  color: _color,
  corner: _corner,
  prefixes: [ buildAction() ],
  suffixes: [ buildAction1(),  buildAction2()],
  hints: [
    "Do you want to try FFloat?😃",
    "FRadio can do more 😱 !",
    "I heard that you have been waiting for FDottedLine for a long time...",
  ],
  hintSwitchEnable: true,
)

FSearch has prepared rich exchange animations for developers. By default, FSearch will use the most common scroll swap animation, which is FSearchAnimationType.Scroll.

Of course, developers can configure their favorite animation types through the hintSwitchType parameter.

💡 Note that when hints.length == 1, the Hint swap animation will not be played. Only an ordinary Hint will be displayed at this time.

/// #3
FSearch(
  height: 36.0,
  style: style,
  color: _color,
  corner: _corner,
  prefixes: [ buildAction() ],
  suffixes: [ buildAction() ],

  /// Hints
  hints: [
    "Embrace FWidget 👬",
    "We care about your app 🥰",
    "Want to build beautiful apps 🤨 ?",
  ],
  hintSwitchEnable: true,

  /// 配置 hint 交换动画类型
  ///
  /// Configure hint exchange animation type
  hintSwitchType: FSearchAnimationType.Scale,

  /// 获得焦点时是否停止交换动画
  ///
  /// Whether to stop exchanging animation when focus is obtained
  stopHintSwitchOnFocus: false,
)

By default, when FSearch gains input focus, FSearch will automatically pause Hint to swap animations; when it gets focus again, it will resume automatically.

By configuring stopHintSwitchOnFocus: false, you can continue to play Hint swap animation until the user starts typing when FSearch has the focus.

💻 Controller

FSearch(
  controller: _controller,
  height: 36.0,
  style: style,
  gradient: _gradient,
  corner: _corner,
  prefixes: [ buildAction() ],
  suffixes: [ buildAction() ],
  hints: [
    "Want more beautiful widgets 🤨 ?",
    "We will launch the official website of FWidget",
    "Will you expect it?",
  ],
  hintStyle: hintStyle,
  hintSwitchEnable: true,
)

/// 获取输入框内容
///
/// Get the input box content
String input = controller.text;

/// 清空输入框内容
///
/// Clear the contents of the input box
controller.text = null;

/// 获取当前 hint,如果有的话
///
/// Get the current hint, if any
String hint = controller.hint;

/// 移除焦点
/// 
/// Remove focus
controller.clearFocus();


/// 获取焦点
///
/// Request focus
controller.requestFocus();

FSearch provides developers with simple, easy-to-use, certain controllers, through which developers can modify or obtain the contents of the search bar at any location.

😃 How to use?

Add dependencies in the project pubspec.yaml file:

🌐 pub dependency

dependencies:
  fsearch: ^<version number>

⚠️ Attention,please go to [pub] (https://pub.dev/packages/fsearch) to get the latest version number of FSearch

🖥 Git dependency

dependencies:
  fsearch:
    git:
      url: '[email protected]:Fliggy-Mobile/fsearch.git'
      ref: '<Branch number or tag number>'

⚠️ Attention,please refer to [FSearch] (https://github.com/Fliggy-Mobile/fsearch) official project for branch number or tag.

💡 License

Copyright 2020-present Fliggy Android Team <[email protected]>.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at following link.

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

Like it? Please cast your Star 🥰


How to run Demo project?

  1. clone project to local

  2. Enter the project example directory and run the following command

flutter create .
  1. Run the demo in example
You might also like...

Flutter Search bar

search_bar Flutter search bar Search suggestion and search lists Demo video Record_2021-12-09-19-59-51.mp4 ScreenShots Getting Started This project is

Dec 9, 2021

Custom bottom bar - A bottom tool bar that can be swiped left or right to expose more tools.

Custom bottom bar - A bottom tool bar that can be swiped left or right to expose more tools.

custom_bottom_bar A bottom tool bar that can be swiped left or right to expose more tools. usage Create your custom bottom bars with up to four custom

Jan 26, 2020

A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your issue.

r_scan A flutter plugin about qr code or bar code scan , it can scan from file、url、memory and camera qr code or bar code .Welcome to feedback your iss

Nov 11, 2022

Flutter-nav-bottom-bar-tutorial - A flutter bottom navigation bar tutorial

Flutter-nav-bottom-bar-tutorial - A flutter bottom navigation bar tutorial

Flutter Bottom Navigation Bar Tutorial A tutorial with various Flutter bottom na

Oct 25, 2022

Animation nav bar - Flutter Animated Navigation Bar

Animation nav bar - Flutter Animated Navigation Bar

Flutter Animated Navigation Bar Getting Started This project is a starting point

Dec 30, 2022

This is a JazzCash UI clone ( Modern Wallet App in Pakistan), implementing modern app bar animmation. One can take a concept of making app bar with animation.

jazzcash_ui This is a JazzCash UI clone ( Modern Wallet App in Pakistan), implementing modern app bar animmation. One can take a concept of making app

Nov 27, 2022

More than 130+ pages in this beautiful app and more than 45 developers has contributed to it.

More than 130+ pages in this beautiful app and more than 45 developers has contributed to it.

flutter-ui-nice ❤️ Star ❤️ the repo to support the project or 😄 Follow Me.Thanks! Facebook Page Twitter Medium QQ Group Flutter Open NieBin Flutter O

Jan 3, 2023

More than 130+ pages in this beautiful app and more than 45 developers has contributed to it.

More than 130+ pages in this beautiful app and more than 45 developers has contributed to it.

flutter-ui-nice ❤️ Star ❤️ the repo to support the project or 😄 Follow Me.Thanks! Facebook Page Twitter Medium QQ Group Flutter Open NieBin Flutter O

Jan 5, 2023

Flutter integration for Supabase. This package makes it simple for developers to build secure and scalable products.

Flutter integration for Supabase. This package makes it simple for developers to build secure and scalable products.

supabase_flutter Flutter package for Supabase. What is Supabase Supabase is an open source Firebase alternative. We are a service to: listen to databa

Jan 7, 2023
Comments
  • 设置 margin 后输入文本整体偏下,刚好是未设置margin时居中的位置

    设置 margin 后输入文本整体偏下,刚好是未设置margin时居中的位置

    [✓] Flutter (Channel stable, v1.17.1, on Mac OS X 10.15.5 19F101, locale zh-Hans-CN) • Flutter version 1.17.1 at *** • Framework revision f7a6a7906b (6 weeks ago), 2020-05-12 18:39:00 -0700 • Engine revision 6bc433c6b6 • Dart version 2.8.2

    代码: class SearchBar extends StatelessWidget implements PreferredSizeWidget { Color appBarBackgroundColor;

    SearchBar({this.appBarBackgroundColor});

    @override Size get preferredSize => Size.fromHeight(kToolbarHeight);

    @override Widget build(BuildContext context) { appBarBackgroundColor ??= Theme.of(context).appBarTheme.color; return Container( color: appBarBackgroundColor, child: SafeArea( child: FSearch( enable: true, width: double.maxFinite, height: double.maxFinite, corner: FSearchCorner.all(18.0), cornerStyle: FSearchCornerStyle.round, strokeColor: UiColors.primaryColor, strokeWidth: 0.5, backgroundColor: appBarBackgroundColor, shadowColor: UiColors.textGrey3, shadowOffset: Offset(2.0, 2.0), shadowBlur: 4.0, padding: EdgeInsets.fromLTRB(10, 0, 20, 0), // margin: EdgeInsets.fromLTRB(16, 10, 16, 10), style: TextStyle(fontSize: 18, color: UiColors.textGrey0), prefixes: [ Padding( padding: EdgeInsets.only(left: 5, top: 6, bottom: 5), child: Icon(Icons.search, color: UiColors.textGrey1), ) ], hints: ['大家都在搜:李沁'], hintStyle: TextStyle(fontSize: 18, color: UiColors.textGrey1), onTap: () { log('onTap'); }, ), ), ); } }

    device-2020-06-23-165812 device-2020-06-23-170213

    opened by amd110 2
  • 请问光标和输入的rearing会往下偏移是咋回事呀!

    请问光标和输入的rearing会往下偏移是咋回事呀!

    这个是我的代码 FSearch( controller: controller, height: 30, backgroundColor: Colours.bg_gray, corner: FSearchCorner.all(14), style: TextStyle(fontSize: 12.0, color: Colors.black), margin: EdgeInsets.only(left: 12.0, right: 12.0), hints: ["", ""], hintStyle: TextStyle(fontSize: 12.0, color: Colors.black), prefixes: [ const SizedBox(width: 15.0), Icon( Icons.search, size: 18, color: Colours.text_tab_black, ), const SizedBox(width: 3.0) ], onSearch: (value) { setState(() {}); }, ),

    image

    opened by shaohui93 1
  • hints设置一个 不显示,圆角设置了所有但是左上角的没有圆角

    hints设置一个 不显示,圆角设置了所有但是左上角的没有圆角

    FSearch(
                      corner: FSearchCorner(
                          leftTopCorner: 18,
                          leftBottomCorner: 18,
                          rightTopCorner: 18,
                          rightBottomCorner: 18),
                      cornerStyle: FSearchCornerStyle.round,
                      strokeColor: Colors.blue,
                      center: true,
                      hints: ["请输入讲师姓名搜索"],
                      // hintPrefix: Icon(Icons.search),
                      width: width - 80,
                      height: 36,
                      backgroundColor: ColorUtil.fromHex("#F4F5F6"),
                      hintStyle: TextStyle(fontSize: 14),
                    )
    
    opened by CoderWeiLee 0
  • Cannot run with sound null safety

    Cannot run with sound null safety

    Error: Cannot run with sound null safety, because the following dependencies don't support null safety:

    • package:fsearch

    For solutions, see https://dart.dev/go/unsound-null-safety

    什么情况?

    opened by reimal 1
Owner
Fliggy Mobile
We create legends
Fliggy Mobile
A super powerful widget to help developers build complex views quickly and comfortably.

FSuper FSuper can help developers build complex views quickly and comfortably. It supports rich text, rounded corners, borders, pictures, small red do

Fliggy Mobile 481 Dec 29, 2022
A super powerful widget to help developers build complex views quickly and comfortably.

FSuper FSuper can help developers build complex views quickly and comfortably. It supports rich text, rounded corners, borders, pictures, small red do

Fliggy Mobile 481 Dec 29, 2022
SearchBar widget to handle most of search cases

flappy_search_bar A SearchBar widget handling most of search cases. Usage To use this plugin, add flappy_search_bar as a dependency in your pubspec.ya

Smart&Soft 171 Dec 2, 2022
DEVS: Developer Board and Jobs Listing | For Developers, By Developers

devs Setup Currently, this DEVS project is using the master channel of the Flutter SDK. TODO: Migrate to beta Clone the project git clone https://gith

Flutter Philippines Community 40 Apr 16, 2022
A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

A new flutter package project which contains lots of beautiful alert dialog that will help you lot to create beautiful awesome alert box very quickly and easily.

Karan Soni 8 Jan 8, 2022
Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.

GetWidget is a 100% free Flutter open-source UI Kit library built with Flutter SDK to make Flutter development easier and more joyful than ever. GetWi

Ionicfirebaseapp 3.7k Jan 1, 2023
Most popular and easy to use open source UI library with 1000+ Widgets to build flutter app.

GetWidget is a 100% free Flutter open-source UI Kit library built with Flutter SDK to make Flutter development easier and more joyful than ever. GetWi

Ionicfirebaseapp 3.7k Jan 3, 2023
Build context - Access most used properties in your BuildContext instance.

Languages: English | Brazilian Portuguse BuildContext Access most used properties in your BuildContext instance. This package relies on Dart's extensi

Pedro Massango 132 Dec 11, 2022
Github-search - Allows users to search users on github Uses flutter

Github Search Github Search is a cross-platform mobile application powered by Flutter Framework and Github API. The application was built with simplic

Saul 3 Sep 13, 2022
A google browser clone which is made by using flutter and fetching the google search api for the search requests.

google_clone A new Flutter project. Project Preview Getting Started This project is a starting point for a Flutter application. A few resources to get

Priyam Soni 2 May 31, 2022