如何为另一个页面中的“轮播”的第一个元素设置英雄小部件的动画？

如何解决如何为另一个页面中的“轮播”的第一个元素设置英雄小部件的动画？

我正试图将Hero Widget和Carousel集成在一起。
我有一个产品列表，该产品的图像通过onTap通过Hero Widget动画显示到详细信息页面。

我已经能够成功实现英雄小部件，而无需使用转盘，但是在详细信息页面上，我希望能够使用转盘查看同一产品的不同图片。
像下面的图片一样，如何使轮播上的第一项具有与页面上相同的英雄标签？

第1页

GestureDetector(
                  onTap: () {
                    Navigator.push(
                      context,MaterialPageRoute(
                          builder: (context) => DetailsPage(
                              url: widget.url,title: widget.url,index: widget.index)),);
                  },child: Hero(
                    tag: "product-image+${widget.index}",child: Container(
                      padding: EdgeInsets.all(16.0),decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(10)),child: FadeInImage.memoryNetwork(
                        placeholder: kTransparentImage,image:
                            'https://i.dlpng.com/static/png/6838599_preview.png',),))),

详细信息页面

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';

class DetailsPage extends StatefulWidget {
  final String url;
  final String title;
  final int index;
  DetailsPage({this.url,this.title,this.index});

  @override
  _DetailsPageState createState() => _DetailsPageState();
}

class _DetailsPageState extends State<DetailsPage> {
  List imgList = [
    'https://i.dlpng.com/static/png/6838599_preview.png','https://i.dlpng.com/static/png/6838599_preview.png',];
  int _current = 0;

  List<T> map<T>(List list,Function handler) {
    List<T> result = [];
    for (var i = 0; i < list.length; i++) {
      result.add(handler(i,list[i]));
    }
    return result;
  }

  @override
  Widget build(BuildContext context) {
    final double height = MediaQuery.of(context).size.height;
    return Scaffold(
      backgroundColor: Theme.of(context).canvasColor,appBar: AppBar(
        title: Center(
          child: Text(
            'Details',style: TextStyle(
                fontFamily: 'OpenSansLight',fontSize: 26,color: Theme.of(context).textTheme.headline1.color),elevation: 0,backgroundColor: Theme.of(context).canvasColor,leading: IconButton(
            icon: Icon(Icons.arrow_back,color: Theme.of(context).iconTheme.color),onPressed: () {
              Navigator.of(context).pop();
            }),body: Container(
        height: height,child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Hero(
                tag: "product-image+${widget.index}",child: Container(
                  padding: EdgeInsets.all(8.0),height: 200.0,alignment: Alignment.topCenter,decoration: BoxDecoration(
                      image: DecorationImage(
                          image: NetworkImage(
                            widget.url ??
                                'https://i.dlpng.com/static/png/6838599_preview.png',fit: BoxFit.contain)),CarouselSlider(
                options: CarouselOptions(
                    height: 200.0,initialPage: 0,reverse: false,autoPlay: false,enableInfiniteScroll: false,scrollDirection: Axis.horizontal,onPageChanged: (index,fn) {
                      setState(() {
                        _current = index;
                      });
                    }),items: imgList.map((imgUrl) {
                  return Builder(
                    builder: (BuildContext context) {
                      return Container(
                        width: MediaQuery.of(context).size.width,margin: EdgeInsets.symmetric(horizontal: 5.0),decoration: BoxDecoration(color: Theme.of(context).cardColor,borderRadius: BorderRadius.circular(10),child: 
                        
                        Image.network(
                          imgUrl,fit: BoxFit.cover,);
                    },);
                }).toList(),SizedBox(height: 10),Row(
                mainAxisAlignment: MainAxisAlignment.center,children: map<Widget>(imgList,(index,url) {
                  return Container(
                    width: 30.0,height: 2.0,margin:
                        EdgeInsets.symmetric(vertical: 10.0,horizontal: 4.0),decoration: BoxDecoration(
                      shape: BoxShape.rectangle,borderRadius: BorderRadius.circular(10.0),color:
                          _current == index ? Colors.deepPurple : Colors.grey,);
                }),],);
  }
}

解决方法

一个相当愚蠢的问题。我没有做很多思考就做到了。我只是将Hero Widget包装在Carousel滑块上

 Container(
        height: height,child: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(8.0),child: Container(
                  width: MediaQuery.of(context).size.width,margin: EdgeInsets.symmetric(horizontal: 5.0),decoration: BoxDecoration(
                    color: Theme.of(context).cardColor,borderRadius: BorderRadius.circular(10),),child: Column(
                    children: <Widget>[
                      Hero(
                        tag: "product-image+${widget.index}",child: CarouselSlider(
                          options: CarouselOptions(
                              height: 200.0,enlargeCenterPage: true,enlargeStrategy: CenterPageEnlargeStrategy.height,initialPage: 0,reverse: false,autoPlay: false,enableInfiniteScroll: false,scrollDirection: Axis.horizontal,onPageChanged: (index,fn) {
                                setState(() {
                                  _current = index;
                                });
                              }),items: imgList.map((imgUrl) {
                            return Builder(
                              builder: (BuildContext context) {
                                return Image.network(
                                  imgUrl,fit: BoxFit.cover,);
                              },);
                          }).toList(),SizedBox(height: 10),Row(
                        mainAxisAlignment: MainAxisAlignment.center,children: map<Widget>(imgList,(index,url) {
                          return Container(
                            width: 30.0,height: 2.0,margin: EdgeInsets.symmetric(
                                vertical: 10.0,horizontal: 4.0),decoration: BoxDecoration(
                              shape: BoxShape.rectangle,borderRadius: BorderRadius.circular(10.0),color: _current == index
                                  ? Colors.deepPurple
                                  : Colors.grey,);
                        }),],

猜我只是无所畏惧：D