import 'package:flutter/material.dart';

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

  @override
  State<ClipLogin16> createState() => _ClipLogin16State();
}

class _ClipLogin16State extends State<ClipLogin16> {
  @override
  Widget build(BuildContext context) {
    Size screenSize =MediaQuery.of(context).size;
    const myColor= Colors.pink;
    return Scaffold(

      body:SingleChildScrollView(
        child: Stack(
          children: [

              ClipPath(
                clipper: MyClipper(),
                child: Container(width: screenSize.width,height: screenSize.height,color: myColor.shade100,),
              ),
            ClipPath(
              clipper: MyClipper2(),
              child: Container(height: screenSize.height/4,width: screenSize.width,
              decoration: BoxDecoration(
                backgroundBlendMode: BlendMode.multiply  ,
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomCenter,
                  colors:[
                    myColor.shade800,
                    myColor.shade300,
                    myColor.shade200,
                    myColor.shade200,
                  ]
                )
              ),),
            ),
            ClipPath(
              clipper: MyClipper3(),
              child: Container(height: screenSize.height,width: screenSize.width,
                decoration: BoxDecoration(
                    backgroundBlendMode: BlendMode.multiply  ,
                    gradient: LinearGradient(
                        begin: Alignment.bottomRight,
                        end: Alignment.center,
                        colors:[
                          myColor.shade800,
                          myColor.shade300,
                          myColor.shade200,
                          myColor.shade200,
                          myColor.shade200,
                        ]
                    )
                ),),
            ),
            Container(
              margin: EdgeInsets.only(top: screenSize.height*.20),
              alignment: Alignment.topCenter,
              child: Text("Sign In",style: TextStyle(
                  fontSize: 35,
                  color: myColor.shade800,
                  fontWeight: FontWeight.bold)),
            ),
            Padding(
                padding: EdgeInsets.only(top: screenSize.height*.30,left: 20,right: 20),
            child: Column(
              children: [
                Container(
                  decoration: BoxDecoration(
                      backgroundBlendMode: BlendMode.multiply,
                      boxShadow: const [
                        BoxShadow(
                          color: Colors.grey,
                          blurRadius: 10,
                          offset: Offset(0, 5),
                        ),
                      ],
                    gradient: LinearGradient(
                        begin: Alignment.centerLeft,
                        end: Alignment.centerRight,
                        colors: [
                          myColor.shade900,
                          myColor.shade400,
                          myColor.shade200
                        ]
                      
                    ),
                    borderRadius: BorderRadius.circular(20)
                  ),
                  child: TextFormField(
                    style: const TextStyle(color: Colors.white),
                    decoration: const InputDecoration(
                      // hintText: "Email",
                      // hintStyle: TextStyle(color: Colors.white),
                      labelText: 'Email',
                      labelStyle: TextStyle(color: Colors.white),
                      filled: true,
                      fillColor: Colors.transparent,
                      border: InputBorder.none,
                      )
                    ),
                  ),

                Container(
                  margin: const EdgeInsets.only(top: 25),
                  decoration: BoxDecoration(
                      backgroundBlendMode: BlendMode.multiply,
                      boxShadow:  [
                        BoxShadow(
                          color: Colors.grey.withOpacity(.8),
                          blurRadius: 10,
                          offset: const Offset(0, 5),
                        ),
                      ],
                      gradient: LinearGradient(
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                          colors: [
                            myColor.shade900,
                            myColor.shade400,
                            myColor.shade200.withOpacity(.8)
                          ]
                      ),
                      borderRadius: BorderRadius.circular(20)
                  ),
                  child: TextFormField(
                    obscureText: true,
                      style: const TextStyle(color: Colors.white),
                      decoration: const InputDecoration(
                        //hintText: "Password",
                        //hintStyle: TextStyle(color: Colors.white),
                        labelText: 'Password',
                        labelStyle: TextStyle(color: Colors.white),
                        filled: true,
                        fillColor: Colors.transparent,
                        border: InputBorder.none,
                      )
                  ),
                ),
                Container(alignment: Alignment.centerRight,
                  margin: const EdgeInsets.only(top: 15,right: 30),
                  child: Text('Forgot password?',style: TextStyle(
                    fontSize: 15,
                      color: myColor.shade900,
                      shadows:const [Shadow(
                          color: Colors.grey,
                          offset: Offset(0,3),
                          blurRadius: 5
                      )]
                      )
                    ,),
                ),
                Container(
                  width: double.infinity,
                  margin: const EdgeInsets.only(top: 15),
                  decoration: BoxDecoration(
                      backgroundBlendMode: BlendMode.multiply,
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withOpacity(.7),
                          blurRadius: 10,
                          offset: const Offset(0, 7),
                        ),
                      ],
                      gradient: LinearGradient(
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                          colors: [
                            myColor.shade700,
                            myColor.shade300,
                            myColor.shade100
                          ]
                      ),
                      borderRadius: BorderRadius.circular(20)
                  ),
                  child: ElevatedButton(
                    onPressed: (){},
                    child: const Text("Sign In",style: TextStyle(color: Colors.white,fontSize: 25),),
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.transparent,
                      padding: const EdgeInsets.symmetric(vertical: 10),
                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20))
                    ),
                  ),
                ),
                const SizedBox(height: 10,),
                Text("Don't have an account?",style: TextStyle(
                    fontSize: 15,
                    color: myColor.shade900,
                    shadows:const [Shadow(
                        color: Colors.grey,
                        offset: Offset(0,3),
                        blurRadius: 5
                    )]
                ),),
                GestureDetector(
                  onTap: (){},
                    child: Text('Register',style:
                    TextStyle(
                        fontSize: 15,
                        color: myColor.shade900,
                        shadows:const [Shadow(
                            color: Colors.grey,
                            offset: Offset(0,3),
                            blurRadius: 5
                        )]
                    )
                    )),
                Container(
                  margin: const EdgeInsets.only(left: 15),
                    alignment: Alignment.centerLeft,
                    child: Text("or",style: TextStyle(
                        fontSize: 15,
                        color: myColor.shade900,
                        shadows:const [Shadow(
                            color: Colors.grey,
                            offset: Offset(0,3),
                            blurRadius: 5
                        )]
                    ),)),

                Container(
                  margin: const EdgeInsets.only(top: 15),
                  decoration: BoxDecoration(
                    backgroundBlendMode: BlendMode.multiply,
                      boxShadow: [
                        BoxShadow(
                          color: Colors.grey.withOpacity(.8),
                          blurRadius: 10,
                          offset: const Offset(0, 3),
                        ),
                      ],
                      gradient: LinearGradient(
                          begin: Alignment.centerLeft,
                          end: Alignment.centerRight,
                          colors: [
                            myColor.shade900,
                            myColor.shade400,
                            myColor.shade200
                          ]
                      ),
                      borderRadius: BorderRadius.circular(20)
                  ),
                  child: ListTile(
                    onTap: (){},
                    leading: const Icon(Icons.android,color: Colors.white,),
                    title: const Text('Sign in with google',style: TextStyle(color: Colors.white),),
                    trailing: const Icon(Icons.arrow_forward_ios,color: Colors.white,),

                  )
                ),

                Container(

                    margin: const EdgeInsets.only(top: 15),
                    decoration: BoxDecoration(
                        backgroundBlendMode: BlendMode.multiply,
                        boxShadow: [
                          BoxShadow(
                            color: Colors.grey.withOpacity(.8),
                            blurRadius: 10,
                            offset: const Offset(0, 3),
                          ),
                        ],
                        gradient: LinearGradient(
                            begin: Alignment.centerLeft,
                            end: Alignment.centerRight,
                            colors: [
                              myColor.shade900,
                              myColor.shade400,
                              myColor.shade200
                            ]
                        ),
                        borderRadius: BorderRadius.circular(20)
                    ),
                    child: ListTile(
                      onTap: (){},
                      leading: const Icon(Icons.apple,color: Colors.white,),
                      title: const Text('Sign in with Apple',style: TextStyle(color: Colors.white),),
                      trailing: const Icon(Icons.arrow_forward_ios,color: Colors.white,),

                    )
                ),
              ],
            ),
            )

          ],
        ),
      ),
    );
  }
}

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;
  }
}

