Flutter: How to Display Timer-Updating Widget List - list

Question

The goal of this section of my app is to display a brand new historyTile() every minute, with each tile having it's own respective time and date to when it was saved to the historyList.
I am not sure exactly how this sort of function might work, but this is what I have so far. It is divided into two dart files.
activityTab.dart
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:indietools/pages/tabs/functions/historyTile.dart';
import 'package:intl/intl.dart';
class activityTab extends StatefulWidget {
const activityTab({Key? key}) : super(key: key);
#override
State<activityTab> createState() => _activityTabState();
}
class _activityTabState extends State<activityTab> {
List<Widget> historyList = [];
#override
void initState() {
super.initState();
Timer.periodic(Duration(minutes: 1), (Timer t) => historyList.add(historyTile())
);
}
#override
Widget build(BuildContext context) {
MediaQuery.of(context).size;
return Scaffold(
body: ListView(
children: [historyList]
)
);
}
}
historyTile.dart
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
class historyTile extends StatefulWidget {
const historyTile({Key? key}) : super(key: key);
#override
State<historyTile> createState() => _historyTileState();
}
class _historyTileState extends State<historyTile> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView.builder(
itemCount: 1,
shrinkWrap: true,
itemBuilder: (context, index) {
final now = DateTime.now();
String tileTime = DateFormat.yMMMMd().add_jm().format(now);
return ListTile(
leading: Icon(Icons.backup_outlined),
title: Text('Synced my_script.pdf with the cloud.'),
subtitle: Text('${tileTime}'),
tileColor: Colors.greenAccent,
);
}
)
);
}
}
Thank you for your time and advice.

Answer 1

Just copy and paste it onto DartPad to play with it.
import 'package:flutter/material.dart';
import 'dart:async';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({
Key? key,
required this.title,
}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
late Timer _timer;
List<Widget> history = [];
int _counter = 0;
void _updateHistory(Timer timer) {
setState(() {
_counter++;
history.add(ListTile(title: Text(_counter.toString())));
});
}
#override
void initState() {
super.initState();
_timer = Timer.periodic(const Duration(seconds: 1), _updateHistory);
}
#override
void dispose() {
super.dispose();
_timer.cancel();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Column(
children: history,
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
_counter = 0;
history.clear();
});
},
tooltip: 'Clear all',
child: const Icon(Icons.clear_all),
),
);
}
}