Home > other >  FutureBuilder with model class is not displaying any data on the screen
FutureBuilder with model class is not displaying any data on the screen

Time:04-19

I am trying to display Json data (xml file converted in json thanks to xml2json package) , the data display correctly in the terminal but not at all in the screen (just the circular Progres indicator)

I followed the instructions on this site BezKoder but i don't know where the problem is.

I am a beginner thanks for your help.

Model Class

class Contact {
  String _category;
  String _email;
  Image _image;

  Contact(this._category, this._email, this._image);
  factory Contact.fromJson(dynamic json) {
    return Contact(json["category"] as String, json["email"] as String, Image.fromJson(json["image"]));
  }
  @override
  String toString() {
    return '{ ${this._category}, ${this._email}, ${this._image} }';
  }

  get category => this._category;
  get email => this._email;
  get image => this._image;
}

class Image {
  String _link;
  String _description;
  String _type;

  Image(this._link, this._description , this._type);
  factory Image.fromJson(dynamic json) {
    return Image(json["link"] as String, json["description"] as String, json["type"] as String);
  }
  @override
  String toString() {
    return '{ ${this._link}, ${this._description},${this._type} }';
  }

  get link => this._link;
  get description => this._description;
  get type => this._type;
}

Main.dart

  Future<List<Contact>> getContactsFromXML(BuildContext context) async {
    final Xml2Json xml2Json = Xml2Json();

    String xmlString = await DefaultAssetBundle.of(context)
        .loadString("assets/data/contact.xml");

    xml2Json.parse(xmlString);
    var jsonString = xml2Json.toParker();
    var values = jsonDecode(jsonString);

    print('values : ${values}');
    //values : {data: {category: projet, email: [email protected], image: {link: http://image.com/myimage.jpg, description: my image, type: JPG}}}
    print(values.runtimeType);
    //_InternalLinkedHashMap<String, dynamic>
    return values;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: getContactsFromXML(context),
        builder: (context, data) {
          if (data.hasData) {
            var items = data.data as List<Contact>;
            //Contact items = Contact.fromJson((data.data));
            return Container(
              margin: const EdgeInsets.only(top: 100.0),
              child: Column(
                children: [
                  Text('items : ${items}'),
                  // Text('items : ${items[0].category}'),
                ],
              ),
            );
          } else {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
        },
      ),
    );
  }
}

CodePudding user response:

try this:

body: FutureBuilder(
          future: "you Future Data here"
          builder: (ctx, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const Center(child: CircularProgressIndicator());
            } else if (snapshot.error != null) {
              return const Center(child: Text('an error occured!'));
            } else {
              return do your code here 
                },
              );
            }
          },
        )

CodePudding user response:

Ok I have found the solution, the code below.

xml file

<data>
<category>projet</category>
<email>[email protected]</email>
<image>
    <link>http://image.com/myimage.jpg</link>
    <description>my image</description>
    <type>JPG</type>
</image>
</data>

Model Class

class Contact {
  String _category;
  String _email;
  Image _image;

  Contact( this._category, this._email, this._image);

  factory Contact.fromJson(Map<String, dynamic> json){
    return Contact(
       json['category'],
       json['email'],
       Image.fromJson(json["image"])
    );
  }

  get category => this._category;
  get email => this._email;
  get image => this._image;
}

class Image {
  String _link;
  String _description;
  String _type;

  Image(this._link, this._description , this._type);

  factory Image.fromJson(Map<String,dynamic> json) {
    return Image(
        json["link"] ,
        json["description"] ,
        json["type"] );
  }

  get link => this._link;
  get description => this._description;
  get type => this._type;
}

Main

class _MyHomePageState extends State<MyHomePage> {
  Future<Map<String, dynamic>> getContactsFromXML(BuildContext context) async {
    final Xml2Json xml2Json = Xml2Json();
    String xmlString = await DefaultAssetBundle.of(context).loadString("assets/data/contact.xml");
    xml2Json.parse(xmlString);
    String jsonString = xml2Json.toParker();

    Map<String, dynamic> values = jsonDecode(jsonString);

    print('values : ${values}');
    print(values.runtimeType);

    return values['data'];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder(
        future: getContactsFromXML(context),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          } else if (snapshot.error != null) {
            return const Center(child: Text('an error occured!'));
          } else {
            var items = snapshot.data;

            Map<String, dynamic> map = items as Map<String, dynamic>;
            Contact user = Contact.fromJson(map);

            return Container(
              margin: const EdgeInsets.only(top: 100.0),
              child: Column(
                children: [
                  Text('Value: ${user.category}'),
                  Text('Value: ${user.email}'),
                  Text('Value: ${user.image.link}'),
                  Text('Value: ${user.image.description}'),
                  Text('Value: ${user.image.type}'),
                ],
              ),
            );
          }
        },
      ),
    );
  }
}
  • Related