diff --git a/lib/widgets/exercises/exercises.dart b/lib/widgets/exercises/exercises.dart
index 25e58bf2..71831426 100644
--- a/lib/widgets/exercises/exercises.dart
+++ b/lib/widgets/exercises/exercises.dart
@@ -16,6 +16,7 @@
* along with this program. If not, see .
*/
+import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';
import 'package:flutter_svg/svg.dart';
@@ -25,6 +26,7 @@ import 'package:wger/helpers/i18n.dart';
import 'package:wger/helpers/platform.dart';
import 'package:wger/l10n/generated/app_localizations.dart';
import 'package:wger/models/exercises/exercise.dart';
+import 'package:wger/models/exercises/image.dart';
import 'package:wger/models/exercises/muscle.dart';
import 'package:wger/models/exercises/translation.dart';
import 'package:wger/providers/exercises.dart';
@@ -37,6 +39,7 @@ class ExerciseDetail extends StatelessWidget {
final Exercise _exercise;
late Translation _translation;
static const PADDING = 9.0;
+ final CarouselController carouselController = CarouselController();
ExerciseDetail(this._exercise);
@@ -192,11 +195,15 @@ class ExerciseDetail extends StatelessWidget {
List getImages() {
// TODO: add carousel for the other images
final List out = [];
- if (_exercise.getMainImage != null) {
- out.add(ExerciseImageWidget(
- image: _exercise.getMainImage,
- height: 250,
+ if (_exercise.images.isNotEmpty) {
+ out.add(CarouselImages(
+ images: _exercise.images,
));
+
+ // out.add(ExerciseImageWidget(
+ // image: _exercise.getMainImage,
+ // height: 250,
+ // ));
out.add(const SizedBox(height: PADDING));
}
@@ -356,3 +363,59 @@ class MuscleWidget extends StatelessWidget {
);
}
}
+
+class CarouselImages extends StatefulWidget {
+ final List images;
+
+ const CarouselImages({super.key, required this.images});
+
+ @override
+ State createState() => _CarouselImagesState();
+}
+
+class _CarouselImagesState extends State {
+ int pageIndex = 0;
+
+ @override
+ Widget build(BuildContext context) {
+ return SizedBox(
+ height: 250,
+ child: Stack(
+ children: [
+ CarouselSlider(
+ options: CarouselOptions(
+ onPageChanged: (index, _) => setState(() => pageIndex = index),
+ ),
+ items: List.generate(
+ widget.images.length,
+ (index) => Padding(
+ padding: const EdgeInsets.only(top: 15),
+ child: ExerciseImageWidget(
+ image: widget.images[index],
+ height: 260,
+ ),
+ ),
+ ),
+ ),
+ Row(
+ crossAxisAlignment: CrossAxisAlignment.center,
+ mainAxisAlignment: MainAxisAlignment.center,
+ spacing: 5,
+ children: List.generate(
+ widget.images.length,
+ (index) => AnimatedContainer(
+ duration: const Duration(milliseconds: 500),
+ height: 8,
+ width: 8,
+ decoration: BoxDecoration(
+ color: pageIndex == index ? Colors.black : Colors.black26,
+ shape: BoxShape.circle,
+ ),
+ ),
+ ),
+ ),
+ ],
+ ),
+ );
+ }
+}