将所选信息发送到下一个屏幕时出现问题

Question

我正在尝试在颤振中构建一个 pokedex 应用程序。目前，我已经创建了第一个屏幕，其中包含所有 151 个口袋妖怪、它们的图像、名称和来自 json api 调用的 #。我正在尝试制作这样的功能：当您从第一个屏幕点击特定的口袋妖怪时，会出现一个新屏幕，其中包含有关您点击的口袋妖怪的更多详细信息。目前在设置我的导航以携带该信息时遇到困难。

这是我的项目

import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';
Map _data;
List _pokemon = [];
void main() async {
  _data = await fetchData();
  _pokemon = _data['pokemon'];
  runApp(
    MaterialApp(
      title: 'Poke App',
      home: new HomePage(),
      debugShowCheckedModeBanner: false,
    ),
  );
}
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();
    fetchData();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Poke App'),
          centerTitle: true,
          backgroundColor: Colors.cyan,
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          backgroundColor: Colors.cyan,
          child: Icon(Icons.search),
        ),
        body: GridView.count(
          crossAxisCount: 2,
          children: List.generate(_pokemon.length, (index) {
            return Padding(
              padding: const EdgeInsets.fromLTRB(1.0, 5.0, 1.0, 5.0),
              child: InkWell(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => new PokeDetails(_pokemon[index]
                          ),
                    ),
                  );
                },
                child: Card(
                  child: Column(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(bottom: 10.0),
                        child: Container(
                          height: 100.0,
                          width: 100.0,
                          decoration: BoxDecoration(
                            image: DecorationImage(
                              image: NetworkImage('${_pokemon[index]['img']}'),
                            ),
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.only(bottom: 2.0),
                        child: Text(
                          '${_pokemon[index]['name']}',
                          style: TextStyle(
                              fontSize: 16.0,
                              fontFamily: 'Chivo',
                              fontStyle: FontStyle.italic),
                        ),
                      ),
                      Text(
                        '${_pokemon[index]['num']}',
                        style: TextStyle(
                            fontFamily: 'Indie Flower',
                            fontWeight: FontWeight.w400,
                            fontSize: 20.0),
                      )
                    ],
                  ),
                ),
              ),
            );
          }),
        ));
  }
}
Future<Map> fetchData() async {
  String url =
      "https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json";
  http.Response response = await http.get(url);
  return json.decode(response.body);
}
class PokeDetails extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.cyan,
      appBar: AppBar(
        title: Text('${_pokemon[index]['name']}'),
        centerTitle: true,
        backgroundColor: Colors.cyan,
      ),
    );
  }
}

我希望正确的口袋妖怪出现在屏幕 2(口袋妖怪详细信息(上，但我还没有能够实现这一目标

Answer 1

我认为

您可能会从阅读更多有关颤振的文档中受益。不过，为了让您继续前进，您的 PokeDetails 类无法知道在您发送口袋妖怪数据时要寻找什么......您应该创建一个口袋妖怪类，以便您可以将 api 结果映射到更容易使用的东西。然后，您可以执行以下操作：

class PokeDetails extends StatelessWidget{
    final Pokemon pokemon;
PokeDetails({
    @required this.pokemon
});
//now display the pokemon details
}

旁注，您需要避免使用这些全局变量和函数(例如 fetchData、_data 和 _pokemon(。这些应该在他们自己的类中。也许是一个包含您的获取函数以及您收到的数据映射的类。这是弄湿脚的最低要求。祝您编码愉快！