Flutter 使用弹性动画折叠和展开小部件答案

【问题标题】：Flutter collapse and expand widget with elastic animationFlutter 使用弹性动画折叠和展开小部件
【发布时间】：2020-01-02 16:56:49
【问题描述】：

在这个简单的界面下方，我在屏幕右侧有Container，我想用elastic 动画折叠和展开它，例如展开elasticIn 动画和折叠elasticOut。

【问题讨论】：

标签： flutter flutter-animation

【解决方案1】：

这是你需要的吗？

import 'package:flutter/material.dart';
import 'package:flutter/physics.dart';
import 'dart:math';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Spring Box",
      theme: ThemeData(),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  Animation animationIn, animationOut;

  AnimationController _animationController;

  @override
  void initState() {
    _animationController = AnimationController(
      vsync: this,
      value: 1.0,
      duration: Duration(milliseconds: 500),
    );
    animationIn = CurvedAnimation(parent: _animationController, curve: Curves.elasticIn);
    animationOut = CurvedAnimation(parent: _animationController, curve: Curves.elasticIn);
  }

  _toggleExpanded() {
    if (_animationController.status == AnimationStatus.completed) {
      _animationController.reverse();
    } else {
      _animationController.forward();
    }
  }

  @override
  Widget build(BuildContext context) {
    var isExpanded = _animationController.status != AnimationStatus.completed;
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: _toggleExpanded,
        child: Icon(Icons.add),
      ),
      body: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          CollapsAnimation(
            animation: isExpanded ? animationOut : animationIn,
            child: Container(
              color: Color(0xFF404bc4),
            ),
          ),
        ],
      ),
      backgroundColor: Color(0xFFe8e8e8),
    );
  }
}

class CollapsAnimation extends AnimatedWidget {
  CollapsAnimation({key, animation, this.child})
      : super(
          key: key,
          listenable: animation,
        );

  final Widget child;
  final Tween tween = Tween<double>(begin: 0, end: 80);

  @override
  Widget build(BuildContext context) {
    Animation<double> animation = listenable;

    var animationValue = tween.evaluate(animation);
    double width = animationValue >= 0.0 ? animationValue : 0.0;
    return Container(
      width: width,
      child: child,
    );
  }
}

【讨论】：

我想要的有点不同，就是elasticOut当容器折叠时，这意味着三个动画，第三个动画是当container折叠时
嗯.. 像那样？
@Kherek 非常感谢，我接受了你的回答。你所有的答案都是正确的，但是有一点不同，如果你有空闲时间，有三个动画， - ：开始展开（没有任何动画），第一个：当容器展开时，第二个当容器想要折叠和第三个动画是当容器倒塌时，我怎样才能得到你之前回答的帖子？
谢谢，这是第一个版本：gist.github.com/kherel/1048888bf4da291b4d79596c2828d131