在点击颤动时显示全屏图像（英雄）

Question

我有使用network to local file显示的图像

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

我想添加功能，在点击图像后，我可以以全屏模式显示此图像。如何使用 hero 小部件？

在上面的截图中，添加时高亮元素发生错误

                       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',
        ),
      ),
    ),
  ),
);
}
}