add: answer box widget
			#5
			
				
			
		
		
	 Merged
	
	
		
		
			
		
		
		
			
		
		
			
			
				amirreza.chegini
				merged 1 commits from widget/answer_box into develop 1 month ago
			
		
	
	
				 3 changed files with 236 additions and 0 deletions
			
			
		- 
					47lib/core/widgets/answer_box/answer_box.dart
- 
					127lib/core/widgets/answer_box/styles/picture_box.dart
- 
					62lib/core/widgets/answer_box/styles/text_box.dart
| @ -0,0 +1,47 @@ | |||
| import 'package:flutter/material.dart'; | |||
| import 'package:hadi_hoda_flutter/core/widgets/answer_box/styles/picture_box.dart'; | |||
| import 'package:hadi_hoda_flutter/core/widgets/answer_box/styles/text_box.dart'; | |||
| 
 | |||
| class AnswerBox extends StatefulWidget { | |||
|   const AnswerBox({super.key}); | |||
| 
 | |||
|   @override | |||
|   State<AnswerBox> createState() => _AnswerBoxState(); | |||
| } | |||
| 
 | |||
| class _AnswerBoxState extends State<AnswerBox> { | |||
| 
 | |||
|   bool selected = false; | |||
| 
 | |||
|   @override | |||
|   Widget build(BuildContext context) { | |||
|     return GestureDetector( | |||
|       onTap: () { | |||
|         setState(() { | |||
|           selected = !selected; | |||
|         }); | |||
|       }, | |||
|       child: SizedBox( | |||
|         width: 170, | |||
|         child: Stack( | |||
|           alignment: Alignment.bottomCenter, | |||
|           clipBehavior: Clip.none, | |||
|           children: [ | |||
|             AnswerPictureBox( | |||
|               selected: selected, | |||
|             ), | |||
|             Positioned( | |||
|               left: 0, | |||
|               right: 0, | |||
|               bottom: -36, | |||
|               child: SizedBox( | |||
|                 height: 60, | |||
|                 child: AnswerTextBox(), | |||
|               ), | |||
|             ), | |||
|           ], | |||
|         ), | |||
|       ), | |||
|     ); | |||
|   } | |||
| } | |||
| @ -0,0 +1,127 @@ | |||
| import 'package:flutter/material.dart'; | |||
| import 'package:hadi_hoda_flutter/common_ui/resources/my_assets.dart'; | |||
| import 'package:hadi_hoda_flutter/core/utils/my_image.dart'; | |||
| 
 | |||
| class AnswerPictureBox extends StatelessWidget { | |||
|   const AnswerPictureBox({super.key, required this.selected}); | |||
| 
 | |||
|   final bool selected; | |||
| 
 | |||
|   @override | |||
|   Widget build(BuildContext context) { | |||
|     return CustomPaint( | |||
|       size: Size(170, 170), | |||
|       foregroundPainter: _SvgCustomPainter(selected), | |||
|       child: ClipPath( | |||
|         clipper: _SvgCustomClipper(), | |||
|         child: MyImage( | |||
|           image: MyAssets.backgroundIntro, fit: BoxFit.cover, size: 170), | |||
|       ), | |||
|     ); | |||
|   } | |||
| } | |||
| 
 | |||
