amirreza.chegini
/
hade_hoda_flutter
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: answer box

pull/7/head
AmirrezaChegini 1 week ago
parent
827e8358e7
commit
48289bf6eb
7 changed files with 152 additions and 46 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 17
      assets/images/correct.svg
  2. 17
      assets/images/wrong.svg
  3. 2
      lib/common_ui/resources/my_assets.dart
  4. 3
      lib/core/widgets/answer_box/answer_box.dart
  5. 84
      lib/core/widgets/answer_box/styles/picture_box.dart
  6. 48
      lib/core/widgets/answer_box/styles/text_box.dart
  7. 9
      lib/features/question/presentation/ui/question_page.dart

17
assets/images/correct.svg
View File

@ -0,0 +1,17 @@
<svg width="56" height="51" viewBox="0 0 56 51" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M51.9315 40.1706C50.273 47.4826 8.41234 52.8752 4.94604 45.3438C1.79486 38.5071 4.18298 10.6119 6.86977 5.71281C10.5517 -0.941101 46.6743 3.73857 49.7259 8.96665C52.4625 13.8474 53.6729 32.6758 51.9315 40.1706Z" fill="url(#paint0_radial_498_2733)"/>
<path d="M51.8976 38.6412C50.2314 45.5766 8.42476 49.5346 4.95895 42.2723C1.80973 35.7181 4.1427 10.6451 6.84203 5.96088C10.5245 -0.411776 46.8321 4.14531 49.7314 9.08366C52.564 13.7678 53.6472 31.4697 51.8976 38.6412Z" fill="#83FF9A"/>
<path d="M51.1313 38.0099C49.4846 44.7332 9.07525 48.6218 5.71605 41.6441C2.66971 35.2661 4.95877 10.7532 7.5605 6.28314C11.1173 0.104962 46.1418 4.46602 49.0235 9.31771C51.7076 13.8423 52.8109 31.1049 51.1313 38.0099Z" fill="url(#paint1_linear_498_2733)"/>
<path d="M42.7617 10.3223L45.8039 13.8678C45.8039 13.8678 39.6579 27.7548 27.4283 35.2666L24.021 31.7743C29.745 23.0196 34.8523 18.2151 42.7617 10.3223Z" fill="white"/>
<path d="M14.4469 22.8692L18.1136 19.4287C18.1136 19.4287 23.6853 22.6213 30.7432 32.8774L27.3564 35.4214C18.7247 29.3454 19.7432 29.9525 14.4469 22.8692Z" fill="white"/>
<defs>
<radialGradient id="paint0_radial_498_2733" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(43.704 56.9891) rotate(180) scale(23.8475 33.2277)">
<stop stop-color="#83FF87"/>
<stop offset="1" stop-color="#33E04D"/>
</radialGradient>
<linearGradient id="paint1_linear_498_2733" x1="28.0944" y1="45.3329" x2="28.0944" y2="3.21222" gradientUnits="userSpaceOnUse">
<stop stop-color="#21B738"/>
<stop offset="1" stop-color="#31C747"/>
</linearGradient>
</defs>
</svg>

17
assets/images/wrong.svg
View File

@ -0,0 +1,17 @@
<svg width="56" height="51" viewBox="0 0 56 51" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M51.931 40.1706C50.2725 47.4826 8.41185 52.8752 4.94555 45.3438C1.79438 38.5071 4.18249 10.6118 6.86929 5.71281C10.5512 -0.9411 46.6738 3.73857 49.7254 8.96665C52.462 13.8474 53.6724 32.6758 51.931 40.1706Z" fill="url(#paint0_radial_498_2741)"/>
<path d="M51.8971 38.6402C50.2309 45.5757 8.42427 49.5336 4.95847 42.2713C1.80925 35.7171 4.14221 10.6441 6.84155 5.9599C10.524 -0.412752 46.8316 4.14433 49.7309 9.08268C52.5635 13.7669 53.6467 31.4687 51.8971 38.6402Z" fill="#FF8385"/>
<path d="M51.1308 38.0099C49.4841 44.7332 9.07476 48.6218 5.71555 41.6441C2.66922 35.2661 4.95828 10.7532 7.56002 6.28314C11.1168 0.104962 46.1414 4.46602 49.023 9.31771C51.7071 13.8423 52.8104 31.1049 51.1308 38.0099Z" fill="url(#paint1_linear_498_2741)"/>
<path d="M36.615 10.8369L39.6572 14.3825C39.6572 14.3825 30.2869 29.6865 18.0573 37.1983L15.5018 33.853C21.2258 25.0984 28.3573 17.3243 36.615 10.8369Z" fill="white"/>
<path d="M15.6688 15.9368L19.2587 12.9521C19.2587 12.9521 35.3009 24.0095 42.3588 34.2656L38.972 36.8096C30.1099 31.1458 22.2395 24.0962 15.6688 15.9368Z" fill="white"/>
<defs>
<radialGradient id="paint0_radial_498_2741" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(43.7035 56.9891) rotate(180) scale(23.8475 33.2277)">
<stop stop-color="#FF8385"/>
<stop offset="1" stop-color="#E03336"/>
</radialGradient>
<linearGradient id="paint1_linear_498_2741" x1="28.0939" y1="45.3328" x2="28.0939" y2="3.21222" gradientUnits="userSpaceOnUse">
<stop stop-color="#C72427"/>
<stop offset="1" stop-color="#E03336"/>
</linearGradient>
</defs>
</svg>

2
lib/common_ui/resources/my_assets.dart
View File

@ -25,4 +25,6 @@ class MyAssets {
static const String bubbleChatRight = 'assets/images/bubble_chat_right.svg';
static const String diamond = 'assets/images/diamond.png';
static const String done = 'assets/images/done.svg';
static const String correct = 'assets/images/correct.svg';
static const String wrong = 'assets/images/wrong.svg';
}

3
lib/core/widgets/answer_box/answer_box.dart
View File

@ -33,11 +33,8 @@ class _AnswerBoxState extends State<AnswerBox> {
left: 0,
right: 0,
bottom: -36,
child: SizedBox(
height: 60,
child: AnswerTextBox(),
),
),
],
),
),

