Flutter post HTTP request - flutter

Question

I'm trying to send a post request and then get some response. This is the site: www.reqres.in and the user data https://reqres.in/api/users.
When I press the Button I don't see any text. Posting name and job to an API and receiving name, id, Datetime and job. If I don't use Widget _showData and show the text in the build below text field then I see the Data, but with a lateInitialization error, but I want to show it using the Widget _showData.
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:http_req_advanced/usermodel.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'HTTP Request 2',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var users;
Future<UserModel> createUser(String name, String job) async {
final apiUrl = "https://reqres.in/api/users";
final response =
await http.post(Uri.parse(apiUrl), body: {"name": name, "job": job});
if (response.statusCode == 201) {
users = userModelFromJson(response.body);
} else
throw Exception('Failed to load');
return users;
}
late UserModel user;
final nameController = TextEditingController();
final jobController = TextEditingController();
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('HTTP Request'),
),
body: Container(
padding: EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(
controller: nameController,
),
TextField(
controller: jobController,
),
//Text(
// "The user ${user.name} ${user.id} is created at ${user.createdAt} with job${user.job}"),
ElevatedButton(
onPressed: () async {
final String name = nameController.text;
final String job = jobController.text;
final UserModel userr = await createUser(name, job);
setState(() {
user = userr;
_showData(user.name, user.job, user.id, user.createdAt);
});
},
child: Text('Make a Request'),
),
],
),
),
),
);
}
Widget _showData(String name, String job, String id, DateTime createdat) {
return Container(
alignment: Alignment.bottomCenter,
child: SizedBox(
height: 32,
child:
Text('The user $name [$id] is created at $createdat with job $job'),
),
);
}
}

Answer 1

Instead of using late initialization:
late UserModel user;
Use:
UserModel? user;
When you use late you are declaring a non null variable that will be later initialized, in this case you don't need to use late because user can be null.

Answer 2

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:http_req_advanced/usermodel.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'HTTP Request 2',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
var users;
Future<UserModel> createUser(String name, String job) async {
final apiUrl = "https://reqres.in/api/users";
final response =
await http.post(Uri.parse(apiUrl), body: {"name": name, "job": job});
if (response.statusCode == 201) {
users = userModelFromJson(response.body);
} else
throw Exception('Failed to load');
return users;
}
late UserModel user;
final nameController = TextEditingController();
final jobController = TextEditingController();
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: Text('HTTP Request'),
),
body: Container(
padding: EdgeInsets.all(16),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextField(
controller: nameController,
),
TextField(
controller: jobController,
),
user != null
? _showData(user.name, user.job, user.id, user.createdAt)
: Container(),
//Text(
// "The user ${user.name} ${user.id} is created at ${user.createdAt} with job${user.job}"),
ElevatedButton(
onPressed: () async {
final String name = nameController.text;
final String job = jobController.text;
final UserModel userr = await createUser(name, job);
setState(() {
user = userr;
});
},
child: Text('Make a Request'),
),
],
),
),
),
);
}
Widget _showData(String name, String job, String id, DateTime createdat) {
return Container(
alignment: Alignment.bottomCenter,
child: SizedBox(
height: 32,
child:
Text('The user $name [$id] is created at $createdat with job $job'),
),
);
}
}