flutter - 当我按下某些东西时隐藏带有动画的小部件

Question

我想添加一个动画来隐藏一个小部件并在页面上移动/同步其他没有它的小部件。

我做了一个应用程序，这是一个我的世界启动器，我想在关闭开关时隐藏密码文本字段。我在这方面取得了一些进展，但我无法添加动画以使其更流畅。

这是我的代码；

import 'package:flutter/material.dart';

import 'forget_password_text.dart';
import 'password_text_field.dart';
import 'premium_mode_switch.dart';

class FrontLayerLeftSidePasswordHiding extends StatefulWidget {
  const FrontLayerLeftSidePasswordHiding({Key? key}) : super(key: key);

  @override
  _FrontLayerLeftSidePasswordHidingState createState() =>
      _FrontLayerLeftSidePasswordHidingState();
}

class _FrontLayerLeftSidePasswordHidingState
    extends State<FrontLayerLeftSidePasswordHiding> {
  bool _visible = true;
  Widget? _switch;

  @override
  void initState() {
    this._switch = PremiumModeSwitch(
      onChanged: () {
        setState(() {
          this._visible = !this._visible;
        });
      },
    );
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    // This is working but, it's instant, the duration does not affect.
    return AnimatedSwitcher(
      duration: Duration(seconds: 10),
      child: _visible ? this._on() : this._off(),
    );
  }

  // This widget shows when I close the switch
  Widget _off() {
    return Column(
      children: [
        Spacer(flex: 1),
        this._switcher(),
        Spacer(flex: 14),
      ],
    );
  }

  // This widget shows when I open the switch
  Widget _on() {
    return Column(
      children: [
        Expanded(
          flex: 15,
          child: Column(
            children: [
              Spacer(flex: 5),
              Expanded(
                flex: 10,
                child: PasswordTextField(),
              ),
            ],
          ),
        ),
        Expanded(
          flex: 10,
          child: this._switcher(),
        ),
      ],
    );
  }

  Widget _switcher() {
    return Row(
      children: [
        Spacer(flex: 13),
        Expanded(
          flex: 10,
          child: ForgetPasswordText(),
        ),
        Spacer(flex: 20),
        Expanded(
          flex: 10,
          child: this._switch!,
        ),
        Spacer(flex: 10),
      ],
    );
  }
}

动图

标签： flutterdartanimation