import 'package:flutter/material.dart';

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

  @override
  State<ClipLogin5> createState() => _ClipLogin5State();
}

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

      body: SingleChildScrollView(
       child: Stack(
          children: [
            Positioned(

              child: ClipPath(
                clipper: MyClipper3(),
                child: Container(height: screenSize.height/2,width: screenSize.width,color:myColor.shade100 ,),
              ),
            ),
            Positioned(

              child: ClipPath(
                clipper: MyClipper2(),
                child: Container(height: screenSize.height/2,width: screenSize.width,color:myColor.shade200 ,),
              ),
            ),
            ClipPath(
              clipper: MyClipper(),
              child: Container(height: screenSize.height/2,width: screenSize.width,color:myColor.shade400 ,),
            ),
            Container(
              margin: EdgeInsets.only(top: screenSize.height/15,left: screenSize.width*.4),
              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*.3),
              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(
                decoration: BoxDecoration(borderRadius: BorderRadius.circular(10),color:myColor),

                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(
                                  labelText: 'Email',
                                  labelStyle: const TextStyle(color: Colors.white),
                                  enabledBorder: OutlineInputBorder(
                                    borderSide: const BorderSide(color: Colors.white, width: 2),
                                    borderRadius: BorderRadius.circular(10),
                                  ),
                                  focusedBorder: OutlineInputBorder(
                                      borderSide: BorderSide(color: myColor.shade800,width: 2),
                                      borderRadius: BorderRadius.circular(10)
                                  )
                              ),

                            ),
                            const SizedBox(height: 15,),
                            TextFormField(
                                scrollPadding: EdgeInsets.only(bottom:MediaQuery.of(context).viewInsets.bottom),
                              obscureText: true,
                              decoration: InputDecoration(
                                  labelText: 'Password',
                                  labelStyle: const TextStyle(color: Colors.white),
                                  enabledBorder: OutlineInputBorder(
                                    borderSide: const BorderSide(color: Colors.white, width: 2),
                                    borderRadius: BorderRadius.circular(10),
                                  ),
                                  focusedBorder: OutlineInputBorder(
                                      borderSide: BorderSide(color: myColor.shade800,width: 2),
                                      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.white),)),
                            const SizedBox(height: 15,),
                            Container(
                              width: double.infinity,
                              decoration: BoxDecoration(borderRadius: BorderRadius.circular(30)),
                              child: ElevatedButton(
                                onPressed: (){},
                                child: const Text('Sign In',style: TextStyle(color: myColor,fontSize: 25),),
                                style: ElevatedButton.styleFrom(
                                    padding: const EdgeInsets.symmetric(horizontal: 50,vertical: 12),
                                    backgroundColor: Colors.white,
                                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10))

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

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

                          ]
                      ),
                    ),





                  ],
                ),
              ),

            )


          ],
        ),
      ),
    );
  }
}
class MyClipper extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
    Path path =Path();
    path.lineTo(0, size.height*0.1);
    path.quadraticBezierTo(size.width/8*2, size.height*0.2, 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,size.height/2);
    path.lineTo(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/2.3);
    path.quadraticBezierTo(size.width/8, size.height*.3, size.width/8*3, size.height/2.1);
    //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.lineTo(0, size.height*.2);
    path.quadraticBezierTo(size.width/8, size.height, size.width/8*6,0);
    //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;
  }

}