Флаттер: Как анимировать виджет до того, как сработает переход? - PullRequest
Новая
       12

Флаттер: Как анимировать виджет до того, как сработает переход?

0 голосов
/ 04 марта 2019

Знаете ли вы, как мы можем анимировать виджеты до перехода на новый экран?Под этим я подразумеваю:

  1. Пользователь нажимает на FAB, что открывает новый экран
  2. Сразу после щелчка пользователя FAB анимируется для уменьшения, пока не станет невидимым (какфункция скрытия в нативной разработке)
  3. Когда FAB невидим, запускается новый переход экрана

Это сравнительно легко сделать в нативной разработке с одним действием / несколькими фрагментами, но я могу 'не найти способ сделать это во флаттере: /

1 Ответ

0 голосов
/ 04 марта 2019

Вам необходимо использовать AnimationController и настроить его для своего FAB и прикрепить AnimationStatusListener.После нажатия FAB вы запускаете анимацию, а в слушателе состояния после завершения анимации вы переходите на следующую страницу.

Здесь я написал код для вас: 

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

void main() => runApp(
      MaterialApp(
        home: FabApp(),
      ),
    );

class FabApp extends StatefulWidget {
  _FabAppState createState() => _FabAppState();
}

class _FabAppState extends State<FabApp> with SingleTickerProviderStateMixin {
  Animation<double> animation;
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    );
    controller.addListener(() {
      setState(() {});
    });
    controller.addStatusListener((status) {
      if (status == AnimationStatus.completed) {
        Navigator.of(context).push(
          MaterialPageRoute<void>(builder: (BuildContext context) {
            return Scaffold(
              body: Text("Hi"),
            );
          }),
        );
      }
    });
    animation = Tween<double>(begin: 1, end: 0).animate(controller);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: Transform.scale(
        scale: animation.value,
        child: FloatingActionButton(onPressed: () {
          controller.forward();
        }),
      ),
    );
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }
}
...