import 'dart:ui';

import 'package:flutter/material.dart';

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

  @override
  State<ClipLogin18> createState() => _ClipLogin18State();
}

class _ClipLogin18State extends State<ClipLogin18> {
  @override
  Widget build(BuildContext context) {
    Size screenSize =MediaQuery.of(context).size;
    const myColor= Colors.deepOrange;
    const myColor2= Colors.yellow;
    return Scaffold(

      body:SingleChildScrollView(
        child: Stack(
          children: [

            ClipPath(
              clipper: MyClipper(),
              child: Container(width: screenSize.width,height: screenSize.height,color: myColor2),
            ),
            Positioned(
              top: screenSize.height/2.9,
              left: screenSize.width/3.5,
              child: Container(
                width: 100,
                height: 100,
                decoration: BoxDecoration(borderRadius: BorderRadius.circular(100),color: myColor),
              ),
            ),
            Positioned(
              top: screenSize.height*.8,
              left: screenSize.width*.8,
              child: Container(
                width: 50,
                height: 50,
                decoration: BoxDecoration(borderRadius: BorderRadius.circular(50),color: myColor2),
              ),
            ),
            Positioned(
              top: screenSize.height*.7,
              left: screenSize.width*.5,
              child: Container(
                width: 30,
                height: 30,
                decoration: BoxDecoration(
                  backgroundBlendMode: BlendMode.modulate,
                    borderRadius: BorderRadius.circular(50),color: myColor),

              ),
            ),
            Positioned(
              top: screenSize.height*.6,
              left: screenSize.width*.05,
              child: Container(
                width: 70,
                height: 70,
                decoration: BoxDecoration(borderRadius: BorderRadius.circular(50),color: myColor),
              ),
            ),
            
            ClipPath(
              clipper: MyClipper2(),
              child: Container(height: screenSize.height/4,width: screenSize.width,
                decoration: BoxDecoration(
                    backgroundBlendMode: BlendMode.multiply  ,
                    gradient: LinearGradient(
                        begin: Alignment.topLeft,
                        end: Alignment.bottomCenter,
                        colors:[
                          myColor.shade800,
                          myColor.shade300,
                          myColor.shade200,
                          myColor.shade200,
                        ]
                    )
                ),),
            ),
            ClipPath(
              clipper: MyClipper3(),
              child: Container(height: screenSize.height,width: screenSize.width,
                decoration: BoxDecoration(
                    backgroundBlendMode: BlendMode.multiply  ,
                    gradient: LinearGradient(
                        begin: Alignment.bottomRight,
                        end: Alignment.center,
                        colors:[
                          myColor.shade800,
                          myColor.shade300,
                          myColor.shade200,
                          myColor.shade200,
                          myColor.shade200,
                        ]
                    )
                ),),
            ),

            Center(
              child: Container(
                padding: const EdgeInsets.only(top: 80),
                width: screenSize.width*.8,
                height: screenSize.height*.9,
                child: ClipRRect(borderRadius: BorderRadius.circular(20),
                child: Container(
                  color: Colors.transparent,
                  child: Stack(
                    children: [
                      BackdropFilter(filter: ImageFilter.blur(sigmaX: 5,sigmaY: 5),
                      child: Container(),),
                      Container(
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(20),
                          border: Border.all(color: Colors.white.withOpacity(.15),),
                          gradient: LinearGradient(
                            begin: Alignment.topLeft,
                            end: Alignment.bottomRight,
                            colors: [
                              Colors.white.withOpacity(.15),
                              Colors.white.withOpacity(.1)
                            ]
                          )
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: screenSize.height*.06,left: 20,right: 20),

                        child: Column(
                          children: [
                            const Text("Sign In",style: TextStyle(fontSize: 35,color: myColor,fontWeight: FontWeight.bold),),
                            const SizedBox(height: 15,),
                            TextFormField(
                              decoration:  InputDecoration(
                                labelText: 'Email',
                                labelStyle: TextStyle(color: myColor.shade800)
                              ),
                            ),
                            const SizedBox(height: 20),
                            TextFormField(
                              obscureText: true,
                              scrollPadding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
                              decoration:  InputDecoration(
                                  labelText: 'Password',
                                  labelStyle: TextStyle(color: myColor.shade800)
                              ),
                            ),
                            const SizedBox(height: 10,),
                            Container(
                              alignment: Alignment.centerRight,
                              child:  Text('Forgot password?',style: TextStyle(color: myColor.shade800),),
                            ),
                            const SizedBox(height: 20,),
                            Container(
                              width: double.infinity,
                              decoration: BoxDecoration(color: Colors.white.withOpacity(.2),
                              boxShadow: [BoxShadow(
                                color: Colors.grey.withOpacity(.5),
                                blurRadius: 10,
                                offset: const Offset(0,5)
                              )],
                              borderRadius: BorderRadius.circular(20)
                              ),
                              child: ElevatedButton(
                                onPressed: (){},
                                style: ElevatedButton.styleFrom(
                                  padding: const EdgeInsets.symmetric(vertical: 5),
                                  shadowColor: Colors.transparent,
                                  backgroundColor: Colors.transparent,
                                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20))
                                ),
                                child: const Text('Sign In',style: TextStyle(color: myColor,fontSize: 30),),
                              ),
                            ),
                            const SizedBox(height: 10,),
                            const Text("Don't have an account?",style: TextStyle(color: Colors.white,
                            shadows:[ Shadow(
                              color: Colors.black87,
                              blurRadius: 5,
                              offset: Offset(0,2)
                            )]
                            ),
                            ),
                            const SizedBox(height: 10,),
                              Text("Register >",style: TextStyle(color: myColor.shade800,fontSize: 15,
                                shadows:[ Shadow(
                                    color: Colors.grey,
                                    blurRadius: 5,
                                    offset: Offset(0,2)
                                )]
                            ),
                            ),
                            const SizedBox(height: 10,),
                            Container(
                              margin: const EdgeInsets.only(left: 30),
                              alignment: Alignment.centerLeft,
                              child:  Text("Or ",style: TextStyle(color: myColor.shade800,fontSize: 15,
                                  shadows:[ Shadow(
                                      color: Colors.grey,
                                      blurRadius: 10,
                                      offset: Offset(0,4)
                                  )]
                              ),
                              ),
                            ),
                            Container(margin: const EdgeInsets.only(top: 15),
                               decoration: BoxDecoration(
                                 borderRadius: BorderRadius.circular(20),
                                 color: Colors.white.withOpacity(.1),
                                 boxShadow: [BoxShadow(
                                   color: Colors.grey.withOpacity(.7),
                                   blurRadius: 15,
                                   offset: const Offset(0,3)
                                 )]
                               ),
                              child:  ListTile(
                                leading: Icon(Icons.android,color: myColor.shade800,),
                                title: Text('Log in with Google',style: TextStyle(color: myColor.shade800,fontWeight: FontWeight.bold),),
                                trailing: Icon(Icons.arrow_forward_ios,color: myColor.shade800,),
                              ),
                            ),
                            Container(margin: const EdgeInsets.only(top: 15),
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(20),
                                  color: Colors.white.withOpacity(.1),
                                  boxShadow: [BoxShadow(
                                      color: Colors.grey.withOpacity(.7),
                                      blurRadius: 15,
                                      offset: const Offset(0,3)
                                  )]
                              ),
                              child:  ListTile(
                                leading: Icon(Icons.apple,color: myColor.shade800,),
                                title: Text('Log in with Apple',style: TextStyle(color: myColor.shade800,fontWeight: FontWeight.bold),),
                                trailing: Icon(Icons.arrow_forward_ios,color: myColor.shade800,),
                              ),
                            ),
                          ],
                        ),
                      )
                    ],
                  ),
                ),),


              ),
            )

          ],
        ),
      ),
    );
  }
}

