import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class ClipUserProfile2 extends StatefulWidget {
  const ClipUserProfile2({
    Key? key,}) : super(key: key);

  @override
  State<ClipUserProfile2> createState() => _ClipUserProfile2State();
}

class _ClipUserProfile2State extends State<ClipUserProfile2> {
  @override
  Widget build(BuildContext context) {
    Size screenSize=MediaQuery.of(context).size;
    const myColor=Colors.brown;
    return SafeArea(
      child: Scaffold(
        backgroundColor: myColor.shade900,
        body: SingleChildScrollView(
          child: Stack(
            children: [
              Container(
                height: screenSize.height*.4,
                width: screenSize.width,
                decoration: const BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage('assets/user.jpg'),fit: BoxFit.cover
                  )
                ),
              ),
              Container(
                height: screenSize.height*.43,
                width: screenSize.width,
                decoration:   BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [Colors.transparent,
                      Colors.transparent,
                      Colors.transparent,
                      Colors.transparent,
                      Colors.transparent,
                      myColor.shade900,
                      myColor.shade900,
                    ]
                  )
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: screenSize.height*.35),
                alignment: Alignment.center,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children:  [
                    const Text('John Doe',style: TextStyle(
                        color: Colors.white,
                        fontSize: 30
                    ),),
                    const Text('xyz@gmail.com',style: TextStyle(
                        color: Colors.white,
                        fontSize: 25
                    ),),
                    const SizedBox(height: 10,),

                    const Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Icon(FontAwesomeIcons.facebook,size: 30,color:Colors.white,),
                        ),
                        Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Icon(FontAwesomeIcons.twitter,size: 30,color: Colors.white,),
                        ),
                        Padding(
                          padding: EdgeInsets.all(8.0),
                          child: Icon(FontAwesomeIcons.linkedin,size: 30,color: Colors.white,),
                        ),
                      ],
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 20.0,vertical: 10),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          const Column(
                            children: [
                              Text('938',style: TextStyle(color: Colors.white,fontSize: 18),),
                              Text('Followers',style: TextStyle(color: Colors.white,fontSize: 18))
                            ],
                          ),

                          const Column(
                            children: [
                              Text('1023',style: TextStyle(color: Colors.white,fontSize: 18)),
                              Text('Following',style: TextStyle(color: Colors.white,fontSize: 18))
                            ],
                          ),
                          Container(height: 45,
                            decoration: BoxDecoration(
                              border: Border.all(color: Colors.white),
                              borderRadius: BorderRadius.circular(10)
                            ),
                            child: TextButton(onPressed: (){}, child: const Text('Edit Profile',style: TextStyle(
                                color: Colors.white,fontSize: 18
                            ),)),
                          )
                        ],
                      ),
                    ),

                     ListTile(
                      leading: const Icon(Icons.settings,color: Colors.white,),
                      title: const Text("Settings",style: TextStyle(color: Colors.white,fontSize: 20
                      ),),
                      trailing: const Icon(Icons.navigate_next,color: Colors.white,),
                      contentPadding: const EdgeInsets.only(right: 30,left: 30),
                      onTap: (){},
                    ),
                     ListTile(
                      leading: const Icon(Icons.notifications,color: Colors.white,),
                      title: const Text("Push Notification",style: TextStyle(color: Colors.white,fontSize: 20
                      ),),
                      trailing: const Icon(Icons.toggle_on,color: Colors.white,size: 40,),
                      contentPadding: const EdgeInsets.only(right: 30,left: 30),
                      onTap: (){},
                    ),
                     ListTile(
                      leading: const Icon(Icons.article_rounded,color: Colors.white,),
                      title: const Text("Terms of use",style: TextStyle(color: Colors.white,fontSize: 20
                      ),),
                      trailing: const Icon(Icons.navigate_next,color: Colors.white,),
                      contentPadding: const EdgeInsets.only(right: 30,left: 30),
                      onTap: (){},
                    ),
                     ListTile(
                      leading: const Icon(Icons.lock,color: Colors.white,),
                      title: const Text("Privacy policy",style: TextStyle(color: Colors.white,fontSize: 20
                      ),),
                      trailing: const Icon(Icons.navigate_next,color: Colors.white,),
                      contentPadding: const EdgeInsets.only(right: 30,left: 30),
                      onTap: (){},
                    ),
                  ],


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