GET and POST requests in Flutter - UI Render Trace

Component - GET and POST requests

This Flutter component shows how to fetch data from the internet using a GET request and send data using a POST request. It has a button to load data and a form to send data. The UI updates to show the results or loading status.

Widget Tree

Scaffold
├── AppBar
│   └── Text
└── Padding
    └── Column
        ├── ElevatedButton
        ├── Text
        ├── TextField
        ├── ElevatedButton
        └── Text

The Scaffold provides the basic screen structure with an AppBar showing the title. Inside the body, Padding adds space around the content. A Column arranges widgets vertically: a button to fetch data, a text widget to show fetched data or loading status, a text field to enter data for POST, another button to send data, and a text widget to show the POST response.

Render Trace - 7 Steps

Step 1: Scaffold

Step 2: Column

Step 3: ElevatedButton (Fetch Data)

Step 4: Text (Display GET result)

Step 5: TextField

Step 6: ElevatedButton (Send Data)

Step 7: Text (Display POST result)

State Change - Re-render

Trigger:User taps 'Fetch Data' button

Before

GET result text shows 'Press Fetch Data'

→

After

GET result text shows 'Loading...' then updates to fetched data

Re-renders:The Text widget displaying GET result re-renders

UI Quiz - 3 Questions

What happens on the screen when you tap the 'Fetch Data' button?

A The text below the button changes to 'Loading...' then shows fetched data

B The input field clears automatically

C The 'Send Data' button disappears

D The app navigates to a new screen

Key Insight

In mobile apps, showing clear feedback during network requests helps users understand what is happening. Using buttons to trigger GET and POST requests and updating text widgets to show loading and results creates a simple, friendly experience.

Practice

1. What is the main purpose of a GET request in Flutter when using the http package?

easy

A. To send data to a server to create or update something

B. To delete data from a server

C. To fetch data from a server without changing it

D. To authenticate a user

Solution

1. Step 1: Understand GET request purpose

   GET requests are used to retrieve or fetch data from a server without modifying it.

2. Step 2: Compare with other request types

   POST requests send data to create or update, DELETE removes data, and authentication is separate.

3. Final Answer:

   To fetch data from a server without changing it -> Option C

4. Quick Check:

   GET = fetch data [OK]

Hint: GET fetches data, POST sends data [OK]

Common Mistakes:

• Confusing GET with POST requests
• Thinking GET modifies server data
• Mixing GET with DELETE or authentication

2. Which of the following is the correct syntax to make a POST request using the http package in Flutter?

easy

A. http.post(Uri.parse(url), body: {"key": "value"});

B. http.get(Uri.parse(url), body: {"key": "value"});

C. http.post(url, {"key": "value"});

D. http.sendPost(Uri.parse(url), body: {"key": "value"});

Solution

1. Step 1: Identify correct method and parameters

   The http.post method requires a Uri object and an optional body map for data.

2. Step 2: Check syntax correctness

   http.post(Uri.parse(url), body: {"key": "value"}); uses Uri.parse(url) and passes body correctly. Others use wrong methods or parameters.

3. Final Answer:

   http.post(Uri.parse(url), body: {"key": "value"}); -> Option A

4. Quick Check:

   POST syntax = http.post(Uri.parse(url), body) [OK]

Hint: Use Uri.parse() and http.post() with body map [OK]

Common Mistakes:

• Passing URL as string instead of Uri
• Using http.get instead of http.post for POST
• Wrong method name like sendPost

3. What will be the output of this Flutter code snippet using the http package?

var response = await http.get(Uri.parse('https://jsonplaceholder.typicode.com/posts/1'));
print(response.statusCode);
print(response.body.contains('userId'));

medium

A. 200 and false

B. 404 and false

C. 500 and false

D. 200 and true

Solution

1. Step 1: Understand the GET request URL

   The URL points to a valid post resource, so the server should respond with status 200 (OK).

2. Step 2: Check response body content

   The JSON response includes a 'userId' field, so response.body.contains('userId') returns true.

3. Final Answer:

   200 and true -> Option D

4. Quick Check:

   Status 200 and body contains 'userId' = true [OK]

Hint: Valid URL returns 200 and expected JSON content [OK]

Common Mistakes:

• Assuming 404 for valid URL
• Not checking response body content
• Confusing status codes

4. Identify the error in this Flutter code that tries to send a POST request:

var response = await http.post('https://example.com/api', body: {"name": "John"});
print(response.statusCode);

medium

A. Body should be a JSON string, not a map

B. URL should be wrapped with Uri.parse()

C. http.post cannot be awaited

D. Missing headers for content type

Solution

1. Step 1: Check URL parameter type

   The http.post method requires the URL as a Uri object, not a plain string.

2. Step 2: Confirm correct usage

   Wrapping the URL string with Uri.parse() fixes the error. Other options are not mandatory errors here.

3. Final Answer:

   URL should be wrapped with Uri.parse() -> Option B

4. Quick Check:

   URL must be Uri.parse(string) [OK]

Hint: Always wrap URL string with Uri.parse() [OK]

Common Mistakes:

• Passing URL as plain string
• Assuming body must be JSON string always
• Forgetting to await async calls

5. You want to send a POST request with JSON data and receive a JSON response in Flutter. Which code snippet correctly handles this scenario using the http package?

hard

A. var response = await http.post(Uri.parse(url), headers: {"Content-Type": "application/json"}, body: jsonEncode({"name": "Alice"}));
var data = jsonDecode(response.body);

B. var response = await http.post(Uri.parse(url), body: {"name": "Alice"});
var data = response.body;

C. var response = await http.get(Uri.parse(url), headers: {"Content-Type": "application/json"});
var data = jsonDecode(response.body);

D. var response = await http.post(url, body: jsonEncode({"name": "Alice"}));
var data = jsonDecode(response.body);

Solution

1. Step 1: Set headers and encode body correctly

   To send JSON data, set header "Content-Type" to "application/json" and encode body with jsonEncode.

2. Step 2: Parse JSON response properly

   Use jsonDecode on response.body to convert JSON string to Dart object.

3. Step 3: Check URL parameter type

   URL must be wrapped with Uri.parse() for correct request.

4. Final Answer:

   Use http.post with Uri.parse, headers, jsonEncode body, and jsonDecode response -> Option A

5. Quick Check:

   POST JSON = headers + jsonEncode + jsonDecode [OK]

Hint: Use headers and jsonEncode for POST JSON, decode response [OK]

Common Mistakes:

• Not setting Content-Type header
• Passing body as map without encoding
• Using http.get instead of post for sending data
• Passing URL as string without Uri.parse