Свернуть и развернуть виджет Flutter с эластичной анимацией

в этом простом пользовательском интерфейсе ниже у меня Container справа от экрана, и я хочу свернуть и развернуть его с помощью elastic анимации, например, при расширении elasticIn анимации и для свертывания elasticOut.

введите описание изображения здесь


person DolDurma    schedule 29.08.2019    source источник


Ответы (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,
    );
  }
}
person Kherel    schedule 29.08.2019
comment
есть немного другое, что я хочу иметь, это elasticOut, когда контейнер свернут, это означает три анимации, третья анимация - это когда container свернут - person DolDurma; 29.08.2019
comment
хм .. вот так? - person Kherel; 29.08.2019
comment
@Kherek большое спасибо, я принял твой ответ. все ваши ответы верны, но есть немного другое, если у вас есть свободное время, есть три анимации: -: начало расширения (без какой-либо анимации), первое: когда контейнер расширен, второй, когда контейнер хочет свернуть и Третья анимация - когда контейнер рухнул, как я могу получить ваше предыдущее сообщение, на которое вы ответили? - person DolDurma; 30.08.2019
comment
Спасибо, это первая версия: gist.github.com/kherel/1048888bf4da291b4d79596c2828d131 - person Kherel; 30.08.2019