title: Mysql query result in Flutter Widgets
body: <p>Trying to display in Flutter a result I am receiving from my Node.JS server via MySQL query:</p>
  <pre><code>[{&quot;NAME&quot;:&quot;Matematicas&quot;},
  {&quot;NAME&quot;:&quot;Naturales&quot;},
  {&quot;NAME&quot;:&quot;Ciencias Sociales&quot;},
  {&quot;NAME&quot;:&quot;Lenguaje&quot;},
  {&quot;NAME&quot;:&quot;Religion&quot;}]
  </code></pre>
  <p>This is the class I am using in Flutter to handle it:</p>
  <pre><code>class Subject {
    final String name;
  
    Subject({
      required this.name,
    });
  
    factory Subject.fromJson(Map&lt;String, dynamic&gt; json) {
      return Subject(name: json['NAME']);
    }
  }
  </code></pre>
  <p>This is the method from which I obtain the data:</p>
  <pre><code>Future&lt;Subject&gt; fetchSubject() async {
    var prefs = await SharedPreferences.getInstance();
    var token = prefs.getString('token');
    var response = await http.get(Uri.parse('http://localhost:8000/subjects'),
        headers: {'x-access-token': token!});
  
    print(response.body);
    return Subject.fromJson(jsonDecode(response.body));
  }
  </code></pre>
  <p>This is my initState</p>
  <pre><code>void initState() {
      super.initState();
      futureSubject = fetchSubject();
    }
  </code></pre>
  <p>This is my Widget build piece:</p>
  <pre><code>Widget build(BuildContext context) {
      return FutureBuilder&lt;Subject&gt;(
          future: fetchSubject(),
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return const Center(
                child: Text('Error'),
              );
            } else if (snapshot.hasData) {
              return Scaffold(
                  appBar: AppBar(
                    title: Text('Materias'),
                    backgroundColor: Colors.green[300],
                    actions: [
                      Padding(
                        padding: EdgeInsets.only(right: 3.0),
                        child: IconButton(
                          icon: Icon(Icons.logout),
                          //TODO llamar funcion logout
                          onPressed: () {},
                          iconSize: 26,
                        ),
                      )
                    ],
                  ),
                  body: Text(snapshot.data!.name));
            } else {
              return const Center(
                child: CircularProgressIndicator(),
              );
            }
          });
    }
  </code></pre>
  <p>This is what I get:</p>
  <pre><code>Uncaught (in promise) Error: Expected a value of type 'Map&lt;String, dynamic&gt;', but got one of type 'List&lt;dynamic&gt;'
  </code></pre>
  <p>I just want to display the information I am receiving as a List or table like fashion. Any ideas on what and how to refactor this?</p>