import 'dart:ui';

import 'package:flutter/material.dart';

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

  @override
  State<ClipLogin21> createState() => _ClipLogin21State();
}

class _ClipLogin21State extends State<ClipLogin21> {
  bool animate=false;

  @override
  Widget build(BuildContext context) {
    Size screenSize =MediaQuery.of(context).size;
    const myColor= Colors.white;
    const myColor2= Colors.amber;
    return Scaffold(
      backgroundColor: Colors.black,
      body:SingleChildScrollView(
        child: Stack(
          children: [

            Positioned(
              top: screenSize.height/3.2,
              left: screenSize.width/3.5,
              child: Container(
                width: 100,
                height: 100,
                decoration: BoxDecoration(borderRadius: BorderRadius.circular(100),color: Colors.cyan),
              ),
            ),
            Positioned(
              top: screenSize.height*.8,
              left: screenSize.width*.83,
              child: Container(
                width: 50,
                height: 50,
                decoration: BoxDecoration(borderRadius: BorderRadius.circular(50),color: myColor2),
              ),
            ),

            Positioned(
              top: screenSize.height*.6,
              left: screenSize.width*.04,
              child: Container(
                width: 70,
                height: 70,
                decoration: BoxDecoration(borderRadius: BorderRadius.circular(50),color: Colors.tealAccent),
              ),
            ),
            Container(height: screenSize.height,width: screenSize.width,),

            AnimatedPositioned(
              duration: Duration(milliseconds: 500),
              top: animate ? -screenSize.height*.85: 0,
              left: 40,
              child: Container(
                padding:  EdgeInsets.only(top: 80,),
                width: screenSize.width*.8,
                height: screenSize.height*.9,
                child: ClipRRect(borderRadius: BorderRadius.circular(20),
                  child: Container(
                    color: Colors.transparent,
                    child: Stack(
                      children: [
                        BackdropFilter(filter: ImageFilter.blur(sigmaX: 5,sigmaY: 5),
                          child: Container(),),
                        Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(20),
                              border: Border.all(color: Colors.white.withOpacity(.15),),
                              gradient: LinearGradient(
                                  begin: Alignment.topLeft,
                                  end: Alignment.bottomRight,
                                  colors: [
                                    Colors.white.withOpacity(.15),
                                    Colors.white.withOpacity(.1)
                                  ]
                              )
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.only(top: screenSize.height*.06,left: 10,right: 10),

                          child: Column(
                            children: [
                              const Text("Sign In",style: TextStyle(fontSize: 35,color: myColor,fontWeight: FontWeight.bold),),
                              const SizedBox(height: 15,),
                              TextFormField(
                                decoration: const InputDecoration(
                                    labelText: 'Email test',
                                    labelStyle: TextStyle(color: myColor),
                                  enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.white,width: 2)),
                                ),
                              ),
                              const SizedBox(height: 20),
                              TextFormField(
                                obscureText: true,
                                scrollPadding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
                                decoration: const InputDecoration(
                                    labelText: 'Password',
                                    labelStyle: TextStyle(color: myColor),
                                  enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.white,width: 2)),
                                ),
                              ),
                              const SizedBox(height: 10,),
                              Container(
                                alignment: Alignment.centerRight,
                                child: const Text('Forgot password?',style: TextStyle(color: myColor),),
                              ),
                              const SizedBox(height: 20,),
                              Container(
                                width: double.infinity,
                                decoration: BoxDecoration(color: Colors.white.withOpacity(.1),
                                    boxShadow: [BoxShadow(
                                        color: Colors.grey.withOpacity(.1),
                                        blurRadius: 10,
                                        offset: const Offset(0,5)
                                    )],
                                    borderRadius: BorderRadius.circular(20)
                                ),
                                child: ElevatedButton(
                                  onPressed: (){},
                                  style: ElevatedButton.styleFrom(
                                      padding: const EdgeInsets.symmetric(vertical: 5),
                                      shadowColor: Colors.transparent,
                                      backgroundColor: Colors.transparent,
                                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20))
                                  ),
                                  child: const Text('Sign In',style: TextStyle(color: Colors.orange,fontSize: 30),),
                                ),
                              ),
                              const SizedBox(height: 10,),
                              const Text("Don't have an account?",style: TextStyle(color: Colors.white,
                                  shadows:[ Shadow(
                                      color: Colors.black87,
                                      blurRadius: 10,
                                      offset: Offset(0,4)
                                  )]
                              ),
                              ),
                              const SizedBox(height: 10,),
                              GestureDetector(
                                onTap: (){
                                  setState(() {
                                    animate=true;
                                  });
                                },
                                child: const Text("Register >",style: TextStyle(color: myColor,fontSize: 15,
                                    shadows:[ Shadow(
                                        color: Colors.grey,
                                        blurRadius: 10,
                                        offset: Offset(0,4)
                                    )]
                                ),
                                ),
                              ),
                              const SizedBox(height: 10,),
                              Container(
                                margin: const EdgeInsets.only(left: 30),
                                alignment: Alignment.centerLeft,
                                child: const Text("Or ",style: TextStyle(color: myColor,fontSize: 15,
                                    shadows:[ Shadow(
                                        color: Colors.grey,
                                        blurRadius: 10,
                                        offset: Offset(0,4)
                                    )]
                                ),
                                ),
                              ),
                              Container(margin: const EdgeInsets.only(top: 15),
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(20),
                                    color: Colors.white.withOpacity(.1),
                                    boxShadow: [BoxShadow(
                                        color: Colors.grey.withOpacity(.7),
                                        blurRadius: 15,
                                        offset: const Offset(0,3)
                                    )]
                                ),
                                child: const ListTile(
                                  leading: Icon(Icons.android,color: myColor,),
                                  title: Text('Login with Google',style: TextStyle(color: myColor,),),
                                  trailing: Icon(Icons.arrow_forward_ios,color: myColor,),
                                ),
                              ),
                              Container(margin: const EdgeInsets.only(top: 15),
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(20),
                                    color: Colors.white.withOpacity(.1),
                                    boxShadow: [BoxShadow(
                                        color: Colors.grey.withOpacity(.7),
                                        blurRadius: 15,
                                        offset: const Offset(0,3)
                                    )]
                                ),
                                child: const ListTile(
                                  leading: Icon(Icons.apple,color: myColor,),
                                  title: Text('Login with Apple',style: TextStyle(color: myColor, ),),
                                  trailing: Icon(Icons.arrow_forward_ios,color: myColor,),
                                ),
                              ),
                            ],
                          ),
                        )
                      ],
                    ),
                  ),),


              ),
            ),
            AnimatedPositioned(
              duration: Duration(milliseconds: 500),
              top: animate ? 0: screenSize.height*.85,
              left: 40,
              child: Container(
                padding: const EdgeInsets.only(top: 80),
                width: screenSize.width*.8,
                height: screenSize.height*.9,
                child: ClipRRect(borderRadius: BorderRadius.circular(20),
                  child: Container(
                    color: Colors.transparent,
                    child: Stack(
                      children: [
                        BackdropFilter(filter: ImageFilter.blur(sigmaX: 5,sigmaY: 5),
                          child: Container(),),
                        Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(20),
                              border: Border.all(color: Colors.white.withOpacity(.15),),
                              gradient: LinearGradient(
                                  begin: Alignment.topLeft,
                                  end: Alignment.bottomRight,
                                  colors: [
                                    Colors.white.withOpacity(.15),
                                    Colors.white.withOpacity(.1)
                                  ]
                              )
                          ),
                        ),
                        Padding(
                          padding: EdgeInsets.only(top: screenSize.height*.06,left: 20,right: 20),

                          child: Column(
                            children: [
                              const Text("Sign Up",style: TextStyle(fontSize: 35,color: myColor,fontWeight: FontWeight.bold),),
                              const SizedBox(height: 15,),
                              TextFormField(
                                decoration: const InputDecoration(
                                    labelText: 'Name',
                                    labelStyle: TextStyle(color: myColor),
                                  enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.white,width: 2))
                                ),
                              ),
                              const SizedBox(height: 15,),
                              TextFormField(
                                decoration: const InputDecoration(
                                    labelText: 'Email',
                                    labelStyle: TextStyle(color: myColor),
                                    enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.white,width: 2))
                                ),
                              ),
                              const SizedBox(height: 20),
                              TextFormField(
                                obscureText: true,
                                scrollPadding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
                                decoration: const InputDecoration(
                                    labelText: 'Password',
                                    labelStyle: TextStyle(color: myColor),
                                    enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.white,width: 2))
                                ),
                              ),
                              const SizedBox(height: 20),
                              TextFormField(
                                obscureText: true,
                                scrollPadding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
                                decoration: const InputDecoration(
                                    labelText: 'Confirm Password',
                                    labelStyle: TextStyle(color: myColor),
                                    enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Colors.white,width: 2))
                                ),
                              ),

                              const SizedBox(height: 20,),
                              Container(
                                width: double.infinity,
                                decoration: BoxDecoration(color: Colors.white.withOpacity(.2),
                                    boxShadow: [BoxShadow(
                                        color: Colors.grey.withOpacity(.5),
                                        blurRadius: 10,
                                        offset: const Offset(0,5)
                                    )],
                                    borderRadius: BorderRadius.circular(20)
                                ),
                                child: ElevatedButton(
                                  onPressed: (){},
                                  style: ElevatedButton.styleFrom(
                                      padding: const EdgeInsets.symmetric(vertical: 5),
                                      shadowColor: Colors.transparent,
                                      backgroundColor: Colors.transparent,
                                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20))
                                  ),
                                  child: const Text('Sign Up',style: TextStyle(
                                      color: myColor,
                                      fontSize: 30,
                                      fontWeight: FontWeight.bold
                                  ),
                                  ),
                                ),
                              ),
                              const SizedBox(height: 10,),
                              const Text("Already Registered?",style: TextStyle(color: Colors.white,
                                  shadows:[ Shadow(
                                      color: Colors.black87,
                                      blurRadius: 10,
                                      offset: Offset(0,4)
                                  )]
                              ),
                              ),
                              const SizedBox(height: 40,),
                              GestureDetector(
                                onTap: (){
                                  setState(() {
                                    animate=false;
                                  });
                                },
                                child: const Text("Sign In >",style: TextStyle(color: myColor,
                                    fontSize: 20,
                                    fontWeight: FontWeight.bold,
                                    shadows:[ Shadow(
                                        color: Colors.grey,
                                        blurRadius: 5,
                                        offset: Offset(0,3)
                                    )]
                                ),
                                ),
                              ),
                              const SizedBox(height: 10,),



                            ],
                          ),
                        )
                      ],
                    ),
                  ),),


              ),
            ),

          ],
        ),
      ),
    );
  }
}

class MyClipper3 extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path= Path();
    path.moveTo(size.width/2, size.height);
    path.quadraticBezierTo(size.width*.5, size.height*.9, size.width*.6,size.height*.86);
    path.quadraticBezierTo(size.width*.75, size.height*.8, size.width*.8,size.height*.75);
    path.quadraticBezierTo(size.width*.85, size.height*.7, size.width*.82,size.height*.6);
    path.quadraticBezierTo(size.width*.8, size.height*.5, size.width,size.height*.5);
    path.lineTo(size.width, size.height);
    return path;

  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }
}