Gallery/lib/full_screen_image_view.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:photo_view/photo_view_gallery.dart';

import 'data_provider/data_provider.dart';
import 'package:photo_view/photo_view.dart';

class FullScreenImageView extends StatefulWidget {
  const FullScreenImageView(
      {Key? key,
      required this.idx,
      required this.items,
      required this.provider})
      : super(key: key);
  final int idx;
  final List<Item> items;
  final DataProvider provider;

  @override
  State<FullScreenImageView> createState() => _FullScreenImageViewState();
}

class _FullScreenImageViewState extends State<FullScreenImageView> {
  late final PageController _controller =
      PageController(initialPage: widget.idx - 1);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.items[widget.idx - 1].name)),
      body: Center(
        child: CallbackShortcuts(
          bindings: {
            const SingleActivator(LogicalKeyboardKey.arrowRight): () =>
                _controller.nextPage(
                    duration: const Duration(milliseconds: 400),
                    curve: Curves.ease),
            const SingleActivator(LogicalKeyboardKey.arrowLeft): () =>
                _controller.previousPage(
                    duration: const Duration(milliseconds: 400),
                    curve: Curves.ease),
          },
          child: Focus(
            autofocus: true,
            child: PhotoViewGallery.builder(
              scrollPhysics: const BouncingScrollPhysics(),
              builder: (BuildContext context, int index) {
                return PhotoViewGalleryPageOptions(
                  imageProvider:
                      widget.provider.getImageProvider(widget.items[index].uri),
                  initialScale: PhotoViewComputedScale.contained,
                  minScale: PhotoViewComputedScale.contained,
                  heroAttributes:
                      PhotoViewHeroAttributes(tag: widget.items[index].name),
                );
              },
              itemCount: widget.items.length,
              loadingBuilder: (context, event) => Center(
                child: SizedBox(
                  width: 20.0,
                  height: 20.0,
                  child: CircularProgressIndicator(
                    value: event == null || event.expectedTotalBytes == null
                        ? null
                        : event.cumulativeBytesLoaded /
                            event.expectedTotalBytes!,
                  ),
                ),
              ),
              backgroundDecoration: const BoxDecoration(color: Colors.white),
              pageController: _controller,
            ),
          ),
        ),
      ),
    );
  }
}