143 lines
4.6 KiB
Dart
143 lines
4.6 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:flutter_clock_example/constants.dart';
|
|
import 'package:intl/intl.dart';
|
|
|
|
// import 'constants.dart';
|
|
|
|
|
|
class TimersPage extends StatefulWidget {
|
|
const TimersPage({
|
|
super.key,
|
|
});
|
|
|
|
@override
|
|
State<TimersPage> createState() => _TimersPageState();
|
|
}
|
|
|
|
class _TimersPageState extends State<TimersPage> with TickerProviderStateMixin{
|
|
|
|
late Animation<double> animation;
|
|
late AnimationController controller;
|
|
|
|
double targetProgress = 0.8;
|
|
double currentProgress = 0.1;
|
|
double animationDurationSeconds = 2.5;
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
|
|
controller = AnimationController(
|
|
vsync: this,
|
|
duration: Duration(seconds: animationDurationSeconds.toInt()),
|
|
);
|
|
|
|
animation = Tween<double>(
|
|
begin: currentProgress,
|
|
end: targetProgress,
|
|
).animate(controller)
|
|
..addListener(() {
|
|
setState(() {
|
|
currentProgress = animation.value;
|
|
});
|
|
});
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
final theme = Theme.of(context);
|
|
|
|
var timerContainerCardColorAlpha = theme.colorScheme.primaryContainer.withAlpha(0);
|
|
// Used to fill timer container card and make the layout uniform
|
|
Card timerBlankCard(Color color) {
|
|
return Card(
|
|
color: color,
|
|
elevation: 0.0,
|
|
borderOnForeground: false,
|
|
child: ListTile(
|
|
title: Text('', style: theme.textTheme.titleLarge!.copyWith(color: theme.colorScheme.onPrimaryContainer)),
|
|
subtitle: const Text('')
|
|
),
|
|
);
|
|
}
|
|
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Center(
|
|
child: Container(
|
|
margin: const EdgeInsets.all(12.0),
|
|
padding: const EdgeInsets.all(12.0),
|
|
decoration: BoxDecoration(
|
|
color: Colors.transparent,
|
|
borderRadius: myBorderRadius,
|
|
),
|
|
child: Column(
|
|
children: [
|
|
// The time won't update automatically yet
|
|
Text(
|
|
DateFormat.Hm().format(DateTime.now()),
|
|
style: theme.textTheme.displayLarge!.copyWith(color: theme.colorScheme.primary),
|
|
),
|
|
Text(
|
|
DateFormat('EEEE, MMMM dd').format(DateTime.now()),
|
|
style: theme.textTheme.titleLarge!.copyWith(color: theme.colorScheme.secondary),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
Expanded(
|
|
child: ListView.builder(
|
|
itemCount: 5,
|
|
itemBuilder: (context, index) {
|
|
return GestureDetector(
|
|
onTap: () {
|
|
controller.forward();
|
|
},
|
|
onLongPress: () {
|
|
controller.reset();
|
|
},
|
|
child: Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal:16.0, vertical:2.0),
|
|
child: Stack(
|
|
children: [
|
|
Container( // Card background
|
|
decoration: BoxDecoration(
|
|
color: theme.colorScheme.secondaryContainer.withAlpha(60),
|
|
borderRadius: myBorderRadius,
|
|
),
|
|
child: timerBlankCard(timerContainerCardColorAlpha),
|
|
),
|
|
AnimatedContainer( // Progress bar
|
|
duration: Duration(seconds: animationDurationSeconds.toInt()),
|
|
alignment: Alignment.centerLeft,
|
|
width: MediaQuery.of(context).size.width * currentProgress,
|
|
child: timerBlankCard(theme.colorScheme.primaryContainer.withAlpha(192)),
|
|
),
|
|
Card( // Time and text
|
|
color: timerContainerCardColorAlpha,
|
|
elevation: 0.0,
|
|
borderOnForeground: false,
|
|
child: ListTile(
|
|
title: Text(
|
|
'12:34',
|
|
style: theme.textTheme.titleLarge!.copyWith(color: theme.colorScheme.primary),
|
|
),
|
|
subtitle: const Text(
|
|
'Countdown: 05:00',
|
|
),
|
|
),
|
|
),
|
|
],
|
|
)
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
}
|