扑扑的英雄小部件名称未定

Question

I'm trying to work with hero widget .. every thing working fine.. my problem the tag for hero should be unique .. for the main scaffold i can make it unique by using the id from my api .. but i can't pass this id to the second Scaffold ... it become undefined .. how i can defined it ,,,

My Code is

import 'package:flutter/material.dart';
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:json/add.dart';

Future<List> getData() async {
String url = 'http://192.168.0.57:4000/api/contacts';
http.Response response = await http.get(url);
return json.decode(response.body);
}

List data;

void main() async {
data = await (getData());
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
routes: <String, WidgetBuilder>{
'/Add': (BuildContext context) => new Add(),
},
home: HomePage(),
);
}
}

class HomePage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return HomePageState();
}
}

class HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new MaterialApp(
title: "Test",
home: new Scaffold(
appBar: AppBar(
centerTitle: true,
title: new Text("Chat"),
),
body: new Center(
child: new ListView.builder(
itemCount: data.length,
itemBuilder: (BuildContext context, int position) {
return new ListTile(
title: new Text('${data[position]['name']}'),
subtitle: new Text('${data[position]['email']}'),
leading: new InkWell(
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (BuildContext context) {
return HeroPage();
}));
},
child: Hero(
tag: "${data[position]['id']}",
child: new CircleAvatar(
child: new Text("${data[position]['name'][0]}"),
),
),
),
onTap: () {},
);
}),
),
),
);
}
}

class HeroPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return HeroPageState();
}
}

class HeroPageState extends State<HeroPage> {
@override
Widget build(BuildContext context) {
// TODO: implement build
return new Scaffold(
appBar: AppBar(),
body: Hero(
tag: "${data[position]['id']}",
child: new Container(
color: Colors.blueAccent,
),
),
);
}
}

Answer 1

You can Pass the Position(Int) with help of Class Constructors.

 class HeroPage extends StatefulWidget {

  final int position;
  final List data;
  HeroPage({this.position,this.data});


  @override
  State<StatefulWidget> createState() {
// TODO: implement createState
    return HeroPageState();
  }
}

class HeroPageState extends State<HeroPage> {
  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return new Scaffold(
      appBar: AppBar(),
      body: Hero(
        tag: "${widget.data[widget.position]['id']}",
        child: new Container(
          color: Colors.blueAccent,
        ),
      ),
    );
  }

}

Call the page like in your InkWell onTap: :

  Navigator.push(context,
  MaterialPageRoute(builder: (BuildContext context) {
  return HeroPage(position: position,data: data);

Answer 2

在另一页中，尝试将英雄包装到ListView.builder ，但诀窍只是在itemCount参数中设置1 ，这样，您就可以操作以仅显示一个并获取正确的标签