import 'package:flutter/material.dart';


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

  @override
  State<ClipLogin17> createState() => _ClipLogin17State();
}

class _ClipLogin17State extends State<ClipLogin17> {

  @override
  Widget build(BuildContext context) {

    Size screenSize= MediaQuery.of(context).size;
    const myColor=Colors.red;
    return Scaffold(
      body: SingleChildScrollView(
        child: Stack(
          children: [
            ClipPath(
              clipper: MyClipper1(),
              child: Container(height: screenSize.height,width: screenSize.width,
                color: myColor.shade100,
              ),
            ),
            ClipPath(
              clipper: MyClipper(),
              child: Container(height: screenSize.height/3,width: screenSize.width,
                decoration: BoxDecoration(
                    backgroundBlendMode: BlendMode.multiply,
                    gradient: LinearGradient(
                        begin: Alignment.topRight,
                        end: Alignment.center,
                        colors: [
                          myColor.shade900,
                          myColor.shade700,
                          myColor.shade400,
                          myColor.shade200
                        ]
                    )
                ),
              ),
            ),
            Positioned(
              bottom: 0,
              child: ClipPath(

                clipper: MyClipper2(),
                child: Container(height: screenSize.height/3,width: screenSize.width,
                  decoration: BoxDecoration(
                      backgroundBlendMode: BlendMode.multiply,
                      gradient: LinearGradient(
                          begin: Alignment.bottomLeft,
                          end: Alignment.topRight,
                          colors: [
                            myColor.shade900,
                            myColor.shade600,
                            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: 30,right: 30),
              child: Column(
                children: [
                  Container(
                    decoration: BoxDecoration(
                        backgroundBlendMode: BlendMode.multiply,
                        boxShadow:  [
                          BoxShadow(
                            color: Colors.grey.withOpacity(.8),
                            blurRadius: 10,
                            offset: Offset(0, 5),
                          ),
                        ],
                        gradient: LinearGradient(
                            begin: Alignment.centerLeft,
                            end: Alignment.centerRight,
                            colors: [
                              myColor.shade500,
                              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: Offset(0, 5),
                          ),
                        ],
                        gradient: LinearGradient(
                            begin: Alignment.centerLeft,
                            end: Alignment.centerRight,
                            colors: [
                              myColor.shade500,
                              myColor.shade400,
                              myColor.shade200
                            ]
                        ),
                        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(
                        color: myColor.shade800,
                        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(.5),
                            blurRadius: 5,
                            offset: const Offset(0, 5),
                          ),
                        ],
                        gradient: LinearGradient(
                            begin: Alignment.centerLeft,
                            end: Alignment.centerRight,
                            colors: [
                              myColor.shade500.withOpacity(.8),
                              myColor.shade300,
                              myColor.shade200.withOpacity(.7)
                            ]
                        ),
                        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,),
                  const Text("Don't have an account?",style: TextStyle(color: myColor,shadows:[Shadow(
                      color: Colors.grey,
                      offset: Offset(0,3),
                      blurRadius: 5
                  )] )),
                  GestureDetector(
                      onTap: (){},
                      child: Text('Register',style: TextStyle(color: myColor.shade800,fontSize: 16,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: 17,
                          color: myColor.shade800,
                          shadows:const [Shadow(
                              color: Colors.grey,
                              offset: Offset(0,3),
                              blurRadius: 5
                          )]
                      )
                  ),),

                  Container(
                      margin: const EdgeInsets.only(top: 10),
                      decoration: BoxDecoration(
                          backgroundBlendMode: BlendMode.multiply,
                          boxShadow:  [
                            BoxShadow(
                              color: Colors.grey.withOpacity(.8),
                              blurRadius: 5,
                              offset: Offset(0, 5),
                            ),
                          ],
                          gradient: LinearGradient(
                              begin: Alignment.centerLeft,
                              end: Alignment.centerRight,
                              colors: [
                                myColor.shade500.withOpacity(.8),
                                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: Offset(0, 5),
                            ),
                          ],
                          gradient: LinearGradient(
                              begin: Alignment.centerLeft,
                              end: Alignment.centerRight,
                              colors: [
                                myColor.shade500.withOpacity(.8),
                                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 MyClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path=Path();
    path.lineTo(0,size.height*.3 );
    path.quadraticBezierTo(size.width*.2, size.height*.6, size.width*.4, size.height*.32);
    path.quadraticBezierTo(size.width*.5, size.height*.2, size.width*.58, size.height*.42);
    path.quadraticBezierTo(size.width*.7, size.height*.75, size.width*.78, size.height*.6);
    path.quadraticBezierTo(size.width*.97,size.height*.05, size.width*.9, size.height*.7);
    path.quadraticBezierTo(size.width*.88, size.height, size.width,size.height);
    path.lineTo(size.width, 0);
    return path;

  }

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

class MyClipper1 extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path=Path();
    path.moveTo(0, size.height*.2);
    path.quadraticBezierTo(size.width*.2, 0, size.width*.3, size.height*.2);
    path.quadraticBezierTo(size.width*.4, size.height*.4, size.width*.6, size.height*.2);
    path.quadraticBezierTo(size.width*.8, 0, size.width*.8, size.height*.4);
    path.quadraticBezierTo(size.width*.8, size.height*.5, size.width, size.height*.6);
    //path.quadraticBezierTo(size.width, size.height*.7, size.width, size.height*.9);
    path.lineTo(size.width, size.height);
    path.lineTo(size.width*.9, size.height);
    path.quadraticBezierTo(size.width*.5, size.height, size.width*.5, size.height*.8);
    path.quadraticBezierTo(size.width*.5, size.height*.7, size.width*.25, size.height*.75);
    path.quadraticBezierTo(0, size.height*.8, size.width*.1, size.height*.6);
    path.quadraticBezierTo(size.width*.2, size.height*.4, 0, size.height*.5);

    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.quadraticBezierTo(size.width*.29, 0, size.width*.2, size.height*.2);
    path.quadraticBezierTo(size.width*.07, size.height*.5, size.width*.15, size.height*.6);
    path.quadraticBezierTo(size.width*.25, size.height*.7, size.width*.5, size.height*.6);
    path.quadraticBezierTo(size.width*.8, size.height*.5, size.width*.7, size.height);
    path.lineTo(0, size.height);
    return path;
  }
  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true ;
  }
}