twong-flutter/lib/widgets/photo_view.dart

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:cached_network_image/cached_network_image.dart';

import 'package:twong/utils/index.dart';

class PhotoListData {
  final int index;
  final List<String> imageList;
  PhotoListData(this.index, this.imageList);
}

class PhotoViewPage extends StatefulWidget {
  final PhotoListData data;
  PhotoViewPage(this.data);

  @override
  State<StatefulWidget> createState() {
    return _PhotoViewPageState();
  }
}

class _PhotoViewPageState extends State<PhotoViewPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(child: Stack(
        children: [
          Swiper(
            loop: false,
            autoplay: false,
            index: widget.data.index,
            itemBuilder: _buildSlider,
            itemCount: widget.data.imageList.length,
            pagination: SwiperPagination(),
            autoplayDisableOnInteraction: true,
          ),
          Positioned(
              top: 10.px,
              left: 10.px,
              child: InkWell(
                highlightColor: Colors.transparent,
                onTap: () { Navigator.pop(context); },
                child: Container(
                  width: 30.px,
                  height: 30.px,
                  decoration: BoxDecoration(
                      color: Color.fromARGB(123, 0, 0, 0),
                      borderRadius: BorderRadius.circular(20.px)
                  ),
                  child: Icon(
                      Icons.chevron_left, color: Colors.white, size: 30.px),
                ),
              )
          ),
        ],
      )
      ),
    );
  }

  Widget _buildSlider(BuildContext context, int index) {
    return CachedNetworkImage(
      fit: BoxFit.contain,
      imageUrl: widget.data.imageList[index],
      placeholder: (BuildContext context, String str) {
        return Center(child: CircularProgressIndicator());
      },
    );
  }
}