Styjun

I am working on a meditation app. Here's the link to the github repo: https://github.com/dscognitif/Sati_App

I am trying to implement a timer on one of the app states specifically the timer state. I have found some inspiration from a flutter tutorial: (https://github.com/tensor-programming/flutter_timer_example) on how to implement the timer but they've implemented it on the root widget of the app and I would like for it to be on its own widget. How could I accomplish this?

Here's the code:

import 'package:flutter/material.dart';
import 'dart:math' as math;

void main() => runApp(MaterialApp(
 home: MyApp(),
 theme: ThemeData(
 canvasColor: Colors.blueGrey,
 iconTheme: IconThemeData(
 color: Colors.white,
 ),
 accentColor: Colors.pinkAccent,
 brightness: Brightness.dark,
 ),
 ));

class MyApp extends StatefulWidget 
 @override
 MyAppState createState() => MyAppState();


class MyAppState extends State<MyApp> with TickerProviderStateMixin 
 AnimationController controller;

 String get timerString 
 Duration duration = controller.duration * controller.value;
 return '$duration.inMinutes:$(duration.inSeconds % 60).toString().padLeft(2, '0')';
 

 @override
 void initState() 
 super.initState();
 controller = AnimationController(
 vsync: this,
 duration: Duration(seconds: 10),
 );
 

 @override
 Widget build(BuildContext context) 
 ThemeData themeData = Theme.of(context);
 return Scaffold(
 body: Padding(
 padding: EdgeInsets.all(8.0),
 child: Column(
 mainAxisAlignment: MainAxisAlignment.spaceBetween,
 children: <Widget>[
 Expanded(
 child: Align(
 alignment: FractionalOffset.center,
 child: AspectRatio(
 aspectRatio: 1.0,
 child: Stack(
 children: <Widget>[
 Positioned.fill(
 child: AnimatedBuilder(
 animation: controller,
 builder: (BuildContext context, Widget child) 
 return CustomPaint(
 painter: TimerPainter(
 animation: controller,
 backgroundColor: Colors.white,
 color: themeData.indicatorColor,
 ));
 ,
 ),
 ),
 Align(
 alignment: FractionalOffset.center,
 child: Column(
 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
 crossAxisAlignment: CrossAxisAlignment.center,
 children: <Widget>[
 Text(
 "Count Down",
 style: themeData.textTheme.subhead,
 ),
 AnimatedBuilder(
 animation: controller,
 builder: (BuildContext context, Widget child) 
 return Text(
 timerString,
 style: themeData.textTheme.display4,
 );
 ),
 ],
 ),
 ),
 ],
 ),
 ),
 ),
 ),
 Container(
 margin: EdgeInsets.all(8.0),
 child: Row(
 mainAxisAlignment: MainAxisAlignment.spaceEvenly,
 children: <Widget>[
 FloatingActionButton(
 child: AnimatedBuilder(
 animation: controller,
 builder: (BuildContext context, Widget child) 
 return Icon(controller.isAnimating
 ? Icons.pause
 : Icons.play_arrow);
 ,
 ),
 onPressed: () 
 if (controller.isAnimating)
 controller.stop();
 else 
 controller.reverse(
 from: controller.value == 0.0
 ? 1.0
 : controller.value);
 
 ,
 )
 ],
 ),
 )
 ],
 ),
 ),
 );
 


class TimerPainter extends CustomPainter 
 TimerPainter(
 this.animation,
 this.backgroundColor,
 this.color,
 ) : super(repaint: animation);

 final Animation<double> animation;
 final Color backgroundColor, color;

 @override
 void paint(Canvas canvas, Size size) 
 Paint paint = Paint()
 ..color = backgroundColor
 ..strokeWidth = 5.0
 ..strokeCap = StrokeCap.round
 ..style = PaintingStyle.stroke;

 canvas.drawCircle(size.center(Offset.zero), size.width / 2.0, paint);
 paint.color = color;
 double progress = (1.0 - animation.value) * 2 * math.pi;
 canvas.drawArc(Offset.zero & size, math.pi * 1.5, -progress, false, paint);
 

 @override
 bool shouldRepaint(TimerPainter old) 
 return animation.value != old.animation.value