How to Create a Virtual Reality Shopping Experience in FlutterFlow

1// Custom Widget: Product360Viewer
2import 'package:flutter/material.dart';
3import 'package:cached_network_image/cached_network_image.dart';
4
5class Product360Viewer extends StatefulWidget {
6  final List<String> imageUrls;
7  final double width;
8  final double height;
9  const Product360Viewer({
10    super.key,
11    required this.imageUrls,
12    required this.width,
13    required this.height,
14  });
15
16  @override
17  State<Product360Viewer> createState() => _Product360ViewerState();
18}
19
20class _Product360ViewerState extends State<Product360Viewer> {
21  int _currentIndex = 0;
22  double _dragAccumulator = 0;
23
24  @override
25  Widget build(BuildContext context) {
26    return SizedBox(
27      width: widget.width,
28      height: widget.height,
29      child: GestureDetector(
30        onHorizontalDragUpdate: (details) {
31          _dragAccumulator += details.delta.dx;
32          final sensitivity = widget.width /
33            widget.imageUrls.length;
34          if (_dragAccumulator.abs() > sensitivity) {
35            setState(() {
36              if (_dragAccumulator > 0) {
37                _currentIndex = (_currentIndex - 1)
38                  % widget.imageUrls.length;
39              } else {
40                _currentIndex = (_currentIndex + 1)
41                  % widget.imageUrls.length;
42              }
43              if (_currentIndex < 0) {
44                _currentIndex += widget.imageUrls.length;
45              }
46              _dragAccumulator = 0;
47            });
48          }
49        },
50        child: Stack(
51          alignment: Alignment.bottomCenter,
52          children: [
53            CachedNetworkImage(
54              imageUrl:
55                widget.imageUrls[_currentIndex],
56              fit: BoxFit.contain,
57              width: widget.width,
58              height: widget.height,
59            ),
60            Container(
61              padding: const EdgeInsets.all(8),
62              color: Colors.black26,
63              child: const Text(
64                'Swipe to rotate',
65                style: TextStyle(
66                  color: Colors.white,
67                  fontSize: 12),
68              ),
69            ),
70          ],
71        ),
72      ),
73    );
74  }
75}

1// Custom Widget: Product3DViewer
2import 'package:flutter/material.dart';
3import 'package:model_viewer_plus/model_viewer_plus.dart';
4
5class Product3DViewer extends StatelessWidget {
6  final String modelUrl;
7  final double width;
8  final double height;
9  const Product3DViewer({
10    super.key,
11    required this.modelUrl,
12    required this.width,
13    required this.height,
14  });
15
16  @override
17  Widget build(BuildContext context) {
18    return SizedBox(
19      width: width,
20      height: height,
21      child: ModelViewer(
22        src: modelUrl,
23        alt: 'A 3D model of the product',
24        autoRotate: true,
25        cameraControls: true,
26        backgroundColor:
27          const Color.fromARGB(255, 245, 245, 245),
28      ),
29    );
30  }
31}