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