| class _SvgCustomClipper extends CustomClipper<Path> { | |||
|   @override | |||
|   Path getClip(Size size) { | |||
|     double scaleFactor = 170.0 / 480.0; | |||
| 
 | |||
|     Path path = Path() | |||
|       ..moveTo(242.081 * scaleFactor, 4.12988 * scaleFactor) | |||
|       ..cubicTo(189.733 * scaleFactor, 1.72935 * scaleFactor, 137.532 * scaleFactor, 3.16507 * scaleFactor, 96.9766 * scaleFactor, 8.33887 * scaleFactor) | |||
|       ..cubicTo(76.6855 * scaleFactor, 10.9275 * scaleFactor, 59.4247 * scaleFactor, 14.4382 * scaleFactor, 46.5547 * scaleFactor, 18.8203 * scaleFactor) | |||
|       ..cubicTo(40.1188 * scaleFactor, 21.0117 * scaleFactor, 34.878 * scaleFactor, 23.3892 * scaleFactor, 30.9326 * scaleFactor, 25.916 * scaleFactor) | |||
|       ..cubicTo(26.9611 * scaleFactor, 28.4595 * scaleFactor, 24.5168 * scaleFactor, 31.0171 * scaleFactor, 23.3438 * scaleFactor, 33.4795 * scaleFactor) | |||
|       ..cubicTo(20.5038 * scaleFactor, 39.4409 * scaleFactor, 17.8387 * scaleFactor, 49.1133 * scaleFactor, 15.4463 * scaleFactor, 61.8105 * scaleFactor) | |||
|       ..cubicTo(13.066 * scaleFactor, 74.4434 * scaleFactor, 10.9937 * scaleFactor, 89.8529 * scaleFactor, 9.25879 * scaleFactor, 107.15 * scaleFactor) | |||
|       ..cubicTo(5.78933 * scaleFactor, 141.742 * scaleFactor, 3.68374 * scaleFactor, 183.74 * scaleFactor, 3.14062 * scaleFactor, 225.896 * scaleFactor) | |||
|       ..cubicTo(2.5975 * scaleFactor, 268.052 * scaleFactor, 3.61795 * scaleFactor, 310.308 * scaleFactor, 6.3877 * scaleFactor, 345.416 * scaleFactor) | |||
|       ..cubicTo(7.77271 * scaleFactor, 362.972 * scaleFactor, 9.59224 * scaleFactor, 378.701 * scaleFactor, 11.8633 * scaleFactor, 391.718 * scaleFactor) | |||
|       ..cubicTo(14.1445 * scaleFactor, 404.793 * scaleFactor, 16.8465 * scaleFactor, 414.918 * scaleFactor, 19.9121 * scaleFactor, 421.396 * scaleFactor) | |||
|       ..cubicTo(21.2125 * scaleFactor, 424.143 * scaleFactor, 23.8655 * scaleFactor, 426.967 * scaleFactor, 28.083 * scaleFactor, 429.773 * scaleFactor) | |||
|       ..cubicTo(32.2774 * scaleFactor, 432.565 * scaleFactor, 37.8229 * scaleFactor, 435.209 * scaleFactor, 44.6045 * scaleFactor, 437.676 * scaleFactor) | |||
|       ..cubicTo(58.1675 * scaleFactor, 442.609 * scaleFactor, 76.2991 * scaleFactor, 446.701 * scaleFactor, 97.542 * scaleFactor, 449.934 * scaleFactor) | |||
|       ..cubicTo(140.002 * scaleFactor, 456.395 * scaleFactor, 194.428 * scaleFactor, 459.359 * scaleFactor, 248.533 * scaleFactor, 458.966 * scaleFactor) | |||
|       ..cubicTo(302.639 * scaleFactor, 458.572 * scaleFactor, 356.282 * scaleFactor, 454.822 * scaleFactor, 397.177 * scaleFactor, 447.904 * scaleFactor) | |||
|       ..cubicTo(417.642 * scaleFactor, 444.443 * scaleFactor, 434.779 * scaleFactor, 440.209 * scaleFactor, 447.149 * scaleFactor, 435.27 * scaleFactor) | |||
|       ..cubicTo(453.338 * scaleFactor, 432.798 * scaleFactor, 458.209 * scaleFactor, 430.199 * scaleFactor, 461.686 * scaleFactor, 427.518 * scaleFactor) | |||
|       ..cubicTo(465.181 * scaleFactor, 424.821 * scaleFactor, 467.024 * scaleFactor, 422.232 * scaleFactor, 467.636 * scaleFactor, 419.835 * scaleFactor) | |||
|       ..cubicTo(471.161 * scaleFactor, 405.976 * scaleFactor, 473.704 * scaleFactor, 379.536 * scaleFactor, 475.24 * scaleFactor, 346.71 * scaleFactor) | |||
|       ..cubicTo(476.772 * scaleFactor, 313.978 * scaleFactor, 477.293 * scaleFactor, 275.164 * scaleFactor, 476.847 * scaleFactor, 236.729 * scaleFactor) | |||
|       ..cubicTo(476.401 * scaleFactor, 198.293 * scaleFactor, 474.989 * scaleFactor, 160.274 * scaleFactor, 472.661 * scaleFactor, 129.129 * scaleFactor) | |||
|       ..cubicTo(471.497 * scaleFactor, 113.555 * scaleFactor, 470.106 * scaleFactor, 99.729 * scaleFactor, 468.498 * scaleFactor, 88.4443 * scaleFactor) | |||
|       ..cubicTo(466.881 * scaleFactor, 77.0977 * scaleFactor, 465.07 * scaleFactor, 68.5213 * scaleFactor, 463.128 * scaleFactor, 63.3262 * scaleFactor) | |||
|       ..cubicTo(460.15 * scaleFactor, 55.3421 * scaleFactor, 451.863 * scaleFactor, 47.7494 * scaleFactor, 438.653 * scaleFactor, 40.8027 * scaleFactor) | |||
|       ..cubicTo(425.546 * scaleFactor, 33.9095 * scaleFactor, 408.099 * scaleFactor, 27.9176 * scaleFactor, 387.654 * scaleFactor, 22.8643 * scaleFactor) | |||
|       ..cubicTo(346.784 * scaleFactor, 12.7625 * scaleFactor, 294.436 * scaleFactor, 6.53075 * scaleFactor, 242.081 * scaleFactor, 4.12988 * scaleFactor) | |||
|       ..close(); | |||
| 
 | |||
|     return path; | |||
|   } | |||
| 
 | |||
|   @override | |||
|   bool shouldReclip(CustomClipper<Path> oldClipper) { | |||
|     return false; | |||
|   } | |||
| } | |||
| 
 | |||