class MyClipper3 extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path= Path();
    path.moveTo(size.width/2, size.height);
    path.quadraticBezierTo(size.width*.5, size.height*.9, size.width*.6,size.height*.86);
    path.quadraticBezierTo(size.width*.75, size.height*.8, size.width*.8,size.height*.75);
    path.quadraticBezierTo(size.width*.85, size.height*.7, size.width*.82,size.height*.6);
    path.quadraticBezierTo(size.width*.8, size.height*.5, size.width,size.height*.5);
    path.lineTo(size.width, size.height);
    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*.7);
    path.quadraticBezierTo(size.width/4, size.height*.8, size.width*.38, size.height*.5);
    path.quadraticBezierTo(size.width*.47, size.height*.25, size.width*.6, size.height*.33);
    path.quadraticBezierTo(size.width*.75, size.height*.4, size.width*.85, size.height*.26);
    path.quadraticBezierTo(size.width*.95, size.height*.1, size.width*.93, size.height*.3);
    path.quadraticBezierTo(size.width*.9, size.height*.5, size.width, size.height*.7);
    path.lineTo(size.width, 0);
    return path;
  }

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

class MyClipper extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    Path path=Path();
    path.moveTo(0,size.height*.3 );
    path.lineTo(0, size.height);
    path.lineTo(size.width*.6, size.height);
    path.quadraticBezierTo(size.width*.6, size.height*.8, size.width*.8, size.height*.7);
    path.quadraticBezierTo(size.width*.95, size.height*.6, size.width*.9, size.height*.5);
    path.quadraticBezierTo(size.width*.85, size.height*.4, size.width, size.height*.3);
    path.lineTo(size.width, size.height*.05);
    path.quadraticBezierTo(size.width*.9, size.height*.2, size.width*.6, size.height*.14);
    path.quadraticBezierTo(size.width*.2, size.height*.05, 0, size.height*.3);
    return path;

  }

  @override
  bool shouldReclip(covariant CustomClipper oldClipper) {
    return true;
  }
}