flutter - フラッターでウィジェットを画面外にスライドさせる

Question

現在、2 つのボタンとテキスト入力の 3 つの要素を持つウィジェットがあります。テキスト入力フォーカスでは、ボタンを画面からスライドさせ、テキスト入力を拡大して残りの幅を占有したいと考えています。

コンポーネントを画面外にスライドさせてテキスト フィールドの展開をアニメーション化するために使用できるフラッター コンポーネント (アニメーションなど) はありますか?

Answer 1

アニメーション可能なウィジェットを使用することになりました

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

また、Stack() の組み合わせを使用して、画面外の要素をアニメーション化し、アニメーションに基づいて (Positioned() 子を介して) 負のオフセットを設定し、Expanded() 内の TextField を使用します。

編集

ソース コードを使用してコンピューターにアクセスすることはできなくなりましたが、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),
              ),
            ],
          ),
        ),
      ),
    );
  }
}