How to Update Clock Time To UTC TIME in Flutter - flutter

Question

I used a flutter package called analog clock - link here to create a clock. I don't want to use Datetime.now but want to use a UTC time of +3. I've tweaked the UTC code a couple of times but still don't know to make it work with this package. There seems to be a bug with the package.
In my code I changed the date time to
DateTime.now().toUtc().add(Duration(hours: 3)), to show UTC +3.
However, whenever I run the app, the clock keeps showing the current daytime now. I've tried tweaking the code but cant fix
Here is my code where I call the analog clock package
class TimeAndWeatherPage extends StatelessWidget {
#override
Widget build(BuildContext context) {
var size = MediaQuery.of(context)
.size; //this gonna give us total height and with of our device
return Scaffold(
backgroundColor: Theme.of(context).scaffoldBackgroundColor,
body: Stack(
children: <Widget>[
Container(
// Here the height of the container is 45% of our total height
height: size.height * .50,
decoration: BoxDecoration(
color: Theme.of(context).canvasColor,
),
),
SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(0, 50, 0, 10),
child: Center(
child: TitleText(
text: "time",
)),
),
CurrentDate(),
Center(
child: AnalogClock(
decoration: BoxDecoration(
border: Border.all(
color: Theme.of(context).shadowColor, width: 0.5),
color: Theme.of(context).cardColor,
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
offset: Offset(0.0, 10.0),
blurRadius: 2.0,
spreadRadius: 0.0,
color: Theme.of(context).shadowColor,
),
],
),
width: 270.0,
height: 400,
isLive: true,
showTicks: true,
showAllNumbers: true,
showDigitalClock: true,
showNumbers: true,
showSecondHand: true,
hourHandColor: Theme.of(context).iconTheme.color,
minuteHandColor: Theme.of(context).iconTheme.color,
secondHandColor: Color(0xB35FD245),
numberColor: Theme.of(context).iconTheme.color,
textScaleFactor: 1.2,
digitalClockColor: Theme.of(context).iconTheme.color,
datetime:
DateTime.now().toUtc().add(Duration(hours: 3)),
),
),
],
),
),
)
],
),
);
}
}
here is the original code of the package
class AnalogClock extends StatefulWidget {
final DateTime datetime;
final bool showDigitalClock;
final bool showTicks;
final bool showNumbers;
final bool showAllNumbers;
final bool showSecondHand;
final Color hourHandColor;
final Color minuteHandColor;
final Color secondHandColor;
final Color tickColor;
final Color digitalClockColor;
final Color numberColor;
final bool isLive;
final double textScaleFactor;
final double width;
final double height;
final BoxDecoration decoration;
const AnalogClock(
{this.datetime,
this.showDigitalClock = true,
this.showTicks = true,
this.showNumbers = true,
this.showSecondHand = true,
this.showAllNumbers = false,
this.hourHandColor = Colors.black,
this.minuteHandColor = Colors.black,
this.secondHandColor = Colors.redAccent,
this.tickColor = Colors.grey,
this.digitalClockColor = Colors.black,
this.numberColor = Colors.black,
this.textScaleFactor = 1.0,
this.width = double.infinity,
this.height = double.infinity,
this.decoration = const BoxDecoration(),
isLive,
Key key})
: this.isLive = isLive ?? (datetime == null),
super(key: key);
const AnalogClock.dark(
{datetime,
showDigitalClock = true,
showTicks = true,
showNumbers = true,
showAllNumbers = false,
showSecondHand = true,
width = double.infinity,
height = double.infinity,
decoration = const BoxDecoration(),
Key key})
: this(
datetime: datetime,
showDigitalClock: showDigitalClock,
showTicks: showTicks,
showNumbers: showNumbers,
showAllNumbers: showAllNumbers,
showSecondHand: showSecondHand,
width: width,
height: height,
hourHandColor: Colors.white,
minuteHandColor: Colors.white,
secondHandColor: Colors.redAccent,
tickColor: Colors.grey,
digitalClockColor: Colors.white,
numberColor: Colors.white,
decoration: decoration,
key: key);
#override
_AnalogClockState createState() => _AnalogClockState(datetime);
}
class _AnalogClockState extends State<AnalogClock> {
DateTime datetime;
_AnalogClockState(datetime) : this.datetime = datetime ?? DateTime.now();
initState() {
super.initState();
if (widget.isLive) {
// update clock every second or minute based on second hand's visibility.
Duration updateDuration =
widget.showSecondHand ? Duration(seconds: 1) : Duration(minutes: 1);
Timer.periodic(updateDuration, update);
}
}
update(Timer timer) {
if (mounted) {
// update is only called on live clocks. So, it's safe to update datetime.
datetime = DateTime.now();
setState(() {});
}
}
#override
Widget build(BuildContext context) {
return Container(
width: widget.width,
height: widget.height,
decoration: widget.decoration,
child: Center(
child: AspectRatio(
aspectRatio: 1.0,
child: new Container(
constraints: BoxConstraints(minWidth: 48.0, minHeight: 48.0),
width: double.infinity,
child: new CustomPaint(
painter: new AnalogClockPainter(
datetime: datetime,
showDigitalClock: widget.showDigitalClock,
showTicks: widget.showTicks,
showNumbers: widget.showNumbers,
showAllNumbers: widget.showAllNumbers,
showSecondHand: widget.showSecondHand,
hourHandColor: widget.hourHandColor,
minuteHandColor: widget.minuteHandColor,
secondHandColor: widget.secondHandColor,
tickColor: widget.tickColor,
digitalClockColor: widget.digitalClockColor,
textScaleFactor: widget.textScaleFactor,
numberColor: widget.numberColor),
)))),
);
}
}

Answer 1

It looks like you might have a few things going on here.
You should be updating the datetime property within the setState call:
update(Timer timer) {
if (!mounted) return;
setState(() => datetime = DateTime.now());
}
You're updating the time without setting the timezone again, which would revert it to your local time. So the above should look like this:
update(Timer timer) {
if (!mounted) return;
setState(() => datetime = DateTime.now().toUtc());
// Or to an arbitrary time in the future, if that's what you need:
// setState(() => datetime = DateTime.now().toUtc().add(const Duration(hours: 3)));
}
Aside from that...
You should store a reference to the timer, so you can cancel() it in the widget's dispose() method.
Note that you are only updating the "mode" of the clock (seconds, or minutes) in the initState method of your widget, which only gets called once in the lifetime of a widget. It doesn't get called again when the widget is updated. For that you need to use didUpdateWidget.
OR...
I highly recommend you check out the Riverpod package, as it makes state management a lot easier. For example, the above code could look something like this...
final clockProvider = StateProvider<DateTime>((ref) => DateTime.now().toUtc());
class CustomClock extends ConsumerWidget{
...
#override
Widget build(BuildContext context, WidgetRef ref) {
return AnalogClock(
...
datetime: ref.watch(clockProvder),
...
);
}
}
class ClockModeButton extends ConsumerWidget{
...
#override
Widget build(BuildContext context, WidgetRef ref) {
return TextButton(
...
onPressed: () {
final DateTime newDateTime = DateTime.now().toUtc().add(const Duration(hours: 3));
ref.read(clockPrivder.notifier).state = newDateTime;
},
...
);
}
}