Search code examples
jsonfluttertransfer

Flutter transferring Json data to another page


Hey I have the problem that I want to transfer the data from a ListTile which was pressed. So i can read the data from a Json file on another page.

I have already written in the code where I want to get something where. I hope you know what I mean if not just ask under here. I always look in and answer. I've been through all sorts of sites but none of them helped me. So here now. You are my last hope

So hier is my Code

class PokemonDB extends StatefulWidget {
  _PokemonDB createState() => _PokemonDB();
}

class _PokemonDB extends State<PokemonDB> {

  List pokemon = const [];

  Future loadPokemon() async {
    var content = await rootBundle.loadString("json/pokemon.json");
    var collection = json.decode(content);

    setState(() {
      pokemon = collection;
    });
  }


  void initState() {
    loadPokemon();
    super.initState();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 0,
        backgroundColor: Colors.black,
      ),
      body: ListView.separated(
        separatorBuilder: (BuildContext context, int index) => Divider(),
        itemCount: pokemon.length,
        itemBuilder: (BuildContext context, int index) {
          var pokemonn = pokemon[index];
          return Container(
            child: ListTile(
              onTap: () async{
                      Map name = await Navigator.push(
                        context,
                        MaterialPageRoute<Map>(builder: (BuildContext context) {
                         return ShinyHuntCounter();   <-- from here I want the data on which click was
                        },
                        ),);
                    },
              isThreeLine: false,
              title: Text(
                pokemonn['name'],
                style: TextStyle(
                    fontFamily: 'pokemon',
                    fontSize: 30,
                    color: Colors.black
                ),
              ),
              leading: Image(image: AssetImage(pokemonn['image'])),
            ),
            decoration:
            BoxDecoration(
              borderRadius: BorderRadius.all(Radius.circular(50)),
              color: Color.fromRGBO(234, 180, 59, 1),
            ),
          );
        },
      ),
    );
  }
}

Solution

  • I think it would be simple like this,

    In your ShinyHuntCounter class,

    class ShinyHuntCounter extends StatefulWidget {
      final String pokemonn;
      const ShinyHuntCounter(this.pokemonn);
    
      @override
      ShinyHuntCounterState createState() => ShinyHuntCounterState();
    }
    
    class ShinyHuntCounterState extends State<ShinyHuntCounter> {
      @override
      Widget build(BuildContext context) {
        return Text(widget.pokemonn); // Here you direct access using widget
      }
    }
    

    and for passing the data, do something like this,

    MaterialPageRoute<Map>(builder: (BuildContext context) {
                             return ShinyHuntCounter(pokemonn['name']); }, )
    

    Hope that suits your case.