84
lib/core/widgets/answer_box/styles/picture_box.dart
View File

@ -1,5 +1,8 @@
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:hadi_hoda_flutter/common_ui/resources/my_assets.dart';
import 'package:hadi_hoda_flutter/common_ui/resources/my_spaces.dart';
import 'package:hadi_hoda_flutter/common_ui/theme/my_theme.dart';
import 'package:hadi_hoda_flutter/core/utils/my_image.dart';
class AnswerPictureBox extends StatelessWidget {
@ -14,8 +17,53 @@ class AnswerPictureBox extends StatelessWidget {
foregroundPainter: _SvgCustomPainter(selected),
child: ClipPath(
clipper: _SvgCustomClipper(),
child: Stack(
children: [
MyImage(
image: MyAssets.backgroundIntro,
fit: BoxFit.cover,
size: 170,
),
PositionedDirectional(
top: MySpaces.s12,
start: MySpaces.s12,
child: ClipPath(
clipper: _CountClipper(),
child: Container(
height: MySpaces.s32,
width: MySpaces.s32,
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0XFF5732CB),
Color(0XFF322386),
],
),
),
child: Text(
'1',
style: GoogleFonts.marhey(
fontSize: 17,
fontWeight: FontWeight.w600,
color: context.primaryColor,
),
),
),
),
),
PositionedDirectional(
top: MySpaces.s14,
end: MySpaces.s12,
child: MyImage(
image: MyAssets.backgroundIntro, fit: BoxFit.cover, size: 170),
image: MyAssets.correct,
size: MySpaces.s40,
),
),
],
),
),
);
}
@ -125,3 +173,37 @@ class _SvgCustomPainter extends CustomPainter {
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
class _CountClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
// Original SVG viewBox: width=34, height=33
final sx = size.width / 34.0;
final sy = size.height / 33.0;
final p = Path()
..moveTo(33.3479 * sx, 14.8127 * sy)
..cubicTo(
33.3479 * sx, 23.7042 * sy,
27.2015 * sx, 32.9501 * sy,
17.8599 * sx, 32.9501 * sy,
)..cubicTo(
8.51818 * sx, 32.9501 * sy,
0.945251 * sx, 25.7421 * sy,
0.945251 * sx, 16.8507 * sy,
)..cubicTo(
0.945251 * sx, 7.95917 * sy,
8.51818 * sx, 0.751205 * sy,
17.8599 * sx, 0.751205 * sy,
)..cubicTo(
27.2015 * sx, 0.751205 * sy,
33.3479 * sx, 5.92127 * sy,
33.3479 * sx, 14.8127 * sy,
)..close();
return p;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

48
lib/core/widgets/answer_box/styles/text_box.dart
View File

@ -1,39 +1,43 @@
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:hadi_hoda_flutter/common_ui/resources/my_spaces.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(),
return ClipPath(
clipper: _WavyBannerClipper(),
child: Container(
padding: EdgeInsets.all(MySpaces.s10),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0XFFFFFFFF),
Color(0XFFCADCFF),
],
),
),
Text(
child: Text(
'We walk in the yard with a glass of juice ',
textAlign: TextAlign.center,
style: GoogleFonts.marhey(
fontSize: 12,
fontWeight: FontWeight.w600,
fontSize: 14,
fontWeight: FontWeight.w700,
color: Color(0XFF322386)
),
)
],
),
),
);
}
}
class _WavyBannerPainter extends CustomPainter {
class _WavyBannerClipper extends CustomClipper<Path> {
@override
void paint(Canvas canvas, Size size) {
Path getClip(Size size) {
final sx = size.width / 480.0;
final sy = size.height / 149.0;
@ -44,19 +48,9 @@ class _WavyBannerPainter extends CustomPainter {
..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);
return path;
}
@override
bool shouldRepaint(covariant _WavyBannerPainter oldDelegate) => false;
bool shouldReclip(covariant CustomClipper<Path> oldClipper) => false;
}

9
lib/features/question/presentation/ui/question_page.dart
View File

@ -137,8 +137,7 @@ class QuestionPage extends StatelessWidget {
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
Positioned.directional(
textDirection: Directionality.of(context),
PositionedDirectional(
start: 0,
top: -10,
child: LeftBlob(),
@ -147,14 +146,12 @@ class QuestionPage extends StatelessWidget {
padding: const EdgeInsetsDirectional.only(end: 60),
child: MyImage(image: MyAssets.persons),
),
Positioned.directional(
textDirection: Directionality.of(context),
PositionedDirectional(
start: 210,
top: -20,
child: RightBlob(),
),
Positioned.directional(
textDirection: Directionality.of(context),
PositionedDirectional(
end: 0,
bottom: 10,
child: RefreshButton(

Write Preview
Loading…
Cancel
Save