Flutter 颤振容器变换（动画包）

随机地，当我看到flatter软件包和库时，我发现了flatter的

动画

，我看到了一个非常有用的动画，比如android

Gmail

应用程序，它有搜索导航动画。为了理解我的意思，你可以看到，第四部动画

---

我在github上的存储库中查看了这个包的源文件夹，但我找不到这个动画的示例实现，我也不确定是否有示例代码，有人能帮我如何使用

容器转换来实现它吗？
如果我错了，请纠正我，但这两个动画不是同一个动画吗

#1#2

Gif#1就是你说的你要找的东西。Gif#2是我在没有做任何有意义的更改的情况下通过以下示例得到的：

仔细看看
容器\u transition.dart
，特别是
\u ExampleCard
返回的内容。我不会在这里粘贴任何代码，因为：1）如果包发生变化，我建议未来的读者查看官方示例，而不是盲目地复制我的答案，因为这可能会过时；2） 您自己也没有发布任何内容。
动画包提供了小部件

此小部件有两个生成器：
openBuilder
closedBuilder


ClosedBuilder返回用户在打开小部件之前和关闭小部件之后看到的小部件，在下面的示例中，它是
SearchBar


OpenBuilder返回用户打开关闭的小部件后显示的页面，在下面的示例中是
SearchPage

打开和关闭操作通过调用回调触发：
openContainer
，
closeContainer


import'package:animations/animations.dart'；
进口“包装：颤振/材料.省道”；
void main（）=>runApp（MyApp（））；
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
亮度：亮度，亮度，
主样本：颜色。蓝色，
脚手架背景颜色：颜色。白色，
),
主页：MyHomePage（），
);
}
}
类MyHomePage扩展StatefulWidget{
constmyhomepage（{Key}）：超级（Key:Key）；
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态{
字符串搜索字符串；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：安全区(
孩子：填充(
填充：常数边集全部（15.0），
子对象：OpenContainer(
openBuilder:（_，closeContainer）=>SearchPage（closeContainer），
一旦关闭：（res）=>setState（）{
searchString=res；
}),
tappable:false，
closedBuilder:（\ux，openContainer）=>搜索栏(
searchString:searchString，
openContainer:openContainer，
),
),
),
),
);
}
}
类SearchBar扩展了无状态小部件{
常量搜索栏(
{Key Key，@required this.searchString，@required this.openContainer}）
：super（key:key）；
最终字符串搜索字符串；
容器的最终失效；
@凌驾
小部件构建（构建上下文）{
退货(
标高：3，
边界半径：边界半径。圆形（5），
孩子：InkWell(
onTap:openContainer，
子：容器(
填充：边缘设置。全部（10），
颜色：颜色，白色，
孩子：排(
儿童：[
图标（Icons.search），
尺寸箱（宽度：10），
searchString！=null
？扩展（子项：文本（搜索字符串））
：垫片（），
图标（Icons.mic），
],
),
),
),
);
}
}
类SearchPage扩展了无状态小部件{
常量搜索页(
这是一次失败{
关键点，
})：super（key:key）；
最后一个void函数（{String returnValue}）onClose；
@凌驾
小部件构建（构建上下文）{
返回脚手架(
正文：安全区(
子：列(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
容器(
填充：边缘组。对称（水平：10），
装饰：盒子装饰(
boxShadow：[
箱形阴影(
偏移量：偏移量（0,2），
半径：0，
半径：1，
颜色：颜色。黑色，
)
],
颜色：颜色，白色，
),
孩子：排(
儿童：[
图标按钮(
图标：图标（图标。箭头返回），
onPressed:onClose，
),
垫片（），
图标（Icons.mic），
],
),
),
填充物(
填充：常数边集全部（20.0），
子：列(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
大纲按钮(
onPressed:（）=>onClose（返回值：“颤振”），
子项：文本（'Search:'flatter'），
),
大纲按钮(
onPressed:（）=>onClose（返回值：'Rabbit'），
子项：文本（'Search:'Rabbit'），
),
大纲按钮(
onPressed:（）=>onClose（返回值：“矩阵是什么”），
子项：文本（'搜索：“矩阵是什么“），
),
],
),
),
],
),
),
);
}
}
您尝试过任何代码吗？如果是的话，请在这里提出来，以便很容易回答您的问题。@RonakPatel不，我找不到答案
import 'package:animations/animations.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: Colors.white,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String searchString;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(15.0),
          child: OpenContainer<String>(
            openBuilder: (_, closeContainer) => SearchPage(closeContainer),
            onClosed: (res) => setState(() {
              searchString = res;
            }),
            tappable: false,
            closedBuilder: (_, openContainer) => SearchBar(
              searchString: searchString,
              openContainer: openContainer,
            ),
          ),
        ),
      ),
    );
  }
}

class SearchBar extends StatelessWidget {
  const SearchBar(
      {Key key, @required this.searchString, @required this.openContainer})
      : super(key: key);

  final String searchString;
  final VoidCallback openContainer;
  @override
  Widget build(BuildContext context) {
    return Material(
      elevation: 3,
      borderRadius: BorderRadius.circular(5),
      child: InkWell(
        onTap: openContainer,
        child: Container(
          padding: EdgeInsets.all(10),
          color: Colors.white,
          child: Row(
            children: [
              Icon(Icons.search),
              SizedBox(width: 10),
              searchString != null
                  ? Expanded(child: Text(searchString))
                  : Spacer(),
              Icon(Icons.mic),
            ],
          ),
        ),
      ),
    );
  }
}

class SearchPage extends StatelessWidget {
  const SearchPage(
    this.onClose, {
    Key key,
  }) : super(key: key);

  final void Function({String returnValue}) onClose;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              padding: EdgeInsets.symmetric(horizontal: 10),
              decoration: BoxDecoration(
                boxShadow: [
                  BoxShadow(
                    offset: Offset(0, 2),
                    spreadRadius: 0,
                    blurRadius: 1,
                    color: Colors.black26,
                  )
                ],
                color: Colors.white,
              ),
              child: Row(
                children: [
                  IconButton(
                    icon: Icon(Icons.arrow_back),
                    onPressed: onClose,
                  ),
                  Spacer(),
                  Icon(Icons.mic),
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(20.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  OutlineButton(
                    onPressed: () => onClose(returnValue: 'Flutter'),
                    child: Text('Search: "Flutter"'),
                  ),
                  OutlineButton(
                    onPressed: () => onClose(returnValue: 'Rabbit'),
                    child: Text('Search: "Rabbit"'),
                  ),
                  OutlineButton(
                    onPressed: () => onClose(returnValue: 'What is the Matrix'),
                    child: Text('Search: "What is the Matrix"'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}