Показывать полноэкранное изображение при нажатии на дрожание (Герой)

Question

У меня есть изображение, показанное с использованием сети в локальный файл

      Hero(
                           tag: "customWidget",
                           child: Container(
                             width: context.screenWidth / 2,
                             height: context.screenHeight / 4,
                             child: NetworkToLocal(
                               mediaURL: element.payload.uri,
                               mediaType: 'image',
                             ),
                           ),
                         ),

Я хочу добавить функциональность, чтобы после нажатия на изображение я мог отображать это изображение в полноэкранном режиме. Как это можно сделать с виджетом героя?

Answer 1

Вы используете анимацию героя

      import 'package:flutter/material.dart';

void main() => runApp(HeroApp());

class HeroApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
  title: 'Transition Demo',
  home: MainScreen(),
 );
}
}

class MainScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text('Main Screen'),
  ),
  body: GestureDetector(
    onTap: () {
      Navigator.push(context, MaterialPageRoute(builder: (_) {
        return DetailScreen();
      }));
    },
    child: Hero(
      tag: 'imageHero',
      child: Image.network(
        'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',
      ),
    ),
  ),
);
}
}

class DetailScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
  body: GestureDetector(
    onTap: () {
      Navigator.pop(context);
    },
    child: Center(
      child: Hero(
        tag: 'imageHero',
        child: Image.network(
          'https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/1200px-Image_created_with_a_mobile_phone.png',
        ),
      ),
    ),
  ),
);
}
}