Added UI Components for Marathon Module.. WIP
FaizHashmiCS22
2 years ago
parent
5c848fec87
commit
38c7d78db3
@ -1,3 +1,3 @@
|
||||
org.gradle.jvmargs=-Xmx1536M
|
||||
org.gradle.jvmargs=-Xmx1836M
|
||||
android.useAndroidX=true
|
||||
android.enableJetifier=true
|
||||
|
||||
|
Before Width: | Height: | Size: 44 KiB After Width: | Height: | Size: 37 KiB |
@ -0,0 +1,63 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
|
||||
class DummyQuestionModel {
|
||||
String? opt1;
|
||||
String? opt2;
|
||||
String? opt3;
|
||||
|
||||
DummyQuestionModel({
|
||||
this.opt1,
|
||||
this.opt2,
|
||||
this.opt3,
|
||||
});
|
||||
}
|
||||
|
||||
final List<dynamic> answersDummyMap = [
|
||||
{"answer": "Jeddah"},
|
||||
{"answer": "Mecca"},
|
||||
{"answer": "Riyaadh"},
|
||||
{"answer": "Dammaam"},
|
||||
];
|
||||
|
||||
List<DummyQuestionModel> questions = <DummyQuestionModel>[
|
||||
DummyQuestionModel(
|
||||
opt1: 'Riyadh 8',
|
||||
opt2: 'Dammam',
|
||||
opt3: 'Mecca',
|
||||
),
|
||||
DummyQuestionModel(
|
||||
opt1: 'Riyadh 7',
|
||||
opt2: 'Dammam',
|
||||
opt3: 'Mecca',
|
||||
),
|
||||
DummyQuestionModel(
|
||||
opt1: 'Riyadh 6',
|
||||
opt2: 'Dammam',
|
||||
opt3: 'Mecca',
|
||||
),
|
||||
DummyQuestionModel(
|
||||
opt1: 'Riyadh 5',
|
||||
opt2: 'Dammam',
|
||||
opt3: 'Mecca',
|
||||
),
|
||||
DummyQuestionModel(
|
||||
opt1: 'Riyadh 4',
|
||||
opt2: 'Dammam',
|
||||
opt3: 'Mecca',
|
||||
),
|
||||
DummyQuestionModel(
|
||||
opt1: 'Riyadh 3',
|
||||
opt2: 'Dammam',
|
||||
opt3: 'Mecca',
|
||||
),
|
||||
DummyQuestionModel(
|
||||
opt1: 'Riyadh 2',
|
||||
opt2: 'Dammam',
|
||||
opt3: 'Mecca',
|
||||
),
|
||||
DummyQuestionModel(
|
||||
opt1: 'Riyadh 1',
|
||||
opt2: 'Dammam',
|
||||
opt3: 'Mecca',
|
||||
),
|
||||
];
|
||||
@ -0,0 +1,240 @@
|
||||
import 'dart:async';
|
||||
|
||||
import 'package:easy_localization/easy_localization.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_countdown_timer/current_remaining_time.dart';
|
||||
import 'package:flutter_countdown_timer/flutter_countdown_timer.dart';
|
||||
import 'package:mohem_flutter_app/classes/colors.dart';
|
||||
import 'package:mohem_flutter_app/generated/locale_keys.g.dart';
|
||||
import 'package:mohem_flutter_app/ui/marathon/marathon_provider.dart';
|
||||
|
||||
class BuildCountdownTimer extends StatelessWidget {
|
||||
final int timeToMarathon;
|
||||
final MarathonProvider provider;
|
||||
final int screenFlag;
|
||||
|
||||
const BuildCountdownTimer({
|
||||
Key? key,
|
||||
required this.provider,
|
||||
required this.timeToMarathon,
|
||||
required this.screenFlag,
|
||||
}) : super(key: key);
|
||||
|
||||
final TextStyle styleTextHome = const TextStyle(
|
||||
fontSize: 9,
|
||||
color: MyColors.greyACColor,
|
||||
fontStyle: FontStyle.italic,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: -0.4,
|
||||
);
|
||||
|
||||
final TextStyle styleDigitHome = const TextStyle(
|
||||
height: 23 / 24,
|
||||
color: MyColors.white,
|
||||
fontSize: 24,
|
||||
fontStyle: FontStyle.italic,
|
||||
letterSpacing: -1.44,
|
||||
fontWeight: FontWeight.bold,
|
||||
);
|
||||
|
||||
final TextStyle styleTextMarathon = const TextStyle(
|
||||
fontSize: 10,
|
||||
fontStyle: FontStyle.normal,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: MyColors.grey57Color,
|
||||
letterSpacing: -0.4,
|
||||
);
|
||||
|
||||
final TextStyle styleDigitMarathon = const TextStyle(
|
||||
height: 23 / 24,
|
||||
color: MyColors.darkTextColor,
|
||||
fontSize: 32,
|
||||
letterSpacing: -1.44,
|
||||
fontWeight: FontWeight.bold,
|
||||
);
|
||||
|
||||
Widget buildEmptyWidget() {
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Column(
|
||||
children: <Widget>[
|
||||
Text(
|
||||
"00",
|
||||
style: screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
|
||||
),
|
||||
Text(
|
||||
LocaleKeys.days.tr(),
|
||||
style: screenFlag == 0 ? styleTextHome : styleTextMarathon,
|
||||
),
|
||||
],
|
||||
),
|
||||
buildSeparator(),
|
||||
Column(
|
||||
children: <Widget>[
|
||||
Text(
|
||||
"00",
|
||||
style: screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
|
||||
),
|
||||
Text(
|
||||
LocaleKeys.hours.tr(),
|
||||
style: screenFlag == 0 ? styleTextHome : styleTextMarathon,
|
||||
),
|
||||
],
|
||||
),
|
||||
buildSeparator(),
|
||||
Column(
|
||||
children: <Widget>[
|
||||
Text(
|
||||
"00",
|
||||
style: screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
|
||||
),
|
||||
Text(
|
||||
LocaleKeys.minutes.tr(),
|
||||
style: screenFlag == 0 ? styleTextHome : styleTextMarathon,
|
||||
),
|
||||
],
|
||||
),
|
||||
buildSeparator(),
|
||||
Column(
|
||||
children: <Widget>[
|
||||
Text(
|
||||
"00",
|
||||
style: screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
|
||||
),
|
||||
Text(
|
||||
LocaleKeys.seconds.tr(),
|
||||
style: screenFlag == 0 ? styleTextHome : styleTextMarathon,
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildSeparator() {
|
||||
return Text(
|
||||
" : ",
|
||||
style: screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
|
||||
);
|
||||
}
|
||||
|
||||
Widget buildCountdownTimer(CurrentRemainingTime? time) {
|
||||
if (time == null) {
|
||||
if (!provider.itsMarathonTime) {
|
||||
scheduleMicrotask(() {
|
||||
provider.itsMarathonTime = true;
|
||||
});
|
||||
}
|
||||
|
||||
return buildEmptyWidget();
|
||||
}
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Column(
|
||||
children: <Widget>[
|
||||
time.days == null
|
||||
? Text(
|
||||
"00",
|
||||
style:
|
||||
screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
|
||||
)
|
||||
: Text(
|
||||
time.days! < 10
|
||||
? "0${time.days.toString()}"
|
||||
: time.days.toString(),
|
||||
style:
|
||||
screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
|
||||
),
|
||||
Text(
|
||||
LocaleKeys.days.tr(),
|
||||
style: screenFlag == 0 ? styleTextHome : styleTextMarathon,
|
||||
),
|
||||
],
|
||||
),
|
||||
buildSeparator(),
|
||||
Column(
|
||||
children: <Widget>[
|
||||
time.hours == null
|
||||
? Text(
|
||||
"00",
|
||||
style:
|
||||
screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
|
||||
)
|
||||
: Text(
|
||||
time.hours! < 10
|
||||
? "0${time.hours.toString()}"
|
||||
: time.hours.toString(),
|
||||
style:
|
||||
screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
|
||||
),
|
||||
Text(
|
||||
LocaleKeys.hours.tr(),
|
||||
style: screenFlag == 0 ? styleTextHome : styleTextMarathon,
|
||||
),
|
||||
],
|
||||
),
|
||||
buildSeparator(),
|
||||
Column(
|
||||
children: <Widget>[
|
||||
time.min == null
|
||||
? Text(
|
||||
"00",
|
||||
style:
|
||||
screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
|
||||
)
|
||||
: Text(
|
||||
time.min! < 10
|
||||
? "0${time.min.toString()}"
|
||||
: time.min.toString(),
|
||||
style:
|
||||
screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
|
||||
),
|
||||
Text(
|
||||
LocaleKeys.minutes.tr(),
|
||||
style: screenFlag == 0 ? styleTextHome : styleTextMarathon,
|
||||
),
|
||||
],
|
||||
),
|
||||
buildSeparator(),
|
||||
Column(
|
||||
children: <Widget>[
|
||||
time.sec == null
|
||||
? Text(
|
||||
"00",
|
||||
style:
|
||||
screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
|
||||
)
|
||||
: Text(
|
||||
time.sec! < 10
|
||||
? "0${time.sec.toString()}"
|
||||
: time.sec.toString(),
|
||||
style:
|
||||
screenFlag == 0 ? styleDigitHome : styleDigitMarathon,
|
||||
),
|
||||
Text(
|
||||
LocaleKeys.seconds.tr(),
|
||||
style: screenFlag == 0 ? styleTextHome : styleTextMarathon,
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return CountdownTimer(
|
||||
endTime: timeToMarathon,
|
||||
onEnd: null,
|
||||
widgetBuilder: (BuildContext context, CurrentRemainingTime? time) {
|
||||
return buildCountdownTimer(time);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,315 @@
|
||||
import 'package:appinio_swiper/appinio_swiper.dart';
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:mohem_flutter_app/classes/colors.dart';
|
||||
import 'package:mohem_flutter_app/classes/decorations_helper.dart';
|
||||
import 'package:mohem_flutter_app/models/marathon_question_model.dart';
|
||||
import 'package:mohem_flutter_app/ui/marathon/marathon_provider.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
class QuestionCard extends StatefulWidget {
|
||||
final MarathonProvider provider;
|
||||
|
||||
const QuestionCard({Key? key, required this.provider}) : super(key: key);
|
||||
|
||||
@override
|
||||
State<QuestionCard> createState() => _QuestionCardState();
|
||||
}
|
||||
|
||||
class _QuestionCardState extends State<QuestionCard> {
|
||||
final List<QuestionContent> questionCards = <QuestionContent>[];
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
_loadCards();
|
||||
super.initState();
|
||||
}
|
||||
|
||||
void _loadCards() {
|
||||
for (DummyQuestionModel question in questions) {
|
||||
questionCards.add(
|
||||
QuestionContent(question: question),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return CupertinoPageScaffold(
|
||||
child: SizedBox(
|
||||
height: MediaQuery.of(context).size.height * 0.6,
|
||||
width: double.infinity,
|
||||
child: Consumer<MarathonProvider>(
|
||||
builder: (BuildContext context, MarathonProvider provider, _) {
|
||||
return AppinioSwiper(
|
||||
isDisabled: true,
|
||||
controller: provider.swiperController,
|
||||
unswipe: (int index, AppinioSwiperDirection direction) {},
|
||||
cards: questionCards,
|
||||
onSwipe: (int index, AppinioSwiperDirection direction) {
|
||||
if (direction == AppinioSwiperDirection.left){
|
||||
provider.startTimer();
|
||||
}
|
||||
},
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class QuestionContent extends StatelessWidget {
|
||||
final DummyQuestionModel question;
|
||||
|
||||
const QuestionContent({
|
||||
Key? key,
|
||||
required this.question,
|
||||
}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
color: CupertinoColors.white,
|
||||
boxShadow: <BoxShadow>[
|
||||
BoxShadow(
|
||||
color: CupertinoColors.systemGrey.withOpacity(0.2),
|
||||
spreadRadius: 3,
|
||||
blurRadius: 7,
|
||||
offset: const Offset(0, 3),
|
||||
)
|
||||
],
|
||||
),
|
||||
alignment: Alignment.center,
|
||||
child: Column(
|
||||
children: <Widget>[
|
||||
Container(
|
||||
height: 90,
|
||||
width: double.infinity,
|
||||
decoration: const BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
transform: GradientRotation(.83),
|
||||
begin: Alignment.topRight,
|
||||
end: Alignment.bottomLeft,
|
||||
colors: <Color>[
|
||||
MyColors.gradiantEndColor,
|
||||
MyColors.gradiantStartColor,
|
||||
],
|
||||
),
|
||||
borderRadius: BorderRadius.only(
|
||||
topLeft: Radius.circular(10),
|
||||
topRight: Radius.circular(10),
|
||||
),
|
||||
),
|
||||
child: const Center(
|
||||
child: Text(
|
||||
"What is the capital of Saudi Arabia?",
|
||||
style: TextStyle(
|
||||
color: Colors.white,
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
AnswerContent(question: question),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class AnswerContent extends StatelessWidget {
|
||||
final DummyQuestionModel question;
|
||||
|
||||
const AnswerContent({Key? key, required this.question}) : super(key: key);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(15),
|
||||
decoration: const BoxDecoration(
|
||||
color: MyColors.kWhiteColor,
|
||||
borderRadius: BorderRadius.only(
|
||||
bottomLeft: Radius.circular(10),
|
||||
bottomRight: Radius.circular(10),
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: <Widget>[
|
||||
InkWell(
|
||||
onTap: () {},
|
||||
child: Container(
|
||||
height: 60,
|
||||
width: MediaQuery.of(context).size.width - 75,
|
||||
alignment: Alignment.centerLeft,
|
||||
decoration: MyDecorations.answerContainerDecoration,
|
||||
child: Center(
|
||||
child: Text(
|
||||
question.opt1!,
|
||||
style: const TextStyle(
|
||||
color: MyColors.darkTextColor,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 18,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 15),
|
||||
InkWell(
|
||||
onTap: () {},
|
||||
child: Container(
|
||||
height: 60,
|
||||
width: MediaQuery.of(context).size.width - 75,
|
||||
alignment: Alignment.centerLeft,
|
||||
decoration: MyDecorations.answerContainerDecoration,
|
||||
child: Center(
|
||||
child: Text(
|
||||
question.opt2!,
|
||||
style: const TextStyle(
|
||||
color: MyColors.darkTextColor,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 18,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 15),
|
||||
InkWell(
|
||||
onTap: () {},
|
||||
child: Container(
|
||||
height: 60,
|
||||
width: MediaQuery.of(context).size.width - 75,
|
||||
alignment: Alignment.centerLeft,
|
||||
decoration: MyDecorations.answerContainerDecoration,
|
||||
child: Center(
|
||||
child: Text(
|
||||
question.opt3!,
|
||||
style: const TextStyle(
|
||||
color: MyColors.darkTextColor,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 18,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 15),
|
||||
InkWell(
|
||||
onTap: () {},
|
||||
child: Container(
|
||||
height: 60,
|
||||
width: MediaQuery.of(context).size.width - 75,
|
||||
alignment: Alignment.centerLeft,
|
||||
decoration: MyDecorations.answerContainerDecoration,
|
||||
child: Center(
|
||||
child: Text(
|
||||
question.opt3!,
|
||||
style: const TextStyle(
|
||||
color: MyColors.darkTextColor,
|
||||
fontWeight: FontWeight.bold,
|
||||
fontSize: 18,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
//Column(
|
||||
// mainAxisSize: MainAxisSize.min,
|
||||
// mainAxisAlignment: MainAxisAlignment.center,
|
||||
// crossAxisAlignment: CrossAxisAlignment.center,
|
||||
// children: <Widget>[
|
||||
// InkWell(
|
||||
// onTap: () {},
|
||||
// child: Container(
|
||||
// height: 60,
|
||||
// width: MediaQuery.of(context).size.width - 75,
|
||||
// alignment: Alignment.centerLeft,
|
||||
// decoration: MyDecorations.answerContainerDecoration,
|
||||
// child: Center(
|
||||
// child: Text(
|
||||
// question.opt1!,
|
||||
// style: const TextStyle(
|
||||
// color: MyColors.darkTextColor,
|
||||
// fontWeight: FontWeight.bold,
|
||||
// fontSize: 18,
|
||||
// ),
|
||||
// ),
|
||||
// ),
|
||||
// ),
|
||||
// ),
|
||||
// const SizedBox(height: 15),
|
||||
// InkWell(
|
||||
// onTap: () {},
|
||||
// child: Container(
|
||||
// height: 60,
|
||||
// width: MediaQuery.of(context).size.width - 75,
|
||||
// alignment: Alignment.centerLeft,
|
||||
// decoration: MyDecorations.answerContainerDecoration,
|
||||
// child: Center(
|
||||
// child: Text(
|
||||
// question.opt2!,
|
||||
// style: const TextStyle(
|
||||
// color: MyColors.darkTextColor,
|
||||
// fontWeight: FontWeight.bold,
|
||||
// fontSize: 18,
|
||||
// ),
|
||||
// ),
|
||||
// ),
|
||||
// ),
|
||||
// ),
|
||||
// const SizedBox(height: 15),
|
||||
// InkWell(
|
||||
// onTap: () {},
|
||||
// child: Container(
|
||||
// height: 60,
|
||||
// width: MediaQuery.of(context).size.width - 75,
|
||||
// alignment: Alignment.centerLeft,
|
||||
// decoration: MyDecorations.answerContainerDecoration,
|
||||
// child: Center(
|
||||
// child: Text(
|
||||
// question.opt3!,
|
||||
// style: const TextStyle(
|
||||
// color: MyColors.darkTextColor,
|
||||
// fontWeight: FontWeight.bold,
|
||||
// fontSize: 18,
|
||||
// ),
|
||||
// ),
|
||||
// ),
|
||||
// ),
|
||||
// ),
|
||||
// const SizedBox(height: 15),
|
||||
// InkWell(
|
||||
// onTap: () {},
|
||||
// child: Container(
|
||||
// height: 60,
|
||||
// width: MediaQuery.of(context).size.width - 75,
|
||||
// alignment: Alignment.centerLeft,
|
||||
// decoration: MyDecorations.answerContainerDecoration,
|
||||
// child: Center(
|
||||
// child: Text(
|
||||
// question.opt3!,
|
||||
// style: const TextStyle(
|
||||
// color: MyColors.darkTextColor,
|
||||
// fontWeight: FontWeight.bold,
|
||||
// fontSize: 18,
|
||||
// ),
|
||||
// ),
|
||||
// ),
|
||||
// ),
|
||||
// ),
|
||||
// ],
|
||||
// ),
|
||||
Loading…
Reference in New Issue