Description:

animated search

Animated Search For Flutter App #
The AnimatedSearch widget is a customizable animated search bar widget for Flutter that can be used to implement a search feature in your app. It displays a search box that can be expanded by clicking on the search icon, and when expanded, it displays a TextField that can be used to enter search queries.
Features #

Customizable search animation widget
Expandable search bar with TextField for entering search queries

ANIMATED SEARCH

Installing #
To install the package, add the following to your project's pubspec.yaml file:
1. Depend on it #
Add this to your package's pubspec.yaml file:
dependencies:
animated_search: ^0.0.5
copied to clipboard
2. Install it #
After adding the dependency, run the following command in the terminal to install the package:
You can install packages from the command line:
with pub:
$ pub get
copied to clipboard
with Flutter:
$ flutter pub get
copied to clipboard
3. Import it #
Now in your Dart code, you can use:
import 'package:animated_search/animated_search.dart';
copied to clipboard
Usage #
To use the AnimatedSearch widget, include it in your build method as shown below:
AnimatedSearch is a Stateful Widget that produces search animations.
Include it in your build method like:
AnimatedSearch(
width: 0.7,
textEditingController: _textEditingController,
startIcon: Icons.search,
closeIcon: Icons.close,
iconColor: Colors.white,
cursorColor: Colors.white,
decoration: InputDecoration(
hintText: 'Search',
hintStyle: TextStyle(color: Colors.grey[300]),
border: InputBorder.none,
),
onChanged: (String value) {
// handle search query
},
)
copied to clipboard
Customization #
The AnimatedSearch widget can be customized by providing values for its constructor parameters. For example, you can customize the appearance and behavior of the widget by providing a custom width, controller, icons, colors, and decoration for the search query text field.
AnimatedSearch(
width: 0.7, // Width of the search bar when expanded (default: 0.7)
textEditingController: myController, // A controller for the search query text field
startIcon: Icons.search, // Icon to show when search bar is folded
closeIcon: Icons.close, // Icon to show when search bar is expanded
iconColor: Colors.white, // Color of the search icon (default: Colors.white)
cursorColor: Colors.white, // Color of the search query text field cursor (default: Colors.white)
onChanged: (String value) {}, // A callback to handle changes in the search query text field
decoration: InputDecoration( // Custom decoration for the search query text field
hintText: 'Search',
hintStyle: TextStyle(color: Colors.grey[300]),
border: InputBorder.none,
),
);

copied to clipboard
Contributions #
Contributions are welcome! If you find a bug or would like to suggest a new feature, please open an issue or submit a pull request.
License #
This package is licensed under the MIT License. See the LICENSE file for details.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter