parsing json object in flutter

Question

i have data json like this .

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

I want to display it on the home page

Previously I have created a model class below

GetUserModel.dart

class GetUserModel{
  int id;
  String fname;

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

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

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

and I created a service page to interact with api

class UserServices {
  String baseUrl = 'https://myurl.com';

  Future<GetUserModel> getDataUser() async {
    print(url);
    var headers = {
      'Content-Type': 'application/json'
    };

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

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

i have UserProvider.dart

class UserProvider with ChangeNotifier {
  List<GetUserModel> _u = [];

  List<GetUserModel> get users => _u;

  set users(List<GetUserModel> users) {
    _u = users;
    notifyListeners();
  }

  Future<void> getuserdua() async {
    try {
      users = await UserServices().getuserdua();
      _u = users;
    } catch (e) {
      print(e);
    }
  }
}

and homepage.dart

class Homepage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    UserProvider x = Provider.of<UserProvider>(context);

    return Container(
      color: Colors.white,
      child: Center(
        child: Text(${x.fname}), // i have view fname
      ),
    );
  }
}

before displaying the home page I created a splash page to load the API.

class SplashPage extends StatefulWidget {
  @override
  _SplashPageState createState() => _SplashPageState();
}

class _SplashPageState extends State<SplashPage> {
  @override
  void initState() {
    load();
    super.initState();
  }

  Future<void> load() async {
      await Provider.of<UserProvider>(context, listen: false).getuserdua();
  }
}
}

how to display the fname I get from the service on the home page? thank you !

Answer 1

first use notifyListeners() in your api call:

Future<void> getuserdua() async {
    try {
      users = await UserServices().getuserdua();
      _u = users;
      notifyListeners();
    } catch (e) {
      print(e);
    }
  }

then, you can access to this data as follows:

return Container(
      color: Colors.white,
      child: Center(
        child: Text(${x.users[0].fname}), // i have view fname
      ),
    );

but, if you need to show all a list of your model, use ListView.