import 'package:flutter/material.dart';

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

  @override
  State<ClipLogin> createState() => _ClipLoginState();
}

class _ClipLoginState extends State<ClipLogin> {
  @override
  Widget build(BuildContext context) {
    const myColor=Colors.cyan;
    Size screenSize=MediaQuery.of(context).size;
    return  Scaffold(
    body: SingleChildScrollView(
      child: Stack(
        children:[
          ClipPath(
            clipper: WaveClipper(),
            child: Container(height:  screenSize.height/2.8,width: screenSize.width,color: myColor.shade200,
            ),
          ),
          ClipPath(
            clipper: WaveClipper(),
            child: Container(height:  screenSize.height/3,width: screenSize.width,color: myColor,
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: screenSize.height/6),
            alignment: Alignment.topCenter,
            child: Text('Welcome to FlutterAlive',style: TextStyle(
              color: Colors.white,fontSize: 30,
                shadows: [
                  Shadow(
                      color: Colors.black.withOpacity(0.5),
                      offset: const Offset(0, 5),
                      blurRadius: 10
                  )
                ]
            ),),
          ),
          Padding(
              padding: EdgeInsets.only(top: screenSize.height/3.4,left: 25,right: 20),
            child: Column(
              children: [
                Center(
                  child: Text('Sign In',style: TextStyle(
                    color: myColor,
                    fontSize: 35,fontWeight: FontWeight.bold,
                      shadows: [
                        Shadow(
                            color: Colors.black.withOpacity(0.3),
                            offset: const Offset(0, 8),
                            blurRadius: 15
                        )
                      ]
                  ),
                  ),

                ),
                SizedBox(height: 20,),
                TextField(
                  decoration: InputDecoration(
                    hintText: 'Email',
                    hintStyle: TextStyle(color: Colors.white,shadows: [
                      Shadow(
                          color: Colors.black.withOpacity(0.5),
                          offset: const Offset(0, 4),
                          blurRadius: 15
                      )
                    ]),
                    filled: true,
                    fillColor: myColor,
                    enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.only(topRight: Radius.circular(30), bottomLeft: Radius.circular(30) ),
                      borderSide: BorderSide(color: Colors.white)
                    ),
                    focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.only(topRight: Radius.circular(30), bottomLeft: Radius.circular(30) ),
                      borderSide: BorderSide(color: myColor.shade800)
                    )
                  ),
                ),
            SizedBox(height: 20,),
                TextField(
                  obscureText: true,
                  decoration: InputDecoration(
                      hintText: 'Password',
                      hintStyle: TextStyle(color: Colors.white,shadows: [
                        Shadow(
                            color: Colors.black.withOpacity(0.5),
                            offset: const Offset(0, 4),
                            blurRadius: 15
                        )
                      ]),
                      filled: true,
                      fillColor: myColor,
                      enabledBorder: OutlineInputBorder(
                          borderRadius: BorderRadius.only(topRight: Radius.circular(30), bottomLeft: Radius.circular(30) ),
                          borderSide: BorderSide(color: myColor)
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.only(topRight: Radius.circular(30), bottomLeft: Radius.circular(30) ),
                          borderSide: BorderSide(color: myColor.shade800)
                      )
                  ),
                ),
                Container(margin: EdgeInsets.only(top: 15),
                  alignment: Alignment.centerRight,
                  child: Text('Forgot Password?',style: TextStyle(color: myColor.shade800,fontSize: 16,
                      shadows: [
                        Shadow(
                        color: Colors.black.withOpacity(0.4),
                        offset: const Offset(0, 5),
                        blurRadius: 15
                    )
                  ]),),
                ),
                SizedBox(height: 20,),
                ClipRRect(
                    borderRadius: BorderRadius.only(bottomLeft: Radius.circular(20),topRight: Radius.circular(20)),
                  child: Container(
                    width: screenSize.width,
                    child: ElevatedButton(
                      onPressed: (){},
                      style: ElevatedButton.styleFrom(
                        backgroundColor: myColor,
                        padding: EdgeInsets.symmetric(horizontal: 20,vertical: 14)
                      ),
                      child: Text('Sign In',style: TextStyle(
                        fontSize: 25,color: Colors.white,fontWeight: FontWeight.bold,
                          shadows: [
                            Shadow(
                                color: Colors.black.withOpacity(0.5),
                                offset: const Offset(0, 5),
                                blurRadius: 15
                            )
                          ]
                      ),),
                    ),
                  ),
                ),
                Container(margin: EdgeInsets.only(top: 15),
                  alignment: Alignment.center,
                  child: Text("Don't have an account? Register",style: TextStyle(
                      color: myColor.shade800,
                      fontSize: 16,
                  shadows: [
                    Shadow(
                        color: Colors.black.withOpacity(0.4),
                        offset: const Offset(0, 5),
                        blurRadius: 15
                    )
                  ]
                  ),

                  ),

                ),

              ],
            ),
          )
]
      ),
    ),
    );
  }


}

class WaveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path =Path();
    path.lineTo(0, size.height);
    path.quadraticBezierTo(0, size.height/1.4, size.width/5, size.height/1.4);
    path.lineTo(size.width*0.8, size.height/1.4);
    path.quadraticBezierTo(size.width, size.height/1.4, size.width, size.height/2);
    path.lineTo(size.width, 0);
    return path;

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


}