如何从动态Flutter列表制作全屏图像？

Question

这里是Flutter的新手，我的问题是我有一个列表，其中包含来自具有固定宽度和高度的模型文件夹的动态图像。我只想使用onTap或onPressed功能使图像全屏显示。我在尝试Hero时没有成功。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../model/events.dart';
import '../styleguide.dart';

class ImagesCarousel extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final event = Provider.of<Events>(context);
    return Column(
      children: <Widget>[
        if (event.galleryImages
            .isNotEmpty) //---------------------------------------GALERY
          Row(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(left: 16.0, top: 16, bottom: 26),
                child: Text(
                  "GALLERIA",
                  style: guestTextStyle,
                ),
              ),
            ],
          ),
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: Row(
            children: <Widget>[
              for (final galleryImagePath in event.galleryImages)
                Container(
                  margin:
                      const EdgeInsets.only(left: 16, right: 16, bottom: 32),
                  child: ClipRRect(
                    borderRadius: BorderRadius.all(Radius.circular(20)),
                    child: Image.asset(
                      galleryImagePath,
                      width: 200,
                      height: 200,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
            ],
          ),
        ),
      ],
    );
  }
}

Answer 1

如果要填充所有内容，则需要在容器装饰中使用图像。

new Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
          image: DecorationImage(
            alignment: Alignment.center,
            image: AssetImage("assets/images/jobs/map-details.png"),
            fit: BoxFit.fill,
           // fit: BoxFit.fitWidth also can use fit: BoxFit.fitHeight
          ),
        ),
      ),

Answer 2

我建议将GestureDetector添加为图像的父级，并在onTap中导航到另一幅全屏图像页面。

    GestureDetector(
        child: YourImage,
        onTap: (){
           Navigator.push(context, MaterialPageRoute(builder: (context) => FullImagePageRoute(imageLink)));
        },
      )

然后您的完整图像页面如下所示

import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';


class FullImagePageRoute extends StatelessWidget{
  String imageDownloadUrl;

  FullImagePageRoute(this.imageDownloadUrl);


  @override
  Widget build(BuildContext context) {


    return Scaffold(
      backgroundColor: Colors.black,
          appBar: AppBar(

          ),
          body: Container(
              child: PhotoView(
                loadingChild: SpinKitWave(
                  size: 50.0,
                  color: Colors.white30,
                ),

                imageProvider: NetworkImage(imageDownloadUrl),
              )
          ),
        );
  }



}

使用的插件是>>

1. flutter_spinkit
2. photo_view