import 'dart:ui'; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; class UserProfile8 extends StatefulWidget { const UserProfile8({Key? key}) : super(key: key); @override State createState() => _UserProfile8State(); } class _UserProfile8State extends State { List labels=[ 'Photos', 'Arts', 'Templates', 'Graphics', 'Banners', ]; List images=[ '1.jpeg', '2.jpeg', '3.jpeg', '4.jpeg', '5.jpeg', '6.jpeg', '7.jpeg', '8.jpeg', '9.jpeg', '10.jpeg' ]; int currentIndex=0; final ScrollController _scrollController = ScrollController(); @override Widget build(BuildContext context) { Size screenSize= MediaQuery.of(context).size; const myColor =Colors.green; return Scaffold( //backgroundColor: myColor.shade100, body: SingleChildScrollView( child: Stack( children: [ Container( height: screenSize.height/3, width: screenSize.width, child: const Image(image: AssetImage('assets/1.jpeg'),fit: BoxFit.cover,), ), Container( margin: EdgeInsets.only(top: screenSize.height*.1), child: ClipPath( clipper: MyClipper(), child: Container(height: screenSize.height/2,width: screenSize.width,color:Colors.white ,), ), ), Center( child: Container( margin: EdgeInsets.only(top: screenSize.height*.08), height: screenSize.height*.15, width: screenSize.height*.15, decoration: BoxDecoration( border: Border.all(width: 3,color: Colors.white), borderRadius: BorderRadius.circular(100), image: const DecorationImage(image: AssetImage('assets/user.jpg')) ), ), ), Padding( padding: EdgeInsets.only(top: screenSize.height*.23,), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ Text('John Doe',style: TextStyle(fontSize: 30,fontWeight: FontWeight.bold,color: myColor.shade800,),), Text('Designer & Blogger',style: TextStyle(fontSize: 20,color: myColor.shade800),), SizedBox(height: 10,), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Container( width: 130, height: screenSize.height*.05, decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.centerLeft, end: Alignment.centerRight, colors: [ myColor.shade800, myColor.shade200, ] ), borderRadius: BorderRadius.circular(20) ), child: TextButton(onPressed: (){}, child: const Text('Follow',style: TextStyle(color: Colors.white,fontSize: 18),))), Container( width: 130, height: screenSize.height*.05, decoration: BoxDecoration( gradient: LinearGradient( begin: Alignment.centerLeft, end: Alignment.centerRight, colors: [ myColor.shade800, myColor.shade200, ] ), borderRadius: BorderRadius.circular(20) ), child: TextButton(onPressed: (){}, child: const Text('Message',style: TextStyle(color: Colors.white,fontSize: 18),))), ], ), const Divider(), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ Padding( padding: const EdgeInsets.all(8.0), child: Icon(FontAwesomeIcons.facebook,size: 35,color: myColor.shade700,), ), Padding( padding: const EdgeInsets.all(8.0), child: Icon(FontAwesomeIcons.twitter,size: 35,color: myColor.shade700,), ), Padding( padding: const EdgeInsets.all(8.0), child: Icon(FontAwesomeIcons.linkedin,size: 35,color: myColor.shade700,), ), ], ), Container( padding: EdgeInsets.only(top: 20), decoration: BoxDecoration( borderRadius: BorderRadius.only(topLeft: Radius.circular(30)), //color: myColor.shade100 ), child: Column( children: [ Container(height: 65, width: double.infinity, child: ListView.builder( physics: const BouncingScrollPhysics(), itemCount: labels.length, scrollDirection: Axis.horizontal, itemBuilder: (context,index){ return Column( children: [ GestureDetector( onTap: (){ setState(() { currentIndex=index; }); }, child: AnimatedContainer( margin: EdgeInsets.only(left: 20,top: 7), width: currentIndex==index?140:120, height: 45, decoration: BoxDecoration( boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(.6), offset: Offset(3,3), blurRadius: 5, spreadRadius: 4 ) ], borderRadius: BorderRadius.circular(30), color: currentIndex==index?myColor.shade700:Colors.white ), duration: Duration(milliseconds: 100), child: Center(child: Text(labels[index],style: TextStyle( fontWeight: currentIndex==index?FontWeight.bold:FontWeight.normal, color: currentIndex==index?Colors.white:Colors.black,fontSize: 18 ),),), ), ), SizedBox(height: 5,), Visibility( visible: currentIndex==index, child: Container( margin: EdgeInsets.only(left: 20), width: 80, height: 5, decoration: BoxDecoration( color:myColor.shade700, borderRadius: BorderRadius.circular(10) ), ) ), ], ); }), ), Visibility( visible: currentIndex==0, child: Container( width: screenSize.width, child: GridView.builder( padding: EdgeInsets.only(top: 10,left: 10,right: 10), shrinkWrap: true, controller: _scrollController, itemCount: images.length, gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent( maxCrossAxisExtent: 300, childAspectRatio: 2 / 2, crossAxisSpacing: 10, mainAxisSpacing: 15), itemBuilder: (context,index){ return Container( decoration: BoxDecoration( boxShadow: [ BoxShadow( color: Colors.grey, offset: Offset(2,5), blurRadius: 5, ) ], borderRadius: BorderRadius.circular(15), image: DecorationImage( image:AssetImage('assets/''${images[index]}'),fit: BoxFit.cover ) ), ); }), ), ), Visibility( visible: currentIndex==1, child: Container( height: 320, child: ListView.builder( itemCount: images.length, scrollDirection: Axis.horizontal, itemBuilder: (context,index){ return Column( children: [ Container( margin: const EdgeInsets.only(left: 15,top: 5,right: 5), height: 300, width: 200, decoration: BoxDecoration( boxShadow: [ BoxShadow( color: Colors.grey, offset: Offset(2,5), blurRadius: 5, ) ], borderRadius: BorderRadius.circular(20), image: DecorationImage( image: AssetImage("assets/"'${images[index]}'),fit: BoxFit.cover ) ), ), SizedBox(height: 10,) ], ); }), ), ), Visibility( visible: currentIndex==2, child: Container( width: screenSize.width, child: GridView.builder( padding: EdgeInsets.all(10), shrinkWrap: true, controller: _scrollController, itemCount: images.length, gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, mainAxisSpacing: 10, crossAxisSpacing: 10, ), itemBuilder: (context,index){ return Container( decoration: BoxDecoration( boxShadow: [ BoxShadow( color: Colors.grey, offset: Offset(2,5), blurRadius: 5, ) ], borderRadius: BorderRadius.circular(15), image: DecorationImage( image:AssetImage('assets/''${images[index]}'),fit: BoxFit.cover ) ), ); }), ), ), Visibility( visible: currentIndex==3, child: Container( width: screenSize.width, child: GridView.builder( padding: EdgeInsets.all(10), shrinkWrap: true, controller: _scrollController, itemCount: images.length, gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, mainAxisSpacing: 10, crossAxisSpacing: 10, ), itemBuilder: (context,index){ return Container( decoration: BoxDecoration( boxShadow: [ BoxShadow( color: Colors.grey, offset: Offset(2,5), blurRadius: 5, ) ], borderRadius: BorderRadius.circular(15), image: DecorationImage( image:AssetImage('assets/''${images[index]}'),fit: BoxFit.cover ) ), ); }), ), ), Visibility( visible: currentIndex==4, child: Container( height: 300, child: ListView.builder( itemCount: images.length, scrollDirection: Axis.horizontal, itemBuilder: (context,index){ return Column( children: [ Container( margin: const EdgeInsets.only(left: 15,top: 5,right: 5), height: 200, width: 300, decoration: BoxDecoration( boxShadow: [ BoxShadow( color: Colors.grey, offset: Offset(2,5), blurRadius: 5, ) ], borderRadius: BorderRadius.circular(20), image: DecorationImage( image: AssetImage("assets/"'${images[index]}'),fit: BoxFit.cover ) ), ), SizedBox(height: 10,) ], ); }), ), ), ], ), ), ], ), ) ], ), ), ); } } class MyClipper extends CustomClipper{ @override Path getClip(Size size) { Path path =Path(); path.moveTo(0, size.height*.2); path.lineTo(0, size.height); path.lineTo(size.width, size.height); path.lineTo(size.width,size.height*.2); path.quadraticBezierTo(size.width/2, 0, 0, size.height*.2); return path; } @override bool shouldReclip(covariant CustomClipper oldClipper) { return true; } }