Notes

import 'package:analogclock/clock_body.dart';
import 'package:custom_timer/custom_timer.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_countdown_timer/countdown_controller.dart';
import 'package:flutter_countdown_timer/index.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatefulWidget {
// This widget is the root of your application.
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
ThemeData _clockTheme = _buildClockTheme(false);
List<bool> isSelected = [false];
bool isLightMode;
bool isTimeRuning;
int index;
int reminderminutes;

bool _timmerRunning=false;
bool _timmerFinished=false;



CountdownController countdownController;
final CustomTimerController _controller = new CustomTimerController();
@override
void initState() {
super.initState();
isLightMode = true;
_timmerRunning = false;
_timmerFinished=false;
index = 0;
reminderminutes = 15;
_controller.state = CustomTimerState.reset;
countdownController = CountdownController(duration: Duration(minutes: 1));
}

@override
Widget build(BuildContext context) {
return MaterialApp(
theme: _clockTheme,
home: _homepage(),
// home: GetPost(),
debugShowCheckedModeBanner: false,
);
}

Scaffold _homepage() {
return Scaffold(
backgroundColor: isSelected[0] ? Colors.grey[800] : Colors.grey[300],
body: Center(
child: OrientationBuilder(
builder: (context, orientation) {
return Flex(
//Flex is basically row and column combined into one
//Change axis based on orientation of screen
direction: orientation == Orientation.portrait
? Axis.vertical
: Axis.horizontal,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(height: 300, width: 300, child: Clock()),
SizedBox(
height: 20,
width: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
_toggleMode(context),
SizedBox(
height: 10,
width: 10,
),
_selectTime(context),
],
),
SizedBox(
height: 10,
width: 10,
),
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
_showRemaingTime(context),
SizedBox(
height: 20,
width: 20,
),
_timerPauseandPlay(context),
],
),
],
);
},
),
));
}

Container _showRemaingTime(BuildContext context) {
return Container(
//Clock body
width: 90,
height: 90, //Make sure that clock body fills parent
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primary,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
offset: Offset(4.0, 4.0),
blurRadius: 15.0,
spreadRadius: 1.0,
color: Theme.of(context).colorScheme.secondary,
),
BoxShadow(
offset: Offset(-4.0, -4.0),
blurRadius: 15.0,
spreadRadius: 1.0,
color: Theme.of(context).colorScheme.secondaryVariant,
),
],
),

child: Center(
child: CustomTimer(
onChangeState: (state) {
print(state);
if(state==CustomTimerState.counting){_timmerRunning=true;}
else if(state == CustomTimerState.paused){_timmerRunning=false;}
else if(state == CustomTimerState.finished){
_controller.pause();
_controller.reset();
}
},
controller: _controller,
from: Duration(minutes: reminderminutes),
to: Duration(minutes: 0),
builder: (CustomTimerRemainingTime remaining) {
return Text(
"${remaining.minutes}:${remaining.seconds}",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: Theme.of(context).colorScheme.primaryVariant,
),
);
},
),
),
);
}

Container _selectTime(BuildContext context) {
return Container(
height: 50,
width: 50,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primary,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
offset: Offset(4.0, 4.0),
blurRadius: 15.0,
spreadRadius: 1.0,
color: Theme.of(context).colorScheme.secondary,
),
BoxShadow(
offset: Offset(-4.0, -4.0),
blurRadius: 15.0,
spreadRadius: 1.0,
color: Theme.of(context).colorScheme.secondaryVariant,
),
],
),
child: FlatButton(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
onPressed: () {
showCupertinoModalPopup(
builder: (context) => _timePicker(),
context: context,
);
},
child: Icon(
CupertinoIcons.time,
color: Theme.of(context).colorScheme.primaryVariant,
),
),
);
}

Container _toggleMode(BuildContext context) {
return Container(
height: 50,
width: 50,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primary,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
offset: Offset(4.0, 4.0),
blurRadius: 15.0,
spreadRadius: 1.0,
color: Theme.of(context).colorScheme.secondary,
),
BoxShadow(
offset: Offset(-4.0, -4.0),
blurRadius: 15.0,
spreadRadius: 1.0,
color: Theme.of(context).colorScheme.secondaryVariant,
),
],
),
child: FlatButton(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
onPressed: () {
setState(() {
isLightMode = !isLightMode;
isSelected[index] = !isSelected[index];
_clockTheme = _buildClockTheme(isSelected[index]);
});
},
child: Icon(
isLightMode ? Icons.brightness_2_rounded : CupertinoIcons.brightness,
color: Theme.of(context).colorScheme.primaryVariant,
),
),
);
}

_timePicker() {
return Container(
height: 300,
padding: EdgeInsets.all(0),
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
top: Radius.circular(20),
),
color: Colors.white),
child: CupertinoTimerPicker(
mode: CupertinoTimerPickerMode.ms,
onTimerDurationChanged: (Duration changedtimer) {
setState(() {
_timmerRunning = false;
_controller.state = CustomTimerState.finished;
_controller.reset();
reminderminutes = changedtimer.inMinutes.toInt();
});
},
),
);
}

Container _timerPauseandPlay(BuildContext context) {
return Container(
height: 50,
width: 50,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primary,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
offset: Offset(4.0, 4.0),
blurRadius: 15.0,
spreadRadius: 1.0,
color: Theme.of(context).colorScheme.secondary,
),
BoxShadow(
offset: Offset(-4.0, -4.0),
blurRadius: 15.0,
spreadRadius: 1.0,
color: Theme.of(context).colorScheme.secondaryVariant,
),
],
),
child: FlatButton(
highlightColor: Colors.transparent,
splashColor: Colors.transparent,
onPressed: () {
_timmerRunning ? _controller.pause() : _controller.start();
setState(() {});
},
child: Icon(
_timmerRunning
? Icons.motion_photos_pause
: Icons.motion_photos_on_sharp,
color: Theme.of(context).colorScheme.primaryVariant,
),
),
);
}
}

class Clock extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: ClockBody(),
);
}
}

ThemeData _buildClockTheme(bool darkMode) {
final ThemeData base = ThemeData.light();

return base.copyWith(
primaryColor: darkMode ? Colors.grey[800] : Colors.white,
colorScheme: darkMode
? base.colorScheme.copyWith(
primary: Colors.grey[800],
secondary: Colors.grey[900],
secondaryVariant: Colors.grey[700],
primaryVariant: Colors.white,
)
: base.colorScheme.copyWith(
primary: Colors.grey[300],
secondary: Colors.grey[500],
secondaryVariant: Colors.white,
primaryVariant: Colors.grey,
),
visualDensity: VisualDensity.adaptivePlatformDensity,
);
}