Сдвиньте виджеты с экрана во флаттере

Question

В настоящее время у меня есть виджет, который имеет три элемента - две кнопки и текстовый ввод. В фокусе ввода текста я бы хотел сдвинуть кнопки с экрана и расширить ввод текста, чтобы он занимал оставшуюся ширину.

Существуют ли какие-либо компоненты флаттера (анимация или иное), которые я могу использовать для перемещения компонентов за пределы экрана и анимации расширения текстового поля?

Answer 1

Я в конечном итоге с помощью Animatable виджета

https://flutter.io/docs/development/ui/animations/tutorial

И используя комбинацию Stack(), где я бы анимировал внеэкранные элементы, чтобы иметь отрицательные смещения (с помощью дочерних элементов Positioned()) на основе Animation и TextField внутри Expanded()

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