In Flutter's animations package, one of the case example of using Container transform animation is
A search bar into expanded search
The usual way to show expanded search right now is using showSearch function, and the only thing I know in modifying the search animation is trough the search delegate.
Is there any way to use openContainer with showSearch? Or should I create my own search page to open with openContainer instead of relying on showSearch?
Here I found a Solution that may be complex because in our SearchDelegate we can't
implement animation implicitly.
We can change the package provided by flutter. GoTO
<Flutter Sdk Path>\packages\flutter\lib\src\material\search.dart(Ex:
E:\software\flutter\packages\flutter\lib\src\material\search.dart)
enter code here
Inside Official Search.dart we can make changes accordingly...
Here what I have done to change the animation Duration and type of Animation itself...
To change the animation DUration: line no 341
Duration get transitionDuration => const Duration(milliseconds: 700);//give your
// flexible number
To change the animation : line no 353
return your own animation type default there will be FadeTransition from line No 353-356 you can use SlideTransition, ScaleTransition in the place of FadeTransition
return SlideTransition( //for slide transition return this instead of Fade
//Animation
position: Tween<Offset>(
begin: const Offset(0, -0.5),
end: Offset.zero,
).animate(animation),
child: child,
);
// ScaleTransition( //for scale transition uncomment this(ZoomIn and Zoom out)
// scale: Tween<double>(
// begin: 0.0,
// end: 1.0,
// ).animate(
// CurvedAnimation(
// parent: animation,
// curve: Curves.fastOutSlowIn,
// ),
// ),
// child: child,
// );
If you want to change the label from Search to your custom Label provide the label in the class which you have extended with SearchDelegate inside super() as property searchFieldLabel
To Change the Label :
class StoreSearch extends SearchDelegate<String> {
// @override
// TODO: implement searchFieldLabel
StoreSearch()
: super(
searchFieldLabel: "StoreSearch",//provide your Label here
);}