Блог

Это StatefulWidget, в который я включил GestureDetector onPanUpdate обратный вызов and . Это означает, что если указатель находится в контакте с экраном, мы можем сделать что-то правильно. Здесь я добавляю поле генерации, если пользователь перетаскивает его по экрану. В метод generateBox() я включил простую анимацию, которая вращается в соответствии со значением pi и через 500 миллисекунд, как только анимация завершается, вызывается обратный вызов onEnd, где я удаляю список массивов из индекса 0 (ноль), который находится в первом элементе списка массивов.

Это анимация, которую я хочу решить с помощью Flutter.

Я попробовал ту же анимацию, что и выше, с Flutter, но она сработала не так, как ожидалось.

Когда мы начинаем перетаскивать onPanUpdate, обратный вызов генерирует весь контейнер и анимацию, но он не удаляет весь контейнер на экране в непрерывном порядке, как я упоминал, чтобы удалить их, когда анимация заканчивается обратным вызовом TweenAnimationBuilder. Как я хочу в анимационном gif выше.

Я знаю хорошего флаттериста, и GDE в Dart и Flutter могут решить эту проблему очень хорошо.

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

void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var myWidgetList = <Widget>[];
  var xPosition = 0.0;
  var yPosition = 0.0;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onPanUpdate: (DragUpdateDetails details) {
        setState(() {
          xPosition = details.localPosition.dx;
          yPosition = details.localPosition.dy;

          myWidgetList.add(generateBox());
        });
      },
      child: Scaffold(
        body: Stack(
          children: myWidgetList.toList(),
        ),
      ),
    );
  }

  // To Generate Animated Box for 500 milliseconds.

  Widget generateBox() {
    return Positioned(
      left: xPosition,
      top: yPosition,
      child: TweenAnimationBuilder<double>(
        tween: Tween<double>(begin: 0, end: pi),
        duration: const Duration(milliseconds: 500),
        builder: (_, double angle, __) {
          return Transform.rotate(
            angle: angle,
            child: Container(
              width: 80,
              height: 80,
              decoration: BoxDecoration(
                border: Border.all(
                  width: 3,
                  color: Colors.grey[800],
                ),
                borderRadius: const BorderRadius.all(
                  Radius.circular(20),
                ),
              ),
            ),
          );
        },
        onEnd: () {
          myWidgetList.remove(myWidgetList[0]);
        },
      ),
    );
  }
}