flutterjsondecoderjsondecodeerror

Receive response from DB Laragon


I recently returned to dart programs with the flutter framework and I am not able to resolve a problem from the response I receive from the laragon database. I'm having a problem with response.body This is my code:

import 'dart:convert';
import 'dart:io';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';
import 'package:testedb/userd.dart';
import 'package:mysql1/mysql1.dart';


class UsersPage extends StatefulWidget {
  const UsersPage({super.key});

  @override
  State<UsersPage> createState() => _UsersPageState();
}

class _UsersPageState extends State<UsersPage> {
  List<User> users = [];
  void _fetch() async {
    
   var settings = ConnectionSettings(
  host: '10.0.2.2', 
  port: 3306,
  user: 'raf',
  password: '123',
  db: 'bd'
);
var conn = await MySqlConnection.connect(settings);
var response = await conn.query('select * from posts');
print(response);
final responseData = jsonDecode(response.body);


setState((){
    users = responseData.map((e) => User.fromJson(e)).toList();
});
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: [
          ...users.map((user) => ListTile(
            leading: Container(
              height: 50,
              width: 50,
              child: CircleAvatar(
                backgroundImage: NetworkImage("${user.image}"),
              ),
            ),
            title: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("${user.name}"),
                Text("${user.age}", style: TextStyle(fontSize: 12),),
                SizedBox(height: 7,),
              ],
            ),
            subtitle: Text(user.race, maxLines: 2, overflow: TextOverflow.ellipsis,),
          ),),
        ],
      ),
      floatingActionButton: FloatingActionButton(onPressed: _fetch, tooltip: 'Fetch Data', child: Icon(Icons.cloud_download),),
    );
  }
}

I get the correct answer, but I think I'm not converting correctly to the list (see the error response.body)

thanks for help!

User class

class User {
  final int id;
  final String name;
  final String image;
  final String age;
  final String race;

  
  User({
    required this.id,
    required this.name,
    required this.image,
    required this.age,
    required this.race,
  });

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
        id : json['id'],
        name : json['name'],
        image : json['image'],
        age : json['age'],
        race : json['race'], 
    );
  }
}

enter image description here


Solution

  •  var conn = await MySqlConnection.connect(settings);
      var results = await conn.query('select * from posts');
      print(results);
      final rows = results.toList();
      final usersList = rows.map((e) => User.fromJson(e.fields)).toList();
      setState(() {
        users = usersList;
      });