title: Flutter Http Request remove duplicates from JSON response
body: <p>I have followed the tutorial <a href="https://www.digitalocean.com/community/tutorials/flutter-flutter-http" rel="nofollow noreferrer">https://www.digitalocean.com/community/tutorials/flutter-flutter-http</a> to make an app that sends a get request to an API endpoint and returns a JSON response.</p>
  <p>The JSON response look like this:</p>
  <pre><code>[{&quot;Order&quot;:&quot;order1&quot;,&quot;Driver&quot;:&quot;Driver1&quot;,&quot;Company&quot;:&quot;Company1&quot;,&quot;Address&quot;:&quot;Address1&quot;},{&quot;Order&quot;:&quot;order2&quot;,&quot;Driver&quot;:&quot;Driver1&quot;,&quot;Company&quot;:&quot;Company2&quot;,&quot;Address&quot;:&quot;Address2&quot;},{&quot;Order&quot;:&quot;order3&quot;,&quot;Driver&quot;:&quot;Driver1&quot;,&quot;Company&quot;:&quot;Company3&quot;,&quot;Address&quot;:&quot;Address3&quot;},{&quot;Order&quot;:&quot;order4&quot;,&quot;Driver&quot;:&quot;Driver1&quot;,&quot;Company&quot;:&quot;Cpmpany4&quot;,&quot;Address&quot;:&quot;Address4&quot;},{&quot;Order&quot;:&quot;order5&quot;,&quot;Driver&quot;:&quot;Driver1&quot;,&quot;Company&quot;:&quot;Company5&quot;,&quot;Address&quot;:&quot;Address5&quot;},{&quot;Order&quot;:&quot;order6&quot;,&quot;Driver&quot;:&quot;Driver2&quot;,&quot;Company&quot;:&quot;Company6&quot;,&quot;Address&quot;:&quot;Address6&quot;},{&quot;Order&quot;:&quot;order7&quot;,&quot;Driver&quot;:&quot;Driver2&quot;,&quot;Company&quot;:&quot;Company7&quot;,&quot;Address&quot;:&quot;Address7&quot;},{&quot;Order&quot;:&quot;order8&quot;,&quot;Driver&quot;:&quot;Driver2&quot;,&quot;Company&quot;:&quot;Company8&quot;,&quot;Address&quot;:&quot;Address8&quot;},{&quot;Order&quot;:&quot;order9&quot;,&quot;Driver&quot;:&quot;Driver2&quot;,&quot;Company&quot;:&quot;Company9&quot;,&quot;Address&quot;:&quot;Address9&quot;},{&quot;Order&quot;:&quot;order10&quot;,&quot;Driver&quot;:&quot;Driver2&quot;,&quot;Company&quot;:&quot;Company10&quot;,&quot;Address&quot;:&quot;Address10&quot;},{&quot;Order&quot;:&quot;ord0439506&quot;,&quot;Driver&quot;:&quot;Driver3&quot;,&quot;Company&quot;:&quot;Company11&quot;,&quot;Address&quot;:&quot;Address11&quot;},{&quot;Order&quot;:&quot;ord0439517&quot;,&quot;Driver&quot;:&quot;Driver3&quot;,&quot;Company&quot;:&quot;Company12&quot;,&quot;Address&quot;:&quot;Address12&quot;},{&quot;Order&quot;:&quot;ord0439508&quot;,&quot;Driver&quot;:&quot;Driver3&quot;,&quot;Company&quot;:&quot;Company13&quot;,&quot;Address&quot;:&quot;Address13&quot;}]
  </code></pre>
  <p><strong>http_service.dart</strong></p>
  <pre><code>class HttpService {
  final String postsURL = &quot;https://myapi:8080/getOrders&quot;;
  
  Future&lt;List&lt;Post&gt;&gt; getPosts() async {
    Response res = await get(postsURL);
  
    if (res.statusCode == 200) {
      List&lt;dynamic&gt; body = jsonDecode(res.body);
  
      List&lt;Post&gt; posts = body
        .map(
          (dynamic item) =&gt; Post.fromJson(item),).toList();
        )
        .toList();
  
      return posts;
    } else {
      throw &quot;Can't get posts.&quot;;
    }
   }
  }
  </code></pre>
  <p><strong>posts_model.dart</strong></p>
  <pre><code>import 'package:flutter/foundation.dart';
  
  class Post {
    final String order;
    final String driver;
    final String company;
    final String address;
  
  Post({
    @required this.order,
    @required this.driver,
    @required this.company,
    @required this.address,
  });
  
  factory Post.fromJson(Map&lt;String, dynamic&gt; json) {
    return Post(
      order: json['Order'] as String,
      id: json['Driver'] as String,
      title: json['Company'] as String,
      body: json['Address'] as String,
    );
  }
  }
  </code></pre>
  <p><strong>posts.dart</strong></p>
  <pre><code> class PostsPage extends StatelessWidget {
       final HttpService httpService = HttpService();
  
  
       @override
       Widget build(BuildContext context) {
         return Scaffold(
           appBar: AppBar(
             title: Text(&quot;Orders&quot;),
       ),
          body: FutureBuilder(
          future: httpService.getPosts(),
          builder: (BuildContext context, AsyncSnapshot&lt;List&lt;Post&gt;&gt; snapshot){
        if(snapshot.hasData){
          List&lt;Post&gt; posts = snapshot.data;
  
          return ListView( 
            children: posts
                .map(
                    (Post post) =&gt; ListTile(
                      title: Text(post.driver),
                        trailing: Icon(Icons.keyboard_arrow_right),
                    ),
            )
                .toList(),
          );
        }
  
        return Center(
            child: CircularProgressIndicator());
      },
    ));
  }
  }
  </code></pre>
  <p><strong>main.dart</strong></p>
  <pre><code>void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
        return MaterialApp(
          title: 'HTTP',
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
             primarySwatch: Colors.blue,
       home: PostsPage(),
       );
     }
  }
  </code></pre>
  <p>When the app completes the post request to my API, it will display the drivers as</p>
  <ul>
  <li>Driver 1</li>
  <li>Driver 1</li>
  <li>Driver 1</li>
  <li>Driver 1</li>
  <li>Driver 2</li>
  <li>Driver 2</li>
  <li>Driver 2</li>
  <li>Driver 2</li>
  <li>Driver 3</li>
  <li>Driver 3</li>
  <li>Driver 3</li>
  </ul>
  <p>I want the view to display each driver only once, no duplicates as such</p>
  <ul>
  <li>Driver 1</li>
  <li>Driver 2</li>
  <li>Driver 3</li>
  </ul>
  <p>From research, most say to turn the list into a set and I've tried in <strong>posts.dart</strong> adding a .toSet() to .toList() but the duplicates were still displayed. I've been messing around with this for a bit but still can't figure this out. Any help would be greatly appreciated.</p>