当我点击 FAB 颤动时，我想向下向上动画新页面答案

【问题标题】：I want to Down to up Animate new page when I tap FAB flutter当我点击 FAB 颤动时，我想向下向上动画新页面
【发布时间】：2022-01-12 11:03:15
【问题描述】：

当我点击 FAB 时我想向下动画新页面并在我再次点击 FAB 时关闭页面。 FAB 按钮有“添加图标”当点击它改变角度 45 度。

FAB in Normal Position

FAB in Active Position

here is the body where I want to display that screen and bottomnavigationbar will stay where it is right now

【问题讨论】：

您想点击 FAB 然后更改 FAB 图标吗？
不，我做到了，但我想在点击时显示一个屏幕，并在再次点击时关闭屏幕

标签： android flutter dart flutter-layout flutter-animation

【解决方案1】：

这正是你想要的，page-route-animation：

import 'package:flutter/material.dart';

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

class Page1 extends StatelessWidget {
  const Page1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(_createRoute());
          },
          child: const Text('Go!'),
        ),
      ),
    );
  }
}

Route _createRoute() {
  return PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const Page2(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      const begin = Offset(0.0, 1.0);
      const end = Offset.zero;
      const curve = Curves.ease;

      var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));

      return SlideTransition(
        position: animation.drive(tween),
        child: child,
      );
    },
  );
}

class Page2 extends StatelessWidget {
  const Page2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: const Center(
        child: Text('Page 2'),
      ),
    );
  }
}

【讨论】：