11 changed files with 395 additions and 175 deletions
-
BINassets/images/diamond.png
-
4assets/images/done.svg
-
2lib/common_ui/resources/my_assets.dart
-
300lib/features/question/presentation/ui/question_page.dart
-
41lib/features/question/presentation/ui/widgets/glassy_button.dart
-
27lib/features/question/presentation/ui/widgets/left_blob.dart
-
102lib/features/question/presentation/ui/widgets/question_stepper.dart
-
32lib/features/question/presentation/ui/widgets/refresh_button.dart
-
27lib/features/question/presentation/ui/widgets/right_blob.dart
-
34pubspec.lock
-
1pubspec.yaml
|
After Width: 46 | Height: 38 | Size: 2.6 KiB |
@ -0,0 +1,4 @@ |
|||
<svg width="13" height="11" viewBox="0 0 13 11" fill="none" xmlns="http://www.w3.org/2000/svg"> |
|||
<path d="M11.558 0.348633L12.7359 1.73042C12.7359 1.73042 10.3562 7.14247 5.62103 10.07L4.30176 8.70894C6.51804 5.29707 8.49556 3.42465 11.558 0.348633Z" fill="white"/> |
|||
<path d="M0.594727 5.23829L2.01443 3.89746C2.01443 3.89746 4.17176 5.14167 6.90451 9.1387L5.59316 10.1301C2.25105 7.7622 2.64541 7.99882 0.594727 5.23829Z" fill="white"/> |
|||
</svg> |
|||
@ -0,0 +1,41 @@ |
|||
import 'package:flutter/material.dart'; |
|||
import 'package:hadi_hoda_flutter/common_ui/resources/my_spaces.dart'; |
|||
import 'package:hadi_hoda_flutter/core/utils/my_image.dart'; |
|||
|
|||
class GlassyButton extends StatelessWidget { |
|||
const GlassyButton({super.key, required this.image, this.onTap}); |
|||
|
|||
final String image; |
|||
final VoidCallback? onTap; |
|||
|
|||
@override |
|||
Widget build(BuildContext context) { |
|||
return Material( |
|||
color: Colors.transparent, |
|||
child: Ink( |
|||
width: 48, |
|||
height: 48, |
|||
decoration: BoxDecoration( |
|||
shape: BoxShape.circle, |
|||
gradient: LinearGradient( |
|||
begin: Alignment.topCenter, |
|||
end: Alignment.bottomCenter, |
|||
colors: [ |
|||
Colors.white.withValues(alpha: 0.3), |
|||
Color(0XFF6930DA).withValues(alpha: 0.1), |
|||
], |
|||
), |
|||
border: Border.all(color: Colors.white.withValues(alpha: 0.3)), |
|||
), |
|||
child: InkWell( |
|||
onTap: onTap, |
|||
borderRadius: BorderRadius.all(Radius.circular(100)), |
|||
child: Padding( |
|||
padding: const EdgeInsets.all(MySpaces.s12), |
|||
child: MyImage(image: image), |
|||
), |
|||
), |
|||
), |
|||
); |
|||
} |
|||
} |
|||
@ -0,0 +1,27 @@ |
|||
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/core/utils/my_image.dart'; |
|||
|
|||
class LeftBlob extends StatelessWidget { |
|||
const LeftBlob({super.key}); |
|||
|
|||
@override |
|||
Widget build(BuildContext context) { |
|||
return Stack( |
|||
alignment: Alignment.center, |
|||
children: [ |
|||
MyImage(image: MyAssets.bubbleChatLeft), |
|||
Text( |
|||
'Your answer\nwas not correct.', |
|||
textAlign: TextAlign.center, |
|||
style: GoogleFonts.marhey( |
|||
fontSize: 12, |
|||
fontWeight: FontWeight.w500, |
|||
color: Color(0XFFB5AEEE), |
|||
), |
|||
), |
|||
], |
|||
); |
|||
} |
|||
} |
|||
@ -0,0 +1,102 @@ |
|||
import 'package:easy_stepper/easy_stepper.dart'; |
|||
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 QuestionStepper extends StatelessWidget { |
|||
const QuestionStepper({super.key}); |
|||
|
|||
@override |
|||
Widget build(BuildContext context) { |
|||
return SizedBox( |
|||
height: 80, |
|||
child: EasyStepper( |
|||
activeStep: 1, |
|||
lineStyle: LineStyle( |
|||
lineLength: 20, |
|||
lineType: LineType.normal, |
|||
defaultLineColor: Color(0XFFDFDDF6), |
|||
lineThickness: 5, |
|||
finishedLineColor: Color(0XFF21B738), |
|||
), |
|||
activeStepBackgroundColor: Colors.transparent, |
|||
finishedStepBackgroundColor: Colors.transparent, |
|||
unreachedStepBackgroundColor: Colors.transparent, |
|||
internalPadding: 0, |
|||
showLoadingAnimation: false, |
|||
stepRadius: 18, |
|||
showStepBorder: false, |
|||
padding: EdgeInsets.all(0), |
|||
enableStepTapping: false, |
|||
steps: List.generate( |
|||
6, |
|||
(index) => EasyStep( |
|||
customStep: index == 5 |
|||
? MyImage(image: MyAssets.diamond, size: 50) |
|||
: ClipPath( |
|||
clipper: _StepperClipper(), |
|||
child: Container( |
|||
height: 32, |
|||
width: 32, |
|||
padding: EdgeInsets.all(4), |
|||
decoration: BoxDecoration( |
|||
color: Color(0XFFDFDDF6), |
|||
shape: BoxShape.circle, |
|||
), |
|||
child: ClipPath( |
|||
clipper: _StepperClipper(), |
|||
child: Container( |
|||
padding: EdgeInsets.all(6), |
|||
decoration: BoxDecoration( |
|||
shape: BoxShape.circle, |
|||
color: index < 1 |
|||
? Color(0XFF21B738) |
|||
: index == 1 |
|||
? Color(0XFF847AC4) |
|||
: Colors.transparent, |
|||
), |
|||
child: index < 1 ? MyImage(image: MyAssets.done) : null, |
|||
), |
|||
), |
|||
), |
|||
), |
|||
), |
|||
), |
|||
), |
|||
); |
|||
} |
|||
} |
|||
|
|||
class _StepperClipper 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; |
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
import 'package:flutter/material.dart'; |
|||
import 'package:hadi_hoda_flutter/common_ui/theme/my_theme.dart'; |
|||
|
|||
class RefreshButton extends StatelessWidget { |
|||
const RefreshButton({super.key, this.onTap,}); |
|||
|
|||
final VoidCallback? onTap; |
|||
|
|||
@override |
|||
Widget build(BuildContext context) { |
|||
return Material( |
|||
color: context.noColor, |
|||
child: Ink( |
|||
height: 48, |
|||
width: 48, |
|||
decoration: BoxDecoration( |
|||
shape: BoxShape.circle, |
|||
gradient: LinearGradient( |
|||
begin: Alignment.topCenter, |
|||
end: Alignment.bottomCenter, |
|||
colors: [Color(0XFFA393FF), Color(0XFFC6BCFB)], |
|||
), |
|||
), |
|||
child: InkWell( |
|||
onTap: onTap, |
|||
borderRadius: BorderRadius.all(Radius.circular(100)), |
|||
child: Icon(Icons.refresh, size: 40, color: Color(0XFF263AA1)), |
|||
), |
|||
), |
|||
); |
|||
} |
|||
} |
|||
@ -0,0 +1,27 @@ |
|||
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/core/utils/my_image.dart'; |
|||
|
|||
class RightBlob extends StatelessWidget { |
|||
const RightBlob({super.key}); |
|||
|
|||
@override |
|||
Widget build(BuildContext context) { |
|||
return Stack( |
|||
alignment: Alignment.center, |
|||
children: [ |
|||
MyImage(image: MyAssets.bubbleChatRight), |
|||
Text( |
|||
'Be more\ncareful.', |
|||
textAlign: TextAlign.center, |
|||
style: GoogleFonts.marhey( |
|||
fontSize: 12, |
|||
fontWeight: FontWeight.w500, |
|||
color: Color(0XFFB5AEEE), |
|||
), |
|||
), |
|||
], |
|||
); |
|||
} |
|||
} |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue