import 'package:flutter/material.dart';

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

  @override
  State<ClipLogin13> createState() => _ClipLogin13State();
}

class _ClipLogin13State extends State<ClipLogin13> {
  @override
  Widget build(BuildContext context) {
    const myColor=Colors.purple;
    Size screenSize=MediaQuery.of(context).size;
    return  Scaffold(
      body: Stack(
          children:[
            ClipPath(
              clipper: WaveClipper(),
              child: Container(height:  screenSize.height,width: screenSize.width,

                decoration:BoxDecoration(
                  color: myColor,
                    boxShadow: [BoxShadow(
                        color: Colors.black.withOpacity(0.3),
                        offset: const Offset(0, 8),
                        blurRadius: 15
                    )]
                ) ,
              ),
            ),
            // 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: 25,
                  shadows: [
                    Shadow(
                        color: Colors.black.withOpacity(0.5),
                        offset: const Offset(0, 5),
                        blurRadius: 10
                    )
                  ]
              ),),
            ),
            Padding(
              padding: EdgeInsets.only(top: screenSize.height*.35,left: 25,right: 20),
              child: Column(
                children: [
                  Center(
                    child: Text('Sign In',style: TextStyle(
                        color: Colors.white,
                        fontSize: 35,fontWeight: FontWeight.bold,
                        shadows: [
                          Shadow(
                              color: Colors.grey,
                              offset: const Offset(3, 5),
                              blurRadius: 5
                          )
                        ]
                    ),
                    ),

                  ),
                  SizedBox(height: screenSize.height*.15),
                  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: Colors.white)
                        ),
                        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*.1);
    path.quadraticBezierTo(size.width*.1, size.height*.1, size.width*.1, size.height*.2);
    path.quadraticBezierTo(size.width*.2, size.height*.2, size.width*.2, size.height*.3);
    path.quadraticBezierTo(size.width*.3, size.height*.3, size.width*.3, size.height*.4);
    path.quadraticBezierTo(size.width*.4, size.height*.4, size.width*.4, size.height*.5);
    path.quadraticBezierTo(size.width*.5, size.height*.45, size.width*.6, size.height*.5);
    path.quadraticBezierTo(size.width*.6, size.height*.4, size.width*.7, size.height*.4);
    path.quadraticBezierTo(size.width*.7, size.height*.3, size.width*.8, size.height*.3);
    path.quadraticBezierTo(size.width*.8, size.height*.2, size.width*.9, size.height*.2);
    path.quadraticBezierTo(size.width*.9, size.height*.1, size.width, size.height*.1);
    path.lineTo(size.width, 0);


    return path;

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


}