null recetion, always get null

Question

I try to get data from in my first page in flutter. I get data well, but when i want to get name from on this data, i always get null.

What happened?

This is my First page(here every things are ok)

import 'dart:convert';

import 'package:api_app/model/cinema.dart';
import 'package:api_app/model/villes.dart';
import 'package:api_app/pages/movies.dart';
import 'package:api_app/services/http_service_local.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import '../configGlobals/globalparams.dart';

class Mycinema extends StatefulWidget {
  const Mycinema({super.key});

  @override
  State<Mycinema> createState() => _MycinemaState();
}

class _MycinemaState extends State<Mycinema> {
  HttpServiceLocal apiService = HttpServiceLocal(); // Instancier le service API
  //objet Map
  Map<String, dynamic> villeData = {};

  @override
  void initState() {
    super.initState();
    loadVille();
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Cinema", style: TextStyle(color: Colors.white),),backgroundColor: Colors.purpleAccent,),
      body:Center(
        child: villeData.isEmpty
            ? const CircularProgressIndicator()
            : ListView.builder(
              itemCount: (villeData.length ?? 0),
              itemBuilder: (context, index){
                String key = villeData.keys.elementAt(index);
                var v = villeData[key]; // Accéder aux données de la ville via la clé
                return Card(
                  color: Colors.purpleAccent,
                  child:Padding(
                      padding: const EdgeInsets.all(8.0),
                    child: ElevatedButton.icon(
                        onPressed:(){
                            Navigator.push(context, MaterialPageRoute(builder: (ctx)=>Movies(villeData)));
                        },
                        label: Text(v['name'] ?? 'Pas de titre')),
                  ),
                  );
              }),
      )
      );
  }

void loadVille() async {
  QuerySnapshot querySnapshot = await apiService.fetchVille(); // Appel API GET
  // Boucler à travers les documents et les stocker dans un objet Map
  Map<String, dynamic> tempData = {};
  for (var doc in querySnapshot.docs) {
    tempData[doc.id] = doc.data(); // Stocke les données dans un Map
  }
  // Mise à jour de l'état avec les données récupérées
  setState(() {
    villeData = tempData;
    print("donnée de la ville ${villeData}");
    });
  }
}

in my second page I always get data, but no name fron this data

import 'package:flutter/material.dart';

class Movies extends StatefulWidget {
  dynamic villeData;
  Movies(this.villeData);



  @override
  State<Movies> createState() => _MoviesState();
}

class _MoviesState extends State<Movies> {

  @override
  Widget build(BuildContext context) {

    print("reception ${widget.villeData} ");
    print('name ${widget.villeData['name'] } ');

    return Scaffold(
      appBar: AppBar(title: Text("Cinema de ${widget.villeData["name"]} ", style:  const TextStyle(color: Colors.white),),backgroundColor: Colors.purpleAccent,),
      body: Center(
        child: Text("List cinema"),
      ),
    );
  }
}

my console

I/flutter (13932): reception {0000344455022492: {cinemas: null, altitude: 45.78, latitude: 43.67, name: Cameroun, id: 0000344455022492, longitude: 45.4}, 00003444550226712: {altitude: 45.78, cinemas: null, latitude: 43.67, name: Maroc, id: 00003444550226712, longitude: 45.4}, 122334: {cinemas: null, altitude: 45.78, latitude: 43.67, name: Paris, id: 122334, longitude: 45.4}, 122335: {altitude: 45.78, cinemas: null, latitude: 43.67, name: RDCongo, id: 122335, longitude: 45.4}, vl00003444550223119: {altitude: 45.78, cinemas: null, latitude: 43.67, name: Kinshasa, id: vl00003444550223119, longitude: 45.4}}

I/flutter (13932): name null

Answer 1

Thank you very much, I just fixed the problem

Normaly, i should send only one data for one city, fot to get the name

onPressed: () {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (ctx) => Movies(v), // Passe uniquement les données de la ville `v`
    ),
  );
},

in the second page

class Movies extends StatefulWidget {
  final Map<String, dynamic> villeData;
  Movies(this.villeData);

  @override
  State<Movies> createState() => _MoviesState();
}

class _MoviesState extends State<Movies> {
  @override
  Widget build(BuildContext context) {
    print("reception ${widget.villeData} ");
    print('name ${widget.villeData['name']} ');

    return Scaffold(
      appBar: AppBar(
        title: Text("Cinéma de ${widget.villeData["name"]} ",
            style: const TextStyle(color: Colors.white)),
        backgroundColor: Colors.purpleAccent,
      ),
      body: Center(
        child: Text("Liste des cinémas de ${widget.villeData["name"]}"),
      ),
    );
  }
}

Explanation Mycinema Page: Now when you press a button, you only pass the data of a specific city to the next page. Movies Page: You receive a Map object that contains the information of a city, and you can directly access cityData['name']. Expected Result When you select a city in Mycinema, the Movies page will display the correct city name and you will no longer have null in the console