title: How to add utf8 decoder to solve the problem of Garbled characters in flutter http request?
body: <p>I use this topology model to parse Json data. The data become garbled when I receive Chinese characters. </p>
  
  <p>I have tried to add utf8.decode like</p>
  
  <pre><code>List&lt;Client&gt; clientFromJson(String str) =&gt; List&lt;Client&gt;.from(json.decode(utf8.decode(str)).map((x) =&gt; Client.fromJson(x)));
  </code></pre>
  
  <p>but the IDE tell me that "The argument type 'String' can't be assigned to the parameter type 'List&lt; int >' ".</p>
  
  <p>What should I do to add utf8 decoder in the model?</p>
  
  <pre><code>///topology.dart
  
  // To parse this JSON data, do
  //
  //     final client = clientFromJson(jsonString);
  //     final topology = topologyFromJson(jsonString);
  
  import 'dart:convert';
  
  List&lt;Client&gt; clientFromJson(String str) =&gt; List&lt;Client&gt;.from(json.decode(str).map((x) =&gt; Client.fromJson(x)));
  
  String clientToJson(List&lt;Client&gt; data) =&gt; json.encode(List&lt;dynamic&gt;.from(data.map((x) =&gt; x.toJson())));
  
  List&lt;Topology&gt; topologyFromJson(String str) =&gt; List&lt;Topology&gt;.from(json.decode(str).map((x) =&gt; Topology.fromJson(x)));
  
  String topologyToJson(List&lt;Topology&gt; data) =&gt; json.encode(List&lt;dynamic&gt;.from(data.map((x) =&gt; x.toJson())));
  
  class Topology {
    String location;
    String mode;
    String macAddress;
    String ipAddress;
    String downloadSpeed;
    String downloadSpeedUnit;
    String uploadSpeed;
    String uploadSpeedUnit;
    List&lt;Client&gt; client;
  
    Topology({
      this.location,
      this.mode,
      this.macAddress,
      this.ipAddress,
      this.downloadSpeed,
      this.downloadSpeedUnit,
      this.uploadSpeed,
      this.uploadSpeedUnit,
      this.client,
    });
  
    factory Topology.fromJson(Map&lt;String, dynamic&gt; json) =&gt; Topology(
      location: json["location"],
      mode: json["mode"],
      macAddress: json["macAddress"],
      ipAddress: json["ipAddress"],
      downloadSpeed: json["downloadSpeed"],
      downloadSpeedUnit: json["downloadSpeedUnit"],
      uploadSpeed: json["uploadSpeed"],
      uploadSpeedUnit: json["uploadSpeedUnit"],
      client: List&lt;Client&gt;.from(json["client"].map((x) =&gt; Client.fromJson(x))),
    );
  
    Map&lt;String, dynamic&gt; toJson() =&gt; {
      "location": location,
      "mode": mode,
      "macAddress": macAddress,
      "ipAddress": ipAddress,
      "downloadSpeed": downloadSpeed,
      "downloadSpeedUnit": downloadSpeedUnit,
      "uploadSpeed": uploadSpeed,
      "uploadSpeedUnit": uploadSpeedUnit,
      "client": List&lt;dynamic&gt;.from(client.map((x) =&gt; x.toJson())),
    };
  }
  
  class Client {
    String hostname;
    String macAddress;
    String ipAddress;
    String deviceType;
    String connectedNebula;
    String connectionType;
    String connectTime;
  
    Client({
      this.hostname,
      this.macAddress,
      this.ipAddress,
      this.deviceType,
      this.connectedNebula,
      this.connectionType,
      this.connectTime,
    });
  
    factory Client.fromJson(Map&lt;String, dynamic&gt; json) =&gt; Client(
      hostname: json["hostname"],
      macAddress: json["macAddress"],
      ipAddress: json["ipAddress"],
      deviceType: json["deviceType"],
      connectedNebula: json["connectedNebula"],
      connectionType: json["connectionType"],
      connectTime: json["connectTime"],
    );
  
    Map&lt;String, dynamic&gt; toJson() =&gt; {
      "hostname": hostname,
      "macAddress": macAddress,
      "ipAddress": ipAddress,
      "deviceType": deviceType,
      "connectedNebula": connectedNebula,
      "connectionType": connectionType,
      "connectTime": connectTime,
    };
  }
  </code></pre>
  
  <p>//main.dart</p>
  
  <pre><code>import 'package:flutter/material.dart';
  import 'package:flutter/services.dart';
  
  void main() =&gt; runApp(MyApp());
  
  class MyApp extends StatelessWidget {
  
    // This widget is the root of your application.
    @override
    Widget build(BuildContext context) {
  
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
      ]); 
      return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Topology',
        theme: ThemeData(),
        home: Home(),
      );
    }
  }
  
  class Home extends StatefulWidget {
    final String title;
  
    const Home({Key key, this.title}) : super(key: key);
  
    @override
    _HomeState createState() =&gt; _HomeState();
  }
  
  class _HomeState extends State&lt;Home&gt; {
    var topologies = const [];
  
    Future loadTopologyList() async {
      SharedPreferences prefs = await SharedPreferences.getInstance();
      String managementPassword = prefs.getString("management_password");
      String username = 'admin';
      String basicAuth =
          'Basic ' + base64Encode(utf8.encode('$username:$managementPassword'));
      final String url ="some url";
      bool trustSelfSigned = true;
      HttpClient httpClient = HttpClient()
        ..badCertificateCallback =
        ((X509Certificate cert, String host, int port) =&gt; trustSelfSigned);
      IOClient ioClient = IOClient(httpClient);
  
      final response = await ioClient.get(url,
        headers: &lt;String, String&gt;{'authorization': basicAuth},
      );
      ioClient.close();
      String content = response.body;
      setState(() {
        topologies = topologyFromJson(content);
      });
    }
  
    void initState() {
      loadTopologyList();
      super.initState();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        backgroundColor: Color(0xFFFAFAFA),
        appBar: AppBar(),
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: &lt;Widget&gt;[
            Padding(
              padding: const EdgeInsets.fromLTRB(17, 0, 0, 0),
              child: Text('Topology'),
            ),
            Expanded(
              child: ListView.separated(
                itemCount: topologies.length,
                separatorBuilder: (context, index) =&gt; Divider(),
                itemBuilder: (BuildContext context, int index) {
                  Topology topology = topologies[index]; 
  
                  return ListTile(
                    title: Text(
                      topology.location,
                    ),
                    leading: CircleAvatar(
                        child: Image.asset(
                            "assets/drawable-mdpi/app_icon_circle.png")),
                    onTap: () {
                    },
                  );
                },
              ),
            ),
          ],
        ),
      );
    }
  }
  </code></pre>