import 'package:flutter/material.dart';

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

  @override
  State<ClipLogin8> createState() => _ClipLogin8State();
}

class _ClipLogin8State extends State<ClipLogin8> {
  @override
  Widget build(BuildContext context) {
    Size screenSize=MediaQuery.of(context).size;
    const myColor=Colors.cyan;
    return Scaffold(
      backgroundColor: Colors.black,

      body: SingleChildScrollView(
        child: Stack(
          children: [
            ClipPath(
              clipper: MyClipper3(),
              child: Container(height: screenSize.height,width: screenSize.width,
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.centerRight,
                        end: Alignment.centerLeft,
                        colors: [
                          myColor.shade700,
                          myColor.shade800,
                          myColor.shade900,
                          Colors.black,
                        ]
                    )
                ),

              ),
            ),
            ClipPath(
              clipper: MyClipper2(),
              child: Container(height: screenSize.height,width: screenSize.width,
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.centerRight,
                        end: Alignment.centerLeft,
                        colors: [
                          myColor.shade400,
                          myColor.shade600,
                          myColor.shade800,
                          Colors.black,
                        ]
                    )
                ),

              ),
            ),
            // ClipPath(
            //   clipper: MyClipper1(),
            //   child: Container(height: screenSize.height/2,width: screenSize.width,color:myColor.shade400 ,),
            // ),
            Container(
              margin: EdgeInsets.only(top: screenSize.height/5,left: screenSize.width*.1),
              alignment: Alignment.centerLeft,
              child: Text('Welcome',style: TextStyle(
                  color: Colors.white,fontSize: 40,
                  shadows: [
                    Shadow(
                        color: Colors.black.withOpacity(0.5),
                        offset: const Offset(0, 5),
                        blurRadius: 10
                    )
                  ]
              ),),
            ),
            Container(
              alignment: Alignment.center,
              margin: EdgeInsets.only(top: screenSize.height*.32),
              child: Text('Sign In',style: TextStyle(
                  color: myColor,fontSize: 35,fontWeight: FontWeight.bold
              ),),
            ),

            Container(

              padding: EdgeInsets.only(top: screenSize.height*0.4,left: 30,right: 30,bottom: 20),
              child: Container(


                child: Column(

                  children:
                  [
                    Padding(
                      padding:  EdgeInsets.only(top: 20,left: 20,right: 20),
                      child: Column(
                          children: [
                            TextFormField(
                              scrollPadding: EdgeInsets.only(bottom:MediaQuery.of(context).viewInsets.bottom),
                              decoration: InputDecoration(
                                filled: true,
                                fillColor: Colors.white,
                                labelText: 'Email',
                                labelStyle: TextStyle(color: myColor.shade900),
                                enabledBorder: OutlineInputBorder(
                                  borderSide: BorderSide(
                                    width: 1,color: Colors.white,
                                    
                                  ),
                                  borderRadius: BorderRadius.circular(10)
                                )


                              ),

                            ),
                            const SizedBox(height: 15,),
                            TextFormField(
                              obscureText: true,
                              scrollPadding: EdgeInsets.only(bottom:MediaQuery.of(context).viewInsets.bottom),
                              decoration: InputDecoration(
                                  filled: true,
                                  fillColor: Colors.white,
                                  labelText: 'Password',
                                  labelStyle: TextStyle(color: myColor.shade900),
                                  enabledBorder: OutlineInputBorder(
                                      borderSide: BorderSide(
                                        width: 1,color: Colors.white,

                                      ),
                                      borderRadius: BorderRadius.circular(10)
                                  )


                              ),

                            ),
                            const SizedBox(height: 15,),
                            Container(
                                margin: const EdgeInsets.only(right: 20),
                                alignment: Alignment.centerRight,
                                child: const Text('Forgot Password?',style: TextStyle(color: Colors.blue),)),
                            const SizedBox(height: 15,),
                            Container(
                              width: double.infinity,
                              decoration: BoxDecoration(borderRadius: BorderRadius.circular(30)),
                              child: ElevatedButton(
                                onPressed: (){},
                                style: ElevatedButton.styleFrom(
                                    padding: const EdgeInsets.symmetric(horizontal: 50,vertical: 15),
                                    backgroundColor: Colors.white,
                                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10))

                                ),
                                child:  Text('Sign In',style: TextStyle(color: myColor.shade800,fontSize: 25),),
                              ),
                            ),
                            const SizedBox(height: 15),
                            Text("Don't have an account?",style: TextStyle(color: Colors.white),),
                            SizedBox(width: 8,),
                            Text('Register',style: TextStyle(
                              color: Colors.blue,

                              decoration: TextDecoration.underline,)
                            ),
                            SizedBox(height: 20,)

                          ]
                      ),
                    ),





                  ],
                ),
              ),

            )


          ],
        ),
      ),
    );
  }
}
class MyClipper1 extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
    Path path =Path();
    path.lineTo(0, 0);
    path.quadraticBezierTo(size.width/8, size.height*0.4, size.width/8*3, size.height/2.1);
    path.quadraticBezierTo(size.width/8*4, size.height/2.9, size.width/8*5, size.height/2.6);
    path.quadraticBezierTo(size.width/8*7, size.height/2, size.width,0);

    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.moveTo(0, size.height*.2);
    path.lineTo(0, size.height*.4);
    path.quadraticBezierTo(size.width/8*7, size.height*.1, size.width, size.height*.3);
    //path.quadraticBezierTo(size.width/8*6, size.height/1.7, size.width, size.height/2.2);
    path.lineTo(size.width, size.height*.2);
    path.quadraticBezierTo(size.width/8*7, size.height*.1, size.width/8*4, size.height*.15);
    path.quadraticBezierTo(size.width/8*5, size.height*.1, size.width/8*5, 0);
    path.lineTo(size.width/8*4, 0);
    path.quadraticBezierTo(size.width/8*4, size.height*.1, size.width/8*2, size.height*.18);
    path.quadraticBezierTo(size.width/8*3, size.height*.05, size.width/8*2, 0);
    path.lineTo(size.width/8*1, 0);
    path.quadraticBezierTo(size.width/8*2, size.height*.05, 0, size.height*.2);


    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {

    return true;
  }

}

class MyClipper3 extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
    Path path =Path();
    path.moveTo(0, size.height);
    path.lineTo(0, size.height*.85);

    path.quadraticBezierTo(size.width/7.5, size.height*.95, size.width,size.height*.67);
    path.lineTo(size.width, size.height);
    //path.quadraticBezierTo(size.width/8*3, size.height/2.5, size.width/8*4, size.height/2.2);
    //path.quadraticBezierTo(size.width/8*6, size.height/1.7, size.width, size.height/2.2);
    //path.lineTo(size.width, 0);
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {

    return true;
  }

}