flutter - 在颤动中将小部件滑出屏幕

Question

我目前有一个包含三个元素的小部件——两个按钮和一个文本输入。在文本输入焦点上，我想将按钮滑出屏幕并展开文本输入以占据剩余宽度。

是否有任何颤振组件（动画或其他）我可以用来将组件滑出屏幕并为文本字段扩展设置动画？

Answer 1

我最终使用了 Animatable 小部件

https://flutter.io/docs/development/ui/animations/tutorial#simplifying-with-animatedwidget

并使用 Stack() 的组合，我将根据 Animation 和 Expanded() 内的 TextField 为屏幕外元素设置负偏移量（通过 Positioned() 子级）

编辑

我无法再使用源代码访问计算机，但您应该能够从 Flutter 示例库https://github.com/flutter/flutter/blob/master/examples推断出如何构建这样的小部件/flutter_gallery/lib/demo/material/drawer_demo.dart（这就是我学习的方式 - 具体来说，看看drawerdetails动画）。我将文本字段和按钮放置在同一个堆栈中，并同时为文本字段大小和按钮位置设置动画

Answer 2

使用变换的答案

您需要添加

dependencies:
  flutter_sequence_animation:

在 pubspec.yaml 中

import 'package:flutter/material.dart';
import 'package:flutter_sequence_animation/flutter_sequence_animation.dart';

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

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

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

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

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  AnimationController controller;
  SequenceAnimation sequenceAnimation;
  void initAnimation() {
    double screenSize = 500; // MediaQuery.of(context).size.width;

    controller = AnimationController(vsync: this);
    sequenceAnimation = SequenceAnimationBuilder()
        .addAnimatable(
          animatable: Tween<double>(begin: screenSize, end: -100),
          from: const Duration(milliseconds: 0),
          to: const Duration(milliseconds: 5000),
          tag: 'margin-slide',
          curve: Curves.easeInOutCirc,
        )
        .addAnimatable(
          animatable: Tween<double>(begin: 1.0, end: 0.0),
          from: Duration(milliseconds: 0),
          to: Duration(milliseconds: 5000),
          curve: Curves.easeInOutCirc,
          tag: 'fade-in',
        )
        .animate(controller);
    controller.forward();

  }

  @override
  void initState() {
    super.initState();
    initAnimation();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: AnimatedBuilder(
        animation: controller,
        builder: (context, child) => Opacity(
          opacity: sequenceAnimation['fade-in'].value,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                color: Colors.blue,
                height: 100,
                width: 100,
                transform: Matrix4.translationValues(sequenceAnimation["margin-slide"].value, 0.0, 0.0),
              ),
            ],
          ),
        ),
      ),
    );
  }
}