Flutter Container transform（动画包）

Question

当我看到 flutter 包和库时，我随机发现了 animations package of flutter and into that i see, there is one of my very useful animation like with android Gmail application which that have search navigation animation. to understand what i mean you can see this link，第 4 个动画

我在 github 的存储库中查看了这个包的源文件夹，但我找不到这个动画的示例实现，我不确定是否有示例代码，有没有人帮助我如何可以用 Container transform 得到那个吗？

Answer 1

如有不妥请指正，这两个不是同一个动画吗？

#1 #2

Gif #1 就是您所说的要查找的内容。 Gif #2 是我在没有做任何有意义的更改的情况下按照示例得到的： https://github.com/flutter/packages/tree/master/packages/animations/example/lib

仔细看看container_transition.dart，具体是什么_ExampleCardreturns。我不会在这里粘贴任何代码，因为：1）如果包发生变化，我建议未来的读者看一下官方示例，而不是盲目地从我的答案中复制粘贴，这可能会过时； 2) 你自己都懒得post。

Answer 2

动画包提供 OpenContainer 小部件。

此小部件有 2 个构建器：openBuilder closedBuilder。
ClosedBuilder returns 用户在打开和关闭小部件之前看到的小部件，在流动示例中它是 SearchBar.
OpenBuilder returns 用户打开关闭的widget后的页面，在示例中是SearchPage.

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

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"'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Flutter Container transform（动画包）

Flutter Container transform (animation package)

flutter

flutter-animation