如何在一个扑动的应用程序中解决json对象重复的问题？

Question

I'm trying to fetch json data from a php file hosted on a server and the link of the file is below:

http://www.alkadhum-col.edu.iq/Teachers%20Activities/get.php

I have a problem when i need to display my json data on my app screen it seems that there is one extra object added maybe to the json objects on the server or it might be through the flutter itself. The image is shown below:

How can i solve this problem? and why my font size didn't changed?.

The complete code is below:

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

void main() {
runApp(Workshops());
}

class Workshops extends StatelessWidget {
  @override
  Widget build(BuildContext mycontext) {
    return MaterialApp(
      home:Scaffold(
        appBar: AppBar(
          backgroundColor: Color.fromRGBO( 52, 73, 94, 1.0),
        automaticallyImplyLeading: false, // Don't show the leading button
        title: new Text("PHP with Flutter"),
        ),

        body: PostScreen(),
        )
    );
  }
}    

class PostScreen extends StatefulWidget {
  @override
  _PostScreenState createState() => _PostScreenState();
}

class _PostScreenState extends State<PostScreen> {
  List<Post> _postList = [];

  Future<List<Post>> fetchPost() async {
    final response =
        await http.get('http://www.alkadhum-col.edu.iq/Teachers%20Activities/get.php');

    if (response.statusCode == 200) {
      // If the call to the server was successful, parse the JSON
      List<dynamic> values = new List<dynamic>();
      values = json.decode(response.body);
      print(values);
      if (values.length > 0) {
        for (int i = 0; i < values.length; i++) {
          if (values[i] != null) {
            Map<String, dynamic> map = values[i];
            _postList.add(Post.fromJson(map));
          }
        }
      }

      return _postList;
    } else {
      // If that call was not successful, throw an error.
      throw Exception('Failed to load post');
    }
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Post>>(
      future: fetchPost(),
      builder: (_, AsyncSnapshot<List<Post>> snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        }

        return ListView.builder(
          itemCount: snapshot.data.length,
          itemBuilder: (_, index) {
            dynamic post = snapshot.data[index];
            return Card(
                child: new ListTile(
                  title: new Text(post.name, style: TextStyle(fontSize: 16.0),),
                  subtitle: new Text(post.msg, style: TextStyle(fontSize: 16.0),),
                  trailing: new Text(post.date, style: TextStyle(fontSize: 16.0),),
                ),
            );
          },
        );
      },
    );
  }

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

class Post {
  String name;
  String msg;
  String day;
  String date;

  Post({this.name, this.msg, this.day, this.date});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      name: json['name'],
      msg: json['msg'],
      day: json['day'],
      date:json['date']
    );
  }
}

Answer 1

you can see duplicates because Flutter calls build method multiple times ( https://api.flutter.dev/flutter/widgets/State/build.html )

You can change your code to execute fetchPost on _PostScreenState creation only or just remove all elements before adding new ones.