flutter - 当我单击按钮并使其可见时，颤振变换定位小部件从左到右？

Question

我需要的？

我在堆栈小部件中有两个定位小部件。单击 TextButton 后，我想将一个定位的小部件从右到左转换并在屏幕上显示另一个不可见的小部件。

同样，一旦我单击另一个 TextButton，它应该就像在初始视图中一样。

我已经尝试了此视频中描述的内容，但无法正常工作。 https://www.youtube.com/watch?v=FCyoHclCqc8

以下代码中的详细信息

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        FormLogin(),
      ],
    ));
  }
}

class FormLogin extends StatefulWidget {
  const FormLogin({
    Key key,
  }) : super(key: key);

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

class _FormLoginState extends State<FormLogin>
    with SingleTickerProviderStateMixin {
  static AnimationController controller;

  @override
  Widget build(BuildContext context) {
    return Flexible(
      flex: 2,
      child: Stack(
        children: <Widget>[
          Container(height: MediaQuery.of(context).size.height),
          Container(
            height: MediaQuery.of(context).size.height / 2.5,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topCenter,
                end: Alignment.bottomCenter,
                colors: [Color(0xFFbe8696), Color(0xFFbe8996)],
              ),
            ),
          ),

          // Logo Section -> I don't want to transform this section i want to keep it on screen.
          Positioned(
            top: MediaQuery.of(context).size.height / 6,
            left: MediaQuery.of(context).size.width / 3.8,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Image.network(
                  "https://upload.wikimedia.org/wikipedia/commons/thumb/1/17/Google-flutter-logo.png/799px-Google-flutter-logo.png",
                  scale: 4,
                ),
              ],
            ),
          ),

          // Login Screen - I would like to transfer this Positioned Widget through  
          // X axis to left and make it invisible, When I click the below TextButton.
          Positioned(
              top: 200,
              child: Container(
                  height: MediaQuery.of(context).size.height / 2,
                  width: MediaQuery.of(context).size.width,
                  child: Card(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8.0),
                    ),
                    margin: EdgeInsets.all(20.0),
                    elevation: 0.7,
                    child: Padding(
                        padding: const EdgeInsets.only(
                            left: 16, right: 16, top: 8, bottom: 4),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: <Widget>[
                            Center(
                              child: Wrap(
                                runAlignment: WrapAlignment.center,
                                crossAxisAlignment: WrapCrossAlignment.center,
                                children: [
                                  TextButton(
                                    // When I click that button.
                                    onPressed: () {},
                                    child: Text(
                                      "Signup",
                                      style: GoogleFonts.montserrat(
                                        fontWeight: FontWeight.w400,
                                        fontSize: 14.0,
                                        color: Colors.black,
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ],
                        )),
                  ))),

          // Register Screen - Once user click the above button, 
          // at the same time this widget should be visible.
          Positioned(
              top: 250,

          // This widget invisible now. Make "left: 0" to display widget.
              left: 0,
              height: MediaQuery.of(context).size.height / 2,
              child: Container(
                  width: MediaQuery.of(context).size.width,
                  child: Card(
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8.0),
                    ),
                    margin: EdgeInsets.all(20.0),
                    elevation: 0.7,
                    child: Padding(
                        padding: const EdgeInsets.only(
                            left: 16, right: 16, top: 8, bottom: 4),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.stretch,
                          children: <Widget>[
                            Center(
                              child: Wrap(
                                runAlignment: WrapAlignment.center,
                                crossAxisAlignment: WrapCrossAlignment.center,
                                children: [
                                  TextButton(
                                    //**I would like to return initial position once i click that button.**
                                    onPressed: () {},
                                    child: Text(
                                      "Return Back",
                                      style: GoogleFonts.montserrat(
                                        fontWeight: FontWeight.w400,
                                        fontSize: 14.0,
                                        color: Colors.black,
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),
                          ],
                        )),
                  )))
        ],
      ),
    );
  }
}

标签： flutterflutter-layoutflutter-animation