| class _SvgCustomPainter extends CustomPainter { | |||
|   _SvgCustomPainter(this.selected); | |||
| 
 | |||
|   final bool selected; | |||
| 
 | |||
|   @override | |||
|   void paint(Canvas canvas, Size size) { | |||
|     double scaleFactor = 170.0 / 480.0; | |||
| 
 | |||
|     Path path = Path() | |||
|       ..moveTo(242.081 * scaleFactor, 4.12988 * scaleFactor) | |||
|       ..cubicTo(189.733 * scaleFactor, 1.72935 * scaleFactor, 137.532 * scaleFactor, 3.16507 * scaleFactor, 96.9766 * scaleFactor, 8.33887 * scaleFactor) | |||
|       ..cubicTo(76.6855 * scaleFactor, 10.9275 * scaleFactor, 59.4247 * scaleFactor, 14.4382 * scaleFactor, 46.5547 * scaleFactor, 18.8203 * scaleFactor) | |||
|       ..cubicTo(40.1188 * scaleFactor, 21.0117 * scaleFactor, 34.878 * scaleFactor, 23.3892 * scaleFactor, 30.9326 * scaleFactor, 25.916 * scaleFactor) | |||
|       ..cubicTo(26.9611 * scaleFactor, 28.4595 * scaleFactor, 24.5168 * scaleFactor, 31.0171 * scaleFactor, 23.3438 * scaleFactor, 33.4795 * scaleFactor) | |||
|       ..cubicTo(20.5038 * scaleFactor, 39.4409 * scaleFactor, 17.8387 * scaleFactor, 49.1133 * scaleFactor, 15.4463 * scaleFactor, 61.8105 * scaleFactor) | |||
|       ..cubicTo(13.066 * scaleFactor, 74.4434 * scaleFactor, 10.9937 * scaleFactor, 89.8529 * scaleFactor, 9.25879 * scaleFactor, 107.15 * scaleFactor) | |||
|       ..cubicTo(5.78933 * scaleFactor, 141.742 * scaleFactor, 3.68374 * scaleFactor, 183.74 * scaleFactor, 3.14062 * scaleFactor, 225.896 * scaleFactor) | |||
|       ..cubicTo(2.5975 * scaleFactor, 268.052 * scaleFactor, 3.61795 * scaleFactor, 310.308 * scaleFactor, 6.3877 * scaleFactor, 345.416 * scaleFactor) | |||
|       ..cubicTo(7.77271 * scaleFactor, 362.972 * scaleFactor, 9.59224 * scaleFactor, 378.701 * scaleFactor, 11.8633 * scaleFactor, 391.718 * scaleFactor) | |||
|       ..cubicTo(14.1445 * scaleFactor, 404.793 * scaleFactor, 16.8465 * scaleFactor, 414.918 * scaleFactor, 19.9121 * scaleFactor, 421.396 * scaleFactor) | |||
|       ..cubicTo(21.2125 * scaleFactor, 424.143 * scaleFactor, 23.8655 * scaleFactor, 426.967 * scaleFactor, 28.083 * scaleFactor, 429.773 * scaleFactor) | |||
|       ..cubicTo(32.2774 * scaleFactor, 432.565 * scaleFactor, 37.8229 * scaleFactor, 435.209 * scaleFactor, 44.6045 * scaleFactor, 437.676 * scaleFactor) | |||
|       ..cubicTo(58.1675 * scaleFactor, 442.609 * scaleFactor, 76.2991 * scaleFactor, 446.701 * scaleFactor, 97.542 * scaleFactor, 449.934 * scaleFactor) | |||
|       ..cubicTo(140.002 * scaleFactor, 456.395 * scaleFactor, 194.428 * scaleFactor, 459.359 * scaleFactor, 248.533 * scaleFactor, 458.966 * scaleFactor) | |||
|       ..cubicTo(302.639 * scaleFactor, 458.572 * scaleFactor, 356.282 * scaleFactor, 454.822 * scaleFactor, 397.177 * scaleFactor, 447.904 * scaleFactor) | |||
|       ..cubicTo(417.642 * scaleFactor, 444.443 * scaleFactor, 434.779 * scaleFactor, 440.209 * scaleFactor, 447.149 * scaleFactor, 435.27 * scaleFactor) | |||
|       ..cubicTo(453.338 * scaleFactor, 432.798 * scaleFactor, 458.209 * scaleFactor, 430.199 * scaleFactor, 461.686 * scaleFactor, 427.518 * scaleFactor) | |||
|       ..cubicTo(465.181 * scaleFactor, 424.821 * scaleFactor, 467.024 * scaleFactor, 422.232 * scaleFactor, 467.636 * scaleFactor, 419.835 * scaleFactor) | |||
|       ..cubicTo(471.161 * scaleFactor, 405.976 * scaleFactor, 473.704 * scaleFactor, 379.536 * scaleFactor, 475.24 * scaleFactor, 346.71 * scaleFactor) | |||
|       ..cubicTo(476.772 * scaleFactor, 313.978 * scaleFactor, 477.293 * scaleFactor, 275.164 * scaleFactor, 476.847 * scaleFactor, 236.729 * scaleFactor) | |||
|       ..cubicTo(476.401 * scaleFactor, 198.293 * scaleFactor, 474.989 * scaleFactor, 160.274 * scaleFactor, 472.661 * scaleFactor, 129.129 * scaleFactor) | |||
|       ..cubicTo(471.497 * scaleFactor, 113.555 * scaleFactor, 470.106 * scaleFactor, 99.729 * scaleFactor, 468.498 * scaleFactor, 88.4443 * scaleFactor) | |||
|       ..cubicTo(466.881 * scaleFactor, 77.0977 * scaleFactor, 465.07 * scaleFactor, 68.5213 * scaleFactor, 463.128 * scaleFactor, 63.3262 * scaleFactor) | |||
|       ..cubicTo(460.15 * scaleFactor, 55.3421 * scaleFactor, 451.863 * scaleFactor, 47.7494 * scaleFactor, 438.653 * scaleFactor, 40.8027 * scaleFactor) | |||
|       ..cubicTo(425.546 * scaleFactor, 33.9095 * scaleFactor, 408.099 * scaleFactor, 27.9176 * scaleFactor, 387.654 * scaleFactor, 22.8643 * scaleFactor) | |||
|       ..cubicTo(346.784 * scaleFactor, 12.7625 * scaleFactor, 294.436 * scaleFactor, 6.53075 * scaleFactor, 242.081 * scaleFactor, 4.12988 * scaleFactor) | |||
|       ..close(); | |||
| 
 | |||
|     Paint shadowPaint = Paint() | |||
|       ..color = selected ? Colors.green.withValues(alpha: 0.5) : Colors | |||
|           .transparent | |||
|       ..style = PaintingStyle.fill | |||
|       ..maskFilter = MaskFilter.blur(BlurStyle.outer, 10); | |||
| 
 | |||
|     canvas.drawPath(path, shadowPaint); | |||
|     canvas.drawPath(path, shadowPaint); | |||
| 
 | |||
|     canvas.clipPath(path); | |||
| 
 | |||
|     Paint strokePaint = Paint() | |||
|       ..color = selected ? Colors.green : Colors.white | |||
|       ..style = PaintingStyle.stroke | |||
|       ..strokeWidth = 5; | |||
|     canvas.drawPath(path, strokePaint); | |||
|   } | |||
| 
 | |||
|   @override | |||
|   bool shouldRepaint(CustomPainter oldDelegate) => true; | |||
| } | |||
| @ -0,0 +1,62 @@ | |||
| import 'package:flutter/material.dart'; | |||
| import 'package:google_fonts/google_fonts.dart'; | |||
| 
 | |||