class MyClipper2 extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path=Path();
    path.lineTo(0, size.height*.7);
    path.quadraticBezierTo(size.width/4, size.height*.8, size.width*.38, size.height*.5);
    path.quadraticBezierTo(size.width*.47, size.height*.25, size.width*.6, size.height*.33);
    path.quadraticBezierTo(size.width*.75, size.height*.4, size.width*.85, size.height*.26);
    path.quadraticBezierTo(size.width*.95, size.height*.1, size.width*.93, size.height*.3);
    path.quadraticBezierTo(size.width*.9, size.height*.5, size.width, size.height*.7);
    path.lineTo(size.width, 0);
    return path;
  }

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

class MyClipper extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    Path path=Path();
    path.moveTo(0,size.height*.3 );
    path.lineTo(0, size.height);
    path.lineTo(size.width*.6, size.height);
    path.quadraticBezierTo(size.width*.6, size.height*.8, size.width*.8, size.height*.7);
    path.quadraticBezierTo(size.width*.95, size.height*.6, size.width*.9, size.height*.5);
    path.quadraticBezierTo(size.width*.85, size.height*.4, size.width, size.height*.3);
    path.lineTo(size.width, size.height*.05);
    path.quadraticBezierTo(size.width*.9, size.height*.2, size.width*.6, size.height*.14);
    path.quadraticBezierTo(size.width*.2, size.height*.05, 0, size.height*.3);
    return path;

  }

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