Browse Source
Merge pull request 'add: answer box widget' (#5) from widget/answer_box into develop
Merge pull request 'add: answer box widget' (#5) from widget/answer_box into develop
Reviewed-on: https://git.nwhco.ir/amirreza.chegini/hade_hoda_flutter/pulls/5pull/6/head
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