| class AnswerTextBox extends StatelessWidget { | |||
|   const AnswerTextBox({super.key}); | |||
| 
 | |||
|   @override | |||
|   Widget build(BuildContext context) { | |||
|     return AspectRatio( | |||
|       aspectRatio: 480 / 149.0, | |||
|       child: Stack( | |||
|         alignment: Alignment.center, | |||
|         children: [ | |||
|           Positioned.fill( | |||
|             child: CustomPaint( | |||
|               painter: _WavyBannerPainter(), | |||
|             ), | |||
|           ), | |||
|           Text( | |||
|             'We walk in the yard with a glass of juice', | |||
|             textAlign: TextAlign.center, | |||
|             style: GoogleFonts.marhey( | |||
|               fontSize: 12, | |||
|               fontWeight: FontWeight.w600, | |||
|               color: Color(0XFF322386) | |||
|             ), | |||
|           ) | |||
|         ], | |||
|       ), | |||
|     ); | |||
|   } | |||
| } | |||
| 
 | |||
| class _WavyBannerPainter extends CustomPainter { | |||
|   @override | |||
|   void paint(Canvas canvas, Size size) { | |||
|     final sx = size.width / 480.0; | |||
|     final sy = size.height / 149.0; | |||
| 
 | |||
|     final path = Path() | |||
|       ..moveTo(14.0623 * sx, 20.0845 * sy) | |||
|       ..cubicTo(-2.44627 * sx, 34.3262 * sy, -4.98303 * sx, 117.33 * sy, 9.45711 * sx, 135.641 * sy) | |||
|       ..cubicTo(22.9216 * sx, 152.647 * sy, 436.846 * sx, 154.003 * sy, 462.799 * sx, 136.319 * sy) | |||
|       ..cubicTo(488.753 * sx, 118.634 * sy, 483.484 * sx, 26.7097 * sy, 459.365 * sx, 10.3813 * sy) | |||
|       ..cubicTo(435.246 * sx, -5.94701 * sy, 41.0302 * sx, -3.23423 * sy, 14.0623 * sx, 20.0845 * sy) | |||
|       ..close(); | |||
| 
 | |||
|     final paint = Paint() | |||
|       ..style = PaintingStyle.fill | |||
|       ..isAntiAlias = true | |||
|       ..shader = const LinearGradient( | |||
|         begin: Alignment.bottomCenter, | |||
|         end: Alignment.topCenter, | |||
|         colors: [Color(0xFFCADCFF), Colors.white], | |||
|       ).createShader(Offset.zero & size); | |||
| 
 | |||
|     canvas.drawPath(path, paint); | |||
|   } | |||
| 
 | |||
|   @override | |||
|   bool shouldRepaint(covariant _WavyBannerPainter oldDelegate) => false; | |||
| } | |||
						Write
						Preview
					
					
					Loading…
					
					Cancel
						Save
					
		Reference in new issue