Workout List
Loading preview
Starting the Flutter app
A showcase of Flutter's workout list functionality
import 'package:flutter/material.dart';
const _workouts = [
{'name': 'Morning Run', 'duration': 30, 'calories': 280, 'date': 'Today'},
{'name': 'Full Body HIIT', 'duration': 45, 'calories': 420, 'date': 'Yesterday'},
{'name': 'Yoga Flow', 'duration': 60, 'calories': 180, 'date': '2 days ago'},
{'name': 'Strength Training', 'duration': 50, 'calories': 350, 'date': '3 days ago'},
];
class WorkoutList extends StatelessWidget {
const WorkoutList({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Workouts')),
body: ListView.builder(
padding: const EdgeInsets.all(16),
itemCount: _workouts.length,
itemBuilder: (context, i) {
final w = _workouts[i];
return Card(
margin: const EdgeInsets.only(bottom: 12),
child: ListTile(
leading: Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: Colors.blue.withValues(alpha: 0.2),
borderRadius: BorderRadius.circular(12),
),
child: Icon(Icons.fitness_center, color: Colors.blue.shade700),
),
title: Text(w['name'] as String),
subtitle: Text('${w['duration']} min • ${w['calories']} cal • ${w['date']}'),
),
);
},
),
floatingActionButton: FloatingActionButton.extended(
onPressed: () => _showDemo(context, 'Add Workout (demo)'),
icon: const Icon(Icons.add),
label: const Text('Add Workout'),
),
);
}
}
void _showDemo(BuildContext context, String message) {
ScaffoldMessenger.of(context)
..hideCurrentSnackBar()
..showSnackBar(SnackBar(content: Text(message)));
}
Add it to your project
Copies the Dart source into your app, so you own it. Flutter SDK only, no extra packages.
First time? Run dart pub global activate fluttertemplates_dev, or read the CLI guide.
How it works
Four _workouts flow through ListView.builder, each tile showing the same fitness_center icon and a subtitle joining duration, calories and date. Relative dates such as 2 days ago are stored strings, so they would go stale in real use. Tiles have no tap action, and the FloatingActionButton.extended shows a demo SnackBar.
Adapting it
- Store a
DateTimein place ofdateand format the relative text at render time. - Map workout type to an icon instead of always using
Icons.fitness_center. - Use the FAB’s
onPressedto open an entry form, then add the result to a stateful list.