Flutter动画:使用opencontainer的showSearch

时间:2020-06-09 01:56:19

标签: flutter flutter-animation

在Flutter的animations包中,使用容器变换动画的一种示例是

进入扩展搜索的搜索栏

现在显示扩展搜索的通常方法是使用showSearch函数,在修改搜索动画时,我唯一了解的就是搜索委托。

是否可以将openContainershowSearch一起使用?还是应该创建自己的搜索页面以使用openContainer打开而不是依靠showSearch

1 个答案:

答案 0 :(得分:1)

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

如果要将标签从“搜索”更改为自定义标签 在您使用SearchDelegate扩展的类中提供标签 在super()内部作为属性searchFieldLabel

  To Change the Label :
  class StoreSearch extends SearchDelegate<String> {
  // @override
  // TODO: implement searchFieldLabel
  StoreSearch()
    : super(
        searchFieldLabel: "StoreSearch",//provide your Label here
     );}