How to update time dynamically in flutter - flutter

Question

I have a list view with list tiles with each containing a region with its specific time.
I am using a Getx controller with the class WorldTime with two parameters location and time.
There is already a timer that's called during setState to update the clock widget, but how do I implement this to update each list tile time or is there any other way to update the time automatically without calling setState.
class _WorldClockState extends State<WorldClock> {
final WorldTimeController worldTimeController =
Get.put(WorldTimeController());
String formattedTime = DateFormat('h:mm').format(DateTime.now());
String hour = DateFormat('a').format(DateTime.now());
late Timer _timer;
#override
void initState() {
super.initState();
_timer =
Timer.periodic(const Duration(milliseconds: 500), (timer) => _update());
}
void _update() {
setState(() {
formattedTime = DateFormat('h:mm').format(DateTime.now());
hour = DateFormat('a').format(DateTime.now());
});
}
#override
void dispose() {
_timer.cancel();
super.dispose();
}
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
resizeToAvoidBottomInset: false,
body: SingleChildScrollView(
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(top: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(formattedTime,
style: GoogleFonts.lato(
fontSize: 80.0,
color: Colors.blue,
fontStyle: FontStyle.normal,
letterSpacing: 5.0)),
Padding(
padding: const EdgeInsets.only(top: 40.0, left: 5.0),
child: Text(
hour,
style: GoogleFonts.lato(
color: Colors.blue,
fontSize: 30.0,
),
),
),
],
),
),
Container(
child: Text(
DateFormat('EE, MMM d').format(DateTime.now()),
style: GoogleFonts.lato(
color: Colors.white,
fontSize: 20.0,
letterSpacing: 2.0,
),
),
),
const Padding(
padding: EdgeInsets.only(top: 20.0, left: 30.0, right: 30.0),
child: Divider(
color: Colors.white,
height: 2.0,
),
),
GetBuilder<WorldTimeController>(
id: 'Clockid',
builder: (value) => Container(
height: 600.0,
width: 450.0,
child: Padding(
padding: const EdgeInsets.only(top: 20.0),
child: ListView.builder(
scrollDirection: Axis.vertical,
physics: const BouncingScrollPhysics(),
shrinkWrap: true,
itemCount: worldTimeController.WorldTimeList.length,
itemBuilder: (BuildContext context, index) => Padding(
padding: const EdgeInsets.only(bottom: 18.0),
child: Slidable(
key: UniqueKey(),
startActionPane: ActionPane(
motion: ScrollMotion(),
dismissible: DismissiblePane(onDismissed: () {
worldTimeController.WorldTimeList.removeAt(index);
}),
children: const [],
),
child: ListTile(
leading: Text(
worldTimeController
.WorldTimeList[index].location,
style: GoogleFonts.lato(
color: Colors.white70, fontSize: 25)),
trailing: Text(
'${value.getTime(worldTimeController.WorldTimeList[index].location)}',
style: GoogleFonts.lato(
color: Colors.white70, fontSize: 35.0),
),
),
),
),
),
),
),
),
],
),
),
floatingActionButton: Padding(
padding: const EdgeInsets.only(right: 192.0, bottom: 20.0),
child: FloatingActionButton(
onPressed: () {
Get.to(() => const RegionSelectScreen());
},
child: const Icon(Icons.public),
),
),
),
);
}
}
controller:
class WorldTimeController extends GetxController {
var WorldTimeList = <WorldTime>[].obs;
var newUrl;
var newResponse;
Future<dynamic> getTime(location) async {
newUrl = "http://worldtimeapi.org/api/timezone/${location}";
newResponse = await get(Uri.parse(newUrl));
Map newData = jsonDecode(newResponse.body);
var time = newData['datetime'];
String dateTime = newData["utc_datetime"];
String offset = newData["utc_offset"];
DateTime now = DateTime.parse(dateTime);
now = now.add(Duration(
hours: int.parse(offset.substring(1, 3)),
minutes: int.parse(offset.substring(4))));
update(['Clockid']);
return time = DateFormat.jm().format(now);
}
#override
void onInit() {
List? storedWorldTime = GetStorage().read<List>('WorldTime');
if (storedWorldTime != null) {
WorldTimeList.assignAll(
storedWorldTime.map((e) => WorldTime.fromJson(e)).toList());
}
ever(WorldTimeList, (_) {
GetStorage().write('WorldTime', WorldTimeList.toList());
});
super.onInit();
}
}

Answer 1

In your getXcontroller class you can create function to update the hours and on this function you can add
update(['clockId']);
then in your screen
return GetBuilder<WorldTimeController>(
id: 'clockId',
init: WorldTimeController(), // If is init this line is not necessary
builder: (worldTimeController) => Container(
height: 600.0,
width: 450.0,
child: Padding(
padding: const EdgeInsets.only(top: 20.0),
child: ListView.builder(
scrollDirection: Axis.vertical,
physics: const BouncingScrollPhysics(),
shrinkWrap: true,
itemCount: worldTimeController.WorldTimeList.length,
itemBuilder: (BuildContext context, index) => Padding(
padding: const EdgeInsets.only(bottom: 18.0),
child: Slidable(
key: UniqueKey(),
startActionPane: ActionPane(
motion: ScrollMotion(),
dismissible: DismissiblePane(onDismissed: () {
worldTimeController.WorldTimeList.removeAt(
index);
}),
children: [],
),
child: ListTile(
leading: Text(
'${worldTimeController.WorldTimeList[index].location}',
style: GoogleFonts.lato(
color: Colors.white70, fontSize: 25)),
trailing: Text(
"${worldTimeController.WorldTimeList[index].time}",
style: GoogleFonts.lato(
color: Colors.white70, fontSize: 35.0),
),
),
),
)),
),
),
);
Then even that change something in your function this will refresh all the list inside your clockId.
Try to avoid setState because this method rebuild all the view and when your app grows does't has good performance
Here an example:
https://github.com/alcampospalacios/GetX_UpdateAll_Example