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

  @override
  State<ClipUserProfile5> createState() => _ClipUserProfile5State();
}

class _ClipUserProfile5State extends State<ClipUserProfile5> {

  PageController _pageController = PageController(viewportFraction: 0.55, initialPage: 1);
  List yourList =[];
  int _currentIndex=1;

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    Size screenSize=MediaQuery.of(context).size;
    var myColor=Colors.cyan;
    return Scaffold(

      body: SingleChildScrollView(
        child:
        Stack(
          children: [
            ClipPath(
              clipper: MyClipper2(),
              child: Container(height: screenSize.height*.52,width: screenSize.width,color:myColor.shade200 ,),
            ),
            ClipPath(
              clipper: MyClipper(),
              child: Container(height: screenSize.height/2.6,width: screenSize.width,color:myColor ,),
            ),
            Container(
              height: 150,
              margin: EdgeInsets.only(top: screenSize.height*.07),
              width: screenSize.width,
              child: PageView(
                  onPageChanged: (index){
                    setState(() {
                      _currentIndex=index;
                    });
                  },
                controller: _pageController,
                children:[
                    Container(
                        height:150.0,
                        width:150.0,
                        child: const CircleAvatar(
                          backgroundImage: AssetImage('assets/user.jpg')
                          //modify as you want
                        )
                    ),


                    Container(
                        height:150.0,
                        width:150.0,
                        child: const CircleAvatar(
                        backgroundImage: AssetImage('assets/user.jpg')
                        //modify as you want
                    )
                    ),
                  Container(
                      height:150.0,
                      width:150.0,
                      child: const CircleAvatar(
                          backgroundImage: AssetImage('assets/user.jpg')
                        //modify as you want
                      )
                  ),

                ]

              ),
            ),
            Padding(
              padding: EdgeInsets.only(top: screenSize.height*.26,left: 20,right: 20),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Container(
                    width: screenSize.width*.7,
                    child: const Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text('John Doe John Doe John Doe' ,
                          style: TextStyle(
                              fontSize: 30,
                              overflow: TextOverflow.ellipsis,
                              color: Colors.white),),
                        Text('Senior Developer @ a Large Company',
                          style: TextStyle(
                              fontSize: 18,
                              overflow: TextOverflow.ellipsis,
                              color: Colors.white
                          ),),
                      ],
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      for(var i=0; i<3; i++)
                        DotIndicator(_currentIndex==i)
                    ],),

                ],
              ),
            ),
            Padding(
              padding:  EdgeInsets.only(top: screenSize.height*.38),
              child:  Column(
                children: [
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Column(
                        children: [
                          Text('234',style: TextStyle(fontSize: 18),),
                          Text('Posts')
                        ],
                      ),
                      Column(
                        children: [
                          Text('938',style: TextStyle(fontSize: 18),),
                          Text('Followers',)
                        ],
                      ),
                      Column(
                        children: [
                          Text('1023',style: TextStyle(fontSize: 18),),
                          Text('Following')
                        ],
                      ),

                    ],
                  ),
                  SizedBox(height: 70,),
                  Text('About',style: TextStyle(
                      fontSize: 22,
                      fontWeight: FontWeight.bold,color: myColor.shade700),),
                  SizedBox(height: 10,),
                  Padding(
                    padding:  EdgeInsets.only(left: 15.0,right: 10),
                    child: Text('Contrary to popular belief, Lorem Ipsum '
                        'is not simply random text. It has roots in a piece'
                        ' of classical Latin literature from 45 BC, making'
                        ' it over 2000 years old. Richard McClintock',
                      style: TextStyle(color: myColor.shade700,fontSize: 16),),
                  ),
                  ListTile(
                    leading: Icon(Icons.email,color: myColor.shade700,),
                    title: Text('xyz@xyz.com',style: TextStyle(fontSize: 20,color: myColor.shade700),),
                  ),
                  ListTile(
                    leading: Icon(Icons.phone,color: myColor.shade700,),
                    title: Text('+11111111111',style: TextStyle(fontSize: 20,color: myColor.shade700),),
                  ),
                  ListTile(
                    leading: Icon(Icons.language,color: myColor.shade700,),
                    title: Text('flutteralive.com',style: TextStyle(fontSize: 20,color: myColor.shade700),),
                  ),

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

class MyClipper extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
    Path path =Path();
    path.lineTo(0, size.height);
    path.quadraticBezierTo(size.width*.15, size.height*.8, size.width*.3, size.height*.9);
    path.quadraticBezierTo(size.width*.4, size.height, size.width*.55, size.height*.9);
    path.quadraticBezierTo(size.width*.7, size.height*.8, size.width*.8, size.height*.9);
    path.quadraticBezierTo(size.width*.9, size.height, size.width, size.height);
    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*.9);
    path.quadraticBezierTo(size.width*.15, size.height*.8, size.width*.28, size.height*.9);
    path.quadraticBezierTo(size.width*.4, size.height, size.width*.55, size.height*.9);
    path.quadraticBezierTo(size.width*.7, size.height*.8, size.width*.8, size.height*.9);
    path.quadraticBezierTo(size.width*.9, size.height, size.width, size.height);
    path.lineTo(size.width, 0);
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {

    return true;
  }

}

Widget DotIndicator(bool x){
  return Padding(
    padding: const EdgeInsets.all(5.0),
    child: Container(
      height: x? 12:8,
      width:  x? 20:8,
      decoration:   BoxDecoration(
          borderRadius: BorderRadius.circular(5),
          color: x? Colors.teal.shade800: Colors.white70,

      ),
    ),
  );
}