How to Build a Full-Screen Photo Gallery in Flutter (Full Code + Preview)

import 'package:flutter/material.dart';

/// StyleCart — Photo Gallery.
///
/// A full-screen, zoomable image carousel for one product: swipeable pages on a
/// dark canvas with pinch-to-zoom, a page counter, a share action and a
/// thumbnail strip that tracks and jumps to the active photo.
///
/// Self-contained per CONVENTIONS.md: pure Flutter, bundled Manrope, inline
/// tokens, own dark theme + SafeArea, bundled webp photos. Exposes callbacks
/// only; the registry wires navigation.
class EcomProductGalleryScreen extends StatefulWidget {
  const EcomProductGalleryScreen({
    super.key,
    this.onBack,
    this.onShare,
  });

  final VoidCallback? onBack;
  final VoidCallback? onShare;

  @override
  State<EcomProductGalleryScreen> createState() =>
      _EcomProductGalleryScreenState();
}

class _EcomProductGalleryScreenState extends State<EcomProductGalleryScreen> {
  static const String _font = 'Manrope';
  static const Color _bg = Color(0xFF101010);
  static const Color _brand = Color(0xFFFF385C);

  static const String _dir = 'lib/screens/ecommerce/ecom_product_gallery/images';
  static const List<String> _photos = <String>[
    'p01.webp',
    'p02.webp',
    'p03.webp',
    'p04.webp',
    'p05.webp',
  ];

  final PageController _pager = PageController();
  int _page = 0;

  @override
  void dispose() {
    _pager.dispose();
    super.dispose();
  }

  void _jump(int i) {
    _pager.animateToPage(i,
        duration: const Duration(milliseconds: 280), curve: Curves.easeOut);
  }

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData.dark(useMaterial3: true),
      child: Scaffold(
        backgroundColor: _bg,
        body: SafeArea(
          child: Column(
            children: <Widget>[
              _topBar(),
              Expanded(
                child: PageView.builder(
                  controller: _pager,
                  itemCount: _photos.length,
                  onPageChanged: (int i) => setState(() => _page = i),
                  itemBuilder: (BuildContext context, int i) {
                    return InteractiveViewer(
                      minScale: 1,
                      maxScale: 4,
                      child: Center(
                        child: Image.asset('$_dir/${_photos[i]}',
                            fit: BoxFit.contain),
                      ),
                    );
                  },
                ),
              ),
              _thumbs(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _topBar() {
    return Padding(
      padding: const EdgeInsets.fromLTRB(8, 4, 16, 4),
      child: Row(
        children: <Widget>[
          IconButton(
            onPressed: widget.onBack,
            icon: const Icon(Icons.close_rounded, size: 24, color: Colors.white),
          ),
          Expanded(
            child: Text(
              '${_page + 1} / ${_photos.length}',
              textAlign: TextAlign.center,
              style: const TextStyle(
                fontFamily: _font,
                fontSize: 15,
                fontWeight: FontWeight.w700,
                color: Colors.white,
              ),
            ),
          ),
          IconButton(
            onPressed: widget.onShare,
            icon: const Icon(Icons.ios_share_rounded,
                size: 22, color: Colors.white),
          ),
        ],
      ),
    );
  }

  Widget _thumbs() {
    return Container(
      height: 88,
      padding: const EdgeInsets.symmetric(vertical: 14),
      child: ListView.separated(
        scrollDirection: Axis.horizontal,
        padding: const EdgeInsets.symmetric(horizontal: 16),
        itemCount: _photos.length,
        separatorBuilder: (_, _) => const SizedBox(width: 10),
        itemBuilder: (BuildContext context, int i) {
          final bool on = i == _page;
          return GestureDetector(
            onTap: () => _jump(i),
            child: Container(
              width: 50,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                border: Border.all(
                  color: on ? _brand : Colors.white24,
                  width: on ? 2 : 1,
                ),
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(8),
                child: Image.asset('$_dir/${_photos[i]}', fit: BoxFit.cover),
              ),
            ),
          );
        },
      ),
    );
  }
}