import 'package:flutter/material.dart';
import 'package:login_screen/logon_screen/clipper_login12.dart';

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

  @override
  State<ClipLogin11> createState() => _ClipLogin11State();
}

class _ClipLogin11State extends State<ClipLogin11> {
  @override
  Widget build(BuildContext context) {
    Size screenSize=MediaQuery.of(context).size;
    const myColor=Colors.cyan;
    return Scaffold(
      body: SingleChildScrollView(
        child: Stack(
          children: [
            ClipPath(
              clipper: MyClipper4(),
              child: Container(height: screenSize.height,width: screenSize.width,
                color: myColor.withOpacity(.5),
              ),
            ),
            ClipPath(
              clipper: MyClipper3(),
              child: Container(height: screenSize.height,width: screenSize.width,
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.center,
                        end: Alignment.bottomCenter,
                        colors: [
                          Colors.black,
                          Colors.black,
                          myColor.shade400,]
                    )
                ),
              ),
            ),
            ClipPath(
              clipper: MyClipper2(),
              child: Container(height: screenSize.height,width: screenSize.width,
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.center,
                        end: Alignment.topCenter,
                        colors: [
                          Colors.black,
                          Colors.black,
                          myColor.shade800,
                          myColor.shade400,
                        ]
                    )
                ),
              ),
            ),
            // ClipPath(
            //   clipper: MyClipper1(),
            //   child: Container(height: screenSize.height/2,width: screenSize.width,color:myColor.shade400 ,),
            // ),
            Container(
              margin: EdgeInsets.only(top: screenSize.height/9,left: screenSize.width*.1),
              alignment: Alignment.centerLeft,
              child: Text('Welcome',style: TextStyle(
                  color: myColor.shade800,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*.27),
              child: Text('Sign In',style: TextStyle(
                  color: myColor.shade800,fontSize: 35,fontWeight: FontWeight.bold
              ),),
            ),

            Container(

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


                child: Column(

                  children:
                  [
                    Padding(
                      padding:  EdgeInsets.only(top: 20,left: 20,right: 20),
                      child: Column(
                          children: [
                            Container(
                              decoration: BoxDecoration(
                                  gradient: LinearGradient(
                                      begin: Alignment.centerLeft,
                                      end: Alignment.centerRight,
                                      colors: [
                                        Colors.black,
                                        Colors.black,
                                        myColor.shade800,
                                        myColor.shade400,
                                      ]
                                  )
                              ),
                              child: TextFormField(
                                style: TextStyle(color:Colors.white),
                                scrollPadding: EdgeInsets.only(bottom:MediaQuery.of(context).viewInsets.bottom),
                                decoration: InputDecoration(
                                  filled: true  ,
                                  fillColor: Colors.transparent,
                                  border: InputBorder.none,
                                  labelText: 'Email',
                                  labelStyle: TextStyle(color: Colors.white),

                                ),

                              ),
                            ),
                            const SizedBox(height: 15,),
                            Container(
                              decoration: BoxDecoration(
                                  gradient: LinearGradient(
                                      begin: Alignment.centerLeft,
                                      end: Alignment.centerRight,
                                      colors: [
                                        Colors.black,
                                        Colors.black,
                                        myColor.shade800,
                                        myColor.shade400,
                                      ]
                                  )
                              ),
                              child: TextFormField(
                                style: TextStyle(color:Colors.white),
                                obscureText: true ,
                                scrollPadding: EdgeInsets.only(bottom:MediaQuery.of(context).viewInsets.bottom),
                                decoration: InputDecoration(
                                  filled: true  ,
                                  fillColor: Colors.transparent,
                                  border: InputBorder.none,
                                  labelText: 'Password',
                                  labelStyle: TextStyle(color: Colors.white),
                                ),

                              ),
                            ),
                            const SizedBox(height: 15,),
                            Container(
                                margin: const EdgeInsets.only(right: 20),
                                alignment: Alignment.centerRight,
                                child:  Text('Forgot Password?',style: TextStyle(color: myColor.shade800),)),
                            const SizedBox(height: 15,),
                            Container(
                              width: double.infinity,
                              decoration: BoxDecoration(
                                  gradient: LinearGradient(
                                      begin: Alignment.center,
                                      end: Alignment.centerRight,
                                      colors: [
                                        Colors.black,
                                        Colors.black,
                                        myColor.shade700,
                                        myColor.shade400,
                                      ]
                                  )
                              ),
                              child: ElevatedButton(
                                onPressed: (){
                                  Navigator.of(context).push(MaterialPageRoute(builder: (context)=>const ClipLogin12()));
                                },
                                child: const Text('Sign In',style: TextStyle(color: Colors.white,fontSize: 25),),
                                style: ElevatedButton.styleFrom(
                                  padding: const EdgeInsets.symmetric(vertical: 18),
                                  backgroundColor: Colors.transparent,

                                ),
                              ),
                            ),
                            const SizedBox(height: 15),
                            Text("Don't have an account?",style: TextStyle(color: myColor),),
                            SizedBox(width: 8,),
                            Text('Register',style: TextStyle(
                              color: myColor.shade800,

                              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.lineTo(0, size.height*.1);
    path.quadraticBezierTo(size.width, size.height*.1, size.width/8*5, size.height*.15);
    path.quadraticBezierTo(size.width/8*5, size.height*.15, size.width/8*1, size.height*.2);
    path.quadraticBezierTo(size.width/8*7, size.height*.15, size.width, size.height*.25);
    //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;
  }

}

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/8*3,size.height*.85);
    path.quadraticBezierTo(size.width/8*6, size.height*.7, size.width,size.height*.83);
    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;
  }

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

    path.quadraticBezierTo(size.width/7.5, size.height*.91, size.width/8*3,size.height*.83);
    path.quadraticBezierTo(size.width/8*6, size.height*.7, size.width/8*7.5,size.height*.83);
    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;
  }

}