如何从动态 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),
              )
          ),
        );
  }



}

使用的插件是

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

How to make a fullscreen image, from dynamic Flutter list?

image

fullscreen

flutter