Show of array on another site - arrays

Question

So im trying to create a training app where i can type excercise, sets, reps and load and give it a specific time. I have done this with a calender widget. My page where i have createt the Editingpage looks like this
class EventEditingPage extends StatefulWidget {
final Event? event;
const EventEditingPage({Key? key, this.event}) : super(key: key);
#override
_EventEditingPageState createState() => _EventEditingPageState();
}
class _EventEditingPageState extends State<EventEditingPage> {
final _formKey = GlobalKey<FormState>();
final titleController = TextEditingController();
final List<TextEditingController> setsController = [];
final List<TextEditingController> repsController = [];
final List<TextEditingController> loadController = [];
List<String> exceriseItems = ['Squat', 'Deadlift', 'Bench'];
List<String> selectedExercise = [];
int numberOfTextFields = 1;
late DropdownButton Exercise;
late DateTime fromDate;
late DateTime toDate;
#override
void initState() {
super.initState();
createControllers();
if (widget.event == null) {
fromDate = DateTime.now();
toDate = DateTime.now().add(Duration(hours: 1, minutes: 30));
} else {
final event = widget.event!;
titleController.text = event.title;
createControllers();
selectedExercise[0] =
event.Exercise != "" ? event.Exercise : exceriseItems[0];
setsController[0].text = event.Sets;
repsController[0].text = event.Reps;
loadController[0].text = event.Load;
fromDate = event.from;
toDate = event.to;
}
}
#override
void dispose() {
titleController.dispose();
setsController.forEach((TextEditingController element) {
element.dispose();
});
repsController.forEach((TextEditingController element) {
element.dispose();
});
loadController.forEach((TextEditingController element) {
element.dispose();
});
super.dispose();
}
List<TextEditingController> _textEditingControllers = [
TextEditingController()
];
#override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
leading: CloseButton(),
actions: buildEditingActions(),
backgroundColor: Colors.red,
),
body: SingleChildScrollView(
padding: EdgeInsets.all(12),
child: Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("Trænings Information", style: TextStyle(fontSize: 24)),
buildTitle(),
SizedBox(height: 12),
buildDateTimePickers(),
Text("\nTræningen", style: TextStyle(fontSize: 24)),
for (int i = 0; i < numberOfTextFields; i++)
buildExerciseComplete(i),
buildAddMore(),
],
),
),
),
);
List<Widget> buildEditingActions() => [
ElevatedButton.icon(
style: ElevatedButton.styleFrom(
primary: Colors.transparent, shadowColor: Colors.transparent),
onPressed: saveForm,
icon: Icon(Icons.done),
label: Text('Save'),
)
];
createControllers() {
for (var i = 0; i < numberOfTextFields; i++) {
setsController.add(TextEditingController());
repsController.add(TextEditingController());
loadController.add(TextEditingController());
}
selectedExercise.add(exceriseItems[0]);
}
Widget buildTitle() => TextFormField(
style: TextStyle(fontSize: 24),
decoration: InputDecoration(
border: UnderlineInputBorder(),
hintText: 'Add Title',
),
onFieldSubmitted: (_) => saveForm,
validator: (title) =>
title != null && title.isEmpty ? 'Title cannot be empty' : null,
controller: titleController,
);
Widget buildExerciseComplete(int idx) => Container(
padding: const EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: const Color.fromARGB(255, 255, 200, 200),
borderRadius: BorderRadius.circular(5.0),
border: Border.all(
width: 2.0,
),
),
height: 50,
child: Row(
children: <Widget>[
Expanded(
child: Row(
children: <Widget>[
Expanded(child: buildExercise(idx)),
Expanded(child: buildSets(idx)),
Expanded(child: buildReps(idx)),
Expanded(child: buildLoad(idx)),
],
),
),
],
),
);
Widget buildSets(int idx) => TextFormField(
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.digitsOnly
],
style: const TextStyle(fontSize: 15),
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Sets',
),
onFieldSubmitted: (_) => saveForm,
validator: (sets) =>
sets != null && sets.isEmpty ? 'Sets cannot be empty' : null,
controller: setsController[idx],
);
Widget buildReps(int idx) => TextFormField(
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.digitsOnly
],
style: const TextStyle(fontSize: 15),
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Reps',
),
onFieldSubmitted: (_) => saveForm,
validator: (reps) =>
reps != null && reps.isEmpty ? 'Reps cannot be empty' : null,
controller: repsController[idx],
);
Widget buildLoad(int idx) => TextFormField(
keyboardType: TextInputType.number,
inputFormatters: <TextInputFormatter>[
FilteringTextInputFormatter.digitsOnly
],
style: const TextStyle(fontSize: 15),
decoration: const InputDecoration(
labelText: 'Load',
border: const OutlineInputBorder(),
),
onFieldSubmitted: (_) => saveForm,
validator: (load) =>
load != null && load.isEmpty ? 'Load cannot be empty' : null,
controller: loadController[idx],
);
Widget buildExercise(int idx) => DropdownButton<String>(
value: selectedExercise[idx],
icon: const Icon(Icons.arrow_drop_down),
elevation: 16,
style: const TextStyle(color: Colors.black),
onChanged: (String? newValue) {
setState(() {
selectedExercise[idx] = newValue!;
});
},
items: exceriseItems.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
);
Widget buildDateTimePickers() => Column(
children: [
buildFrom(),
buildTo(),
],
);
Widget buildFrom() => buildHeader(
header: 'FROM',
child: Row(
children: [
Expanded(
flex: 2,
child: buildDropdownField(
text: Utils.toDate(fromDate),
onClicked: () => pickFromDateTime(pickDate: true),
),
),
Expanded(
child: buildDropdownField(
text: Utils.toTime(fromDate),
onClicked: () => pickFromDateTime(pickDate: false),
),
),
],
),
);
Widget buildTo() => buildHeader(
header: 'TO',
child: Row(
children: [
Expanded(
flex: 2,
child: buildDropdownField(
text: Utils.toDate(toDate),
onClicked: () => pickToDateTime(pickDate: true),
),
),
Expanded(
child: buildDropdownField(
text: Utils.toTime(toDate),
onClicked: () => pickToDateTime(pickDate: false),
),
),
],
),
);
Widget buildDropdownField({
required String text,
required VoidCallback onClicked,
}) =>
ListTile(
title: Text(text),
trailing: Icon(Icons.arrow_drop_down),
onTap: onClicked,
);
Widget buildHeader({
required String header,
required Widget child,
}) =>
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
header,
style: TextStyle(fontWeight: FontWeight.bold),
),
child,
],
);
Widget buildAddMore() => ElevatedButton(
onPressed: () {
setState(() {
numberOfTextFields++;
createControllers();
});
},
child: const Text('Add new exercise'),
);
Future pickFromDateTime({required bool pickDate}) async {
final date = await pickDateTime(fromDate, pickDate: pickDate);
if (date == null) return;
if (date.isAfter(toDate)) {
toDate =
DateTime(date.year, date.month, date.day, toDate.hour, toDate.minute);
}
setState(() => fromDate = date);
}
Future pickToDateTime({required bool pickDate}) async {
final date = await pickDateTime(
toDate,
pickDate: pickDate,
firstDate: pickDate ? fromDate : null,
);
if (date == null) return;
setState(() => toDate = date);
}
Future<DateTime?> pickDateTime(
DateTime initialDate, {
required bool pickDate,
DateTime? firstDate,
}) async {
if (pickDate) {
final date = await showDatePicker(
context: context,
initialDate: initialDate,
firstDate: firstDate ?? DateTime(2020),
lastDate: DateTime(2100),
);
final time =
Duration(hours: initialDate.hour, minutes: initialDate.minute);
if (date == null) return null;
return date.add(time);
} else {
final timeOfDay = await showTimePicker(
context: context,
initialTime: TimeOfDay.fromDateTime(initialDate),
);
if (timeOfDay == null) return null;
final date =
DateTime(initialDate.year, initialDate.month, initialDate.day);
final time = Duration(hours: timeOfDay.hour, minutes: timeOfDay.minute);
return date.add(time);
}
}
Future saveForm() async {
final isValid = _formKey.currentState!.validate();
if (isValid) {
final event = Event(
title: titleController.text,
from: fromDate,
to: toDate,
Exercise: selectedExercise[0],
Sets: setsController[0],
Reps: repsController[0],
Load: loadController[0]);
final isEditing = widget.event != null;
final provider = Provider.of<EventProvider>(context, listen: false);
if (isEditing) {
provider.editEvent(event, widget.event!);
Navigator.of(context).pop();
} else {
provider.addEvent(event);
}
Navigator.of(context).pop();
}
}
}
class Event {
final String title;
final Exercise;
final Sets;
final Reps;
final Load;
final DateTime from;
final DateTime to;
final Color backgroundColor;
final bool isAllDay;
const Event({
required this.title,
required this.Exercise,
required this.Sets,
required this.Reps,
required this.Load,
required this.from,
required this.to,
this.backgroundColor = Colors.lightGreen,
this.isAllDay = false,
});
}
Im now trying to create a Viewing page where you can see you workout you have createt. I was thinking the basics to be like this
class EventViewingPage extends StatelessWidget {
final Event event;
#override
const EventViewingPage({
Key? key,
required this.event,
}) : super(key: key);
#override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(event.title),
actions: <Widget>[
IconButton(
icon: Icon(
Icons.edit,
color: Colors.white,
),
onPressed: () => Navigator.of(context).pushReplacement(
MaterialPageRoute(
builder: (context) => EventEditingPage(
event: event,
),
),
),
),
IconButton(
icon: Icon(
Icons.delete,
color: Colors.white,
),
onPressed: () {},
)
],
),
body: ListView(
padding: EdgeInsets.all(32),
children: <Widget>[
SizedBox(height: 32),
Text(
"Show the data here",
style: TextStyle(
fontSize: 24,
),
),
],
),
);
}
But im not quite sure on how to display all the information when you add multiple exercises to the training
Hope someone can help, thanks in advance