Как сделать полноэкранное изображение из списка Dynami c Flutter?

Question

Впервые на Flutter, моя проблема в том, что у меня есть список с динамическими c изображениями из папки модели с фиксированной шириной и высотой. Все, что я хочу, это сделать изображения полноэкранными с помощью функций onTap или onPressed. Я пытался с героем без успеха.

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

Я рекомендую добавить 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

Answer 2

Если вы хотите заполнить все, тогда вам нужно использовать изображение внутри украшения контейнера.

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
          ),
        ),
      ),