Skip to content

Commit

Permalink
Time picker changed for timer (#380)
Browse files Browse the repository at this point in the history 
* time picker added

* theme updated

* added dial names

* fix alignment and overflow

---------

Co-authored-by: Sagar Raj <[email protected]>
  • Loading branch information
@sagarrajgit
sagarrajgit and Sagar Raj authored Jan 24, 2024
1 parent 87d5885 commit 912894e
Show file tree
Hide file tree
Showing 2 changed files with 247 additions and 67 deletions.
1 change: 1 addition & 0 deletions lib/app/modules/timer/controllers/timer_controller.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ class TimerController extends GetxController with WidgetsBindingObserver {
Rx<Timer?> countdownTimer = Rx<Timer?>(null);
AlarmModel alarmRecord = Utils.genFakeAlarmModel();
late int currentTimerIsarId;
var hours=0.obs, minutes=1.obs, seconds=0.obs;

final _secureStorageProvider = SecureStorageProvider();

Expand Down
313 changes: 246 additions & 67 deletions lib/app/modules/timer/views/timer_view.dart
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import 'package:flutter_time_picker_spinner/flutter_time_picker_spinner.dart';
import 'package:get/get.dart';
import 'package:flutter/material.dart';
import 'package:numberpicker/numberpicker.dart';
import 'package:ultimate_alarm_clock/app/data/providers/isar_provider.dart';
import 'package:ultimate_alarm_clock/app/data/providers/secure_storage_provider.dart';
import 'package:ultimate_alarm_clock/app/modules/settings/controllers/theme_controller.dart';
Expand All @@ -25,7 +25,6 @@ class TimerView extends GetView<TimerController> {
toolbarHeight: height / 7.9,
elevation: 0.0,
centerTitle: true,

),
),
body: Obx(
Expand Down Expand Up @@ -101,49 +100,220 @@ class TimerView extends GetView<TimerController> {
],
)
: Obx(
() => Stack(
children: [
ListView(
children: [
Container(
color: themeController.isLightMode.value
? kLightPrimaryBackgroundColor
: kprimaryBackgroundColor,
height: height * 0.32,
width: width,
child: Obx(
() => TimePickerSpinner(
time: DateTime(0, 0, 0, 0, 1, 0),
minutesInterval: 1,
secondsInterval: 1,
is24HourMode: true,
isShowSeconds: true,
alignment: Alignment.center,
normalTextStyle: Theme.of(context)
.textTheme
.displayMedium!
.copyWith(
fontWeight: FontWeight.normal,
color: themeController.isLightMode.value
? kLightPrimaryDisabledTextColor
: kprimaryDisabledTextColor,
),
highlightedTextStyle:
Theme.of(context).textTheme.displayMedium,
onTimeChange: (dateTime) {
Utils.hapticFeedback();
controller.remainingTime.value = Duration(
hours: dateTime.hour,
minutes: dateTime.minute,
seconds: dateTime.second,
);
},
() => Container(
color: themeController.isLightMode.value
? kLightPrimaryBackgroundColor
: kprimaryBackgroundColor,
height: height * 0.3,
width: width,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Hours',
style: TextStyle(
fontWeight: FontWeight.bold,
color: themeController.isLightMode.value
? kLightPrimaryDisabledTextColor
: kprimaryDisabledTextColor,
),
),
SizedBox(
height: height * 0.01,
),
NumberPicker(
minValue: 0,
maxValue: 23,
value: controller.hours.value,
onChanged: (value) {
controller.hours.value = value;
},
infiniteLoop: true,
itemWidth: width * 0.17,
zeroPad: true,
selectedTextStyle: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: kprimaryColor,
),
textStyle: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: themeController.isLightMode.value
? kLightPrimaryDisabledTextColor
: kprimaryDisabledTextColor,
),
decoration: BoxDecoration(
border: Border(
top: BorderSide(
width: width * 0.005,
color: themeController.isLightMode.value
? kLightPrimaryDisabledTextColor
: kprimaryDisabledTextColor,
),
bottom: BorderSide(
width: width * 0.005,
color: themeController.isLightMode.value
? kLightPrimaryDisabledTextColor
: kprimaryDisabledTextColor,
),
),
),
),
],
),
Padding(
padding: EdgeInsets.only(
left: width * 0.02,
right: width * 0.02,
top: height * 0.032,
),
child: Text(
':',
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: themeController.isLightMode.value
? kLightPrimaryDisabledTextColor
: kprimaryDisabledTextColor,
),
),
],
),
],
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Minutes',
style: TextStyle(
fontWeight: FontWeight.bold,
color: themeController.isLightMode.value
? kLightPrimaryDisabledTextColor
: kprimaryDisabledTextColor,
),
),
SizedBox(
height: height * 0.01,
),
NumberPicker(
minValue: 0,
maxValue: 59,
value: controller.minutes.value,
onChanged: (value) {
controller.minutes.value = value;
},
infiniteLoop: true,
itemWidth: width * 0.17,
zeroPad: true,
selectedTextStyle: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: kprimaryColor,
),
textStyle: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: themeController.isLightMode.value
? kLightPrimaryDisabledTextColor
: kprimaryDisabledTextColor,
),
decoration: BoxDecoration(
border: Border(
top: BorderSide(
width: width * 0.005,
color: themeController.isLightMode.value
? kLightPrimaryDisabledTextColor
: kprimaryDisabledTextColor,
),
bottom: BorderSide(
width: width * 0.005,
color: themeController.isLightMode.value
? kLightPrimaryDisabledTextColor
: kprimaryDisabledTextColor,
),
),
),
),
],
),
Padding(
padding: EdgeInsets.only(
left: width * 0.02,
right: width * 0.02,
top: height * 0.032,
),
child: Text(
':',
style: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: themeController.isLightMode.value
? kLightPrimaryDisabledTextColor
: kprimaryDisabledTextColor,
),
),
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Seconds',
style: TextStyle(
fontWeight: FontWeight.bold,
color: themeController.isLightMode.value
? kLightPrimaryDisabledTextColor
: kprimaryDisabledTextColor,
),
),
SizedBox(
height: height * 0.011,
),
NumberPicker(
minValue: 0,
maxValue: 59,
value: controller.seconds.value,
onChanged: (value) {
controller.seconds.value = value;
},
infiniteLoop: true,
itemWidth: width * 0.17,
zeroPad: true,
selectedTextStyle: TextStyle(
fontSize: 28,
fontWeight: FontWeight.bold,
color: kprimaryColor,
),
textStyle: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: themeController.isLightMode.value
? kLightPrimaryDisabledTextColor
: kprimaryDisabledTextColor,
),
decoration: BoxDecoration(
border: Border(
top: BorderSide(
width: width * 0.005,
color: themeController.isLightMode.value
? kLightPrimaryDisabledTextColor
: kprimaryDisabledTextColor,
),
bottom: BorderSide(
width: width * 0.005,
color: themeController.isLightMode.value
? kLightPrimaryDisabledTextColor
: kprimaryDisabledTextColor,
),
),
),
),
],
),
],
),
),
),
),
Expand All @@ -152,23 +322,27 @@ class TimerView extends GetView<TimerController> {
? const SizedBox()
: Obx(
() => AbsorbPointer(
absorbing: controller.remainingTime.value.inHours == 0 &&
controller.remainingTime.value.inMinutes == 0 &&
controller.remainingTime.value.inSeconds == 0
absorbing: controller.hours.value == 0 &&
controller.minutes.value == 0 &&
controller.seconds.value == 0
? true
: false,
child: FloatingActionButton(
onPressed: () {
Utils.hapticFeedback();
controller.startTimer();
controller.createTimer();
},
backgroundColor:
controller.remainingTime.value.inHours == 0 &&
controller.remainingTime.value.inMinutes == 0 &&
controller.remainingTime.value.inSeconds == 0
? kprimaryDisabledTextColor
: kprimaryColor,
Utils.hapticFeedback();
controller.remainingTime.value = Duration(
hours: controller.hours.value,
minutes: controller.minutes.value,
seconds: controller.seconds.value,
);
controller.startTimer();
controller.createTimer();
},
backgroundColor: controller.hours.value == 0 &&
controller.minutes.value == 0 &&
controller.seconds.value == 0
? kprimaryDisabledTextColor
: kprimaryColor,
child: const Icon(
Icons.play_arrow_rounded,
),
Expand All @@ -180,7 +354,9 @@ class TimerView extends GetView<TimerController> {
() => Drawer(
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10), bottomLeft: Radius.circular(10)),
topLeft: Radius.circular(10),
bottomLeft: Radius.circular(10),
),
),
backgroundColor: themeController.isLightMode.value
? kLightSecondaryBackgroundColor
Expand Down Expand Up @@ -218,10 +394,11 @@ class TimerView extends GetView<TimerController> {
.textTheme
.displayMedium!
.copyWith(
color: themeController.isLightMode.value
? kprimaryTextColor
: ksecondaryTextColor,
fontWeight: FontWeight.bold),
color: themeController.isLightMode.value
? kprimaryTextColor
: ksecondaryTextColor,
fontWeight: FontWeight.bold,
),
),
),
SizedBox(
Expand All @@ -233,10 +410,11 @@ class TimerView extends GetView<TimerController> {
.textTheme
.titleLarge!
.copyWith(
color: themeController.isLightMode.value
? kprimaryTextColor
: ksecondaryTextColor,
fontWeight: FontWeight.bold),
color: themeController.isLightMode.value
? kprimaryTextColor
: ksecondaryTextColor,
fontWeight: FontWeight.bold,
),
),
),
],
Expand Down Expand Up @@ -280,9 +458,10 @@ class TimerView extends GetView<TimerController> {
title: Text(
'About'.tr,
style: Theme.of(context).textTheme.titleLarge!.copyWith(
color: themeController.isLightMode.value
? kLightPrimaryTextColor.withOpacity(0.8)
: kprimaryTextColor.withOpacity(0.8)),
color: themeController.isLightMode.value
? kLightPrimaryTextColor.withOpacity(0.8)
: kprimaryTextColor.withOpacity(0.8),
),
),
leading: Icon(
Icons.info_outline,
Expand Down

0 comments on commit 912894e

Please sign in to comment.