import 'dart:math'; import 'package:car_for_her/widgets/driver%20widgets/missions.dart'; import 'package:car_for_her/widgets/driver%20widgets/rating_list.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/flutter_svg.dart'; class DriverProfile extends StatefulWidget { const DriverProfile({Key key}) : super(key: key); @override _DriverProfileState createState() => _DriverProfileState(); } class _DriverProfileState extends State { @override Widget build(BuildContext context) { return SingleChildScrollView( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ /** ************************Top Container****************************** **/ Stack( children: [ Opacity( opacity: 1, child: ClipPath( clipper: bottomContainer(), child: Container( color: Color(0xffFEE8F5), height: 330, ), ), ), Opacity( opacity: 1, child: ClipPath( clipper: MyCustomClipper(), child: Container( color: Color(0xffFDC7E8), height: 280, ), ), ), Column( children: [ Padding( padding: const EdgeInsets.fromLTRB(20, 35, 20, 20), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ IconButton( onPressed: () {}, icon: SvgPicture.asset( 'assets/icons/left_arrow.svg')), Padding( padding: const EdgeInsets.only(right: 108.0), child: Text("Account", style: TextStyle( fontFamily: 'MontHeavy', fontWeight: FontWeight.bold, fontSize: 31)), ), IconButton( onPressed: () {}, icon: SvgPicture.asset('assets/icons/settings.svg')), ], ), ), Column( children: [ CircleAvatar( foregroundImage: AssetImage("assets/images/avatar.png"), radius: 45, ), SizedBox( height: 10, ), Text( "Name of driver", style: TextStyle( fontFamily: 'MontHeavy', fontWeight: FontWeight.bold, fontSize: 15, ), ), SizedBox( height: 3, ), SvgPicture.asset( "assets/icons/rating", height: 12, ), SizedBox( height: 10, ), Row( mainAxisAlignment: MainAxisAlignment.center, children: [ SvgPicture.asset( "assets/icons/location.svg", height: 16, ), SizedBox( width: 5, ), Text( "Palestine", style: TextStyle( fontSize: 14, fontFamily: 'MontExtraLight', fontWeight: FontWeight.bold), ) ], ), ], ), ], ), ], ), /** ************************Layout Body****************************** **/ Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ /** ************************My missions****************************** **/ Padding( padding: const EdgeInsets.only(left: 35.0), child: Text( "My missions", style: TextStyle( fontFamily: 'MontHeavy', fontSize: 20, fontWeight: FontWeight.bold), ), ), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ TextButton( onPressed: () {}, child: Text( "Completed", style: TextStyle( fontFamily: 'MontExtraLight', fontSize: 14, fontWeight: FontWeight.bold, color: Colors.black), ), ), TextButton( onPressed: () {}, child: Text( "Up coming", style: TextStyle( fontFamily: 'MontExtraLight', fontSize: 14, fontWeight: FontWeight.bold, color: Colors.grey), ), ), TextButton( onPressed: () {}, child: Text( "Cancelled", style: TextStyle( fontFamily: 'MontExtraLight', fontSize: 14, fontWeight: FontWeight.bold, color: Colors.grey), ), ), ], ), Divider( color: Color.fromRGBO(0, 0, 0, 0.4), ), Padding( padding: const EdgeInsets.fromLTRB(35, 10, 35, 0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( "Today 15-10-2021", style: TextStyle( fontFamily: 'MontExtraLight', fontSize: 14, fontWeight: FontWeight.bold, color: Colors.black), ), Container( height: 30, child: TextButton( onPressed: () { Navigator.pushNamed(context, '/missions_see_all'); }, child: Text( "See all", style: TextStyle( fontFamily: 'MontExtraLight', fontSize: 14, decoration: TextDecoration.underline, fontWeight: FontWeight.bold, color: Colors.black), )), ), ], ), ), Padding( padding: const EdgeInsets.fromLTRB(30, 10, 30, 0), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ DriverMissions((1), "today"), DriverMissions((1), "today"), ], ), ), /** ************************ Ratings ****************************** **/ Padding( padding: const EdgeInsets.only(left: 35.0, top: 10), child: Text( "Ratings list", style: TextStyle( fontFamily: 'MontHeavy', fontSize: 20, fontWeight: FontWeight.bold), ), ), Padding( padding: const EdgeInsets.fromLTRB(35, 10, 35, 0), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.center, children: [ Text( "21 reviews", style: TextStyle( fontFamily: 'MontExtraLight', fontSize: 14, fontWeight: FontWeight.bold, color: Colors.black), ), Container( height: 30, child: TextButton( onPressed: () { Navigator.pushNamed(context, '/rating_see_all'); }, child: Text( "See all", style: TextStyle( fontFamily: 'MontExtraLight', fontSize: 14, decoration: TextDecoration.underline, fontWeight: FontWeight.bold, color: Colors.black), )), ), ], ), ), Padding( padding: const EdgeInsets.fromLTRB(15, 8, 15, 8), child: Row( children: [ Stack( children: [ Container( margin: EdgeInsets.only(bottom: 10), color: Color.fromRGBO(0, 0, 0, 0.5), width: 1.5, height: 110, child: Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Column( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ Container( color: Color.fromRGBO(0, 0, 0, 0.8), width: 1.5, height: 21, ),Container( color: Color.fromRGBO(0, 0, 0, 0.8), width: 1.5, height: 21, ),Container( color: Color.fromRGBO(0, 0, 0, 0.8), width: 1.5, height: 21, ), ], ), ), ), ], ), Column( children: [ RatingWidget(0), RatingWidget(1), RatingWidget(2), ], ), ], ), ), ], ), ], ), ); } } class MyCustomClipper extends CustomClipper { @override Path getClip(Size size) { // I've taken approximate height of curved part of view // Change it if you have exact spec for it final roundingHeight = size.height * 3 / 5; // this is top part of path, rectangle without any rounding final filledRectangle = Rect.fromLTRB(0, 0, size.width, size.height - roundingHeight); // this is rectangle that will be used to draw arc // arc is drawn from center of this rectangle, so it's height has to be twice roundingHeight // also I made it to go 5 units out of screen on left and right, so curve will have some incline there final roundingRectangle = Rect.fromLTRB( -60, size.height - roundingHeight * 2, size.width + 50, size.height); final path = Path(); path.addRect(filledRectangle); // so as I wrote before: arc is drawn from center of roundingRectangle // 2nd and 3rd arguments are angles from center to arc start and end points // 4th argument is set to true to move path to rectangle center, so we don't have to move it manually path.arcTo(roundingRectangle, pi, -pi, true); path.close(); return path; } @override bool shouldReclip(covariant CustomClipper oldClipper) { return true; } } class bottomContainer extends CustomClipper { @override Path getClip(Size size) { // I've taken approximate height of curved part of view // Change it if you have exact spec for it final roundingHeight = size.height * 3 / 5; // this is top part of path, rectangle without any rounding final filledRectangle = Rect.fromLTRB(0, 0, size.width, size.height - roundingHeight); // this is rectangle that will be used to draw arc // arc is drawn from center of this rectangle, so it's height has to be twice roundingHeight // also I made it to go 5 units out of screen on left and right, so curve will have some incline there final roundingRectangle = Rect.fromLTRB(-35, size.height - roundingHeight * 2, size.width + 90, size.height - 10); final path = Path(); path.addRect(filledRectangle); // so as I wrote before: arc is drawn from center of roundingRectangle // 2nd and 3rd arguments are angles from center to arc start and end points // 4th argument is set to true to move path to rectangle center, so we don't have to move it manually path.arcTo(roundingRectangle, pi, -pi, true); path.close(); return path; } @override bool shouldReclip(covariant CustomClipper oldClipper) { return true; } }