How to get data object in flutter

Question

I have JSON data like this:

{
    "iduser": 3,
    "fname": "joni"
}

I want to display it on the home page.

Previously I have created a model class below:

usermodel.dart

class UserModel {
  int id;
  String fname;

  UserModel(
    this.id,
    this.fname,
  );

  UserModel.fromJson(Map<String, dynamic> response) {
    id = response['iduser'];
    fname = response['fname'];
  }

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'fname': fname,
    };
  }
}

and I created a service page to interact with API

class AuthService {
  String baseUrl = 'https://myurl.com';
  Future<UserModel> getUser() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    var id = prefs.getInt('id');
    var token = prefs.getString('token');
    var url = '$baseUrl/users/$id';
    var headers = {
      'Content-Type': 'application/json',
      'Authorization': 'Bearer $token'
    };

    var response = await http.get(
      Uri.parse(url),
      headers: headers,
    );

    print(response.body);

    if (response.statusCode == 200) {
      var data = jsonDecode(response.body);
      UserModel user = UserModel.fromJson(data);
      return user;
    } else {
      print(response.body);
      throw Exception('Failed');
    }
  }
}

home.dart

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Center(
        child: Text( ), //get json fname
      ),
    );
  }
}

before I run but I get error type:

'_InternalLinkedHashMap<String, dynamic>' is not a subtype of type 'FutureOr<List>'

How to display the fname I get from the service on the home page?

Answer 1

Make home.dart a stateful widget and get the data in initstate and store in a variable. Use that variable to display the data here is how

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  void initState() {
    super.initState();
    getAsync();
  }

  UserModel user;
  getAsync() async {
    try {
      user = await AuthService().getUser();
    } catch (e) {
      print(e);
    }

    if (mounted) setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    if (user == null) return Center(child: CircularProgressIndicator());
    else
    return Container(
      color: Colors.white,
      child: Center(
        child: Text(user.fname), //get json fname
      ),
    );
  }
}