Send Flutter Data To Online Server

<p data-start=\"0\" data-end=\"196\">Here's a concise and professional guide to sending data using the <strong data-start=\"66\" data-end=\"74\">POST</strong> method from a Flutter screen using <code data-start=\"110\" data-end=\"116\">http</code> package. This guide covers all major form data types used in API communication:</p>\n\n\n<hr data-start=\"198\" data-end=\"201\" />\n\n<h2 data-start=\"203\" data-end=\"235\">Step 1: Add <code data-start=\"218\" data-end=\"224\">http</code> Dependency</h2>\n<p data-start=\"236\" data-end=\"268\">Add this to your <code data-start=\"253\" data-end=\"267\">pubspec.yaml</code>:</p>\n\n<div class=\"contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-yaml\"><span class=\"hljs-attr\"><span style=\"color: #333333; font-family: Georgia, Times New Roman, Bitstream Charter, Times, serif;\"><span style=\"background-color: #ffffff;\"> </span></span>dependencies:</span>\n <span class=\"hljs-attr\">http:</span> <span class=\"hljs-string\">^0.13.6</span>\n</code></div>\n</div>\n\n<hr data-start=\"312\" data-end=\"315\" />\n\n<h2 data-start=\"317\" data-end=\"346\">Step 2: Import the Library</h2>\n<div class=\"contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-dart\"><span style=\"color: #333333; font-family: Georgia, Times New Roman, Bitstream Charter, Times, serif;\"><span style=\"background-color: #ffffff;\"> </span></span>import 'package:http/http.dart' as http;\nimport 'dart:convert';\n</code></div>\n</div>\n\n<hr data-start=\"424\" data-end=\"427\" />\n\n<h2 data-start=\"429\" data-end=\"471\">Step 3: Define the Endpoint and Headers</h2>\n<div class=\"contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-dart\"><span style=\"color: #333333; font-family: Georgia, Times New Roman, Bitstream Charter, Times, serif;\"><span style=\"background-color: #ffffff;\"> </span></span>final String url = 'https://your-api-url.com/endpoint';\nfinal headers = {\n 'Content-Type': 'application/json', // For JSON\n 'Authorization': 'Bearer YOUR_TOKEN', // Optional\n};\n</code></div>\n</div>\n\n<hr data-start=\"664\" data-end=\"667\" />\n\n<h2 data-start=\"669\" data-end=\"707\">Form Types and POST Method Examples</h2>\n<h3 data-start=\"709\" data-end=\"734\">1. <strong data-start=\"716\" data-end=\"734\">Send JSON Data</strong></h3>\n<div class=\"contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-dart\"><span style=\"color: #333333; font-family: Georgia, Times New Roman, Bitstream Charter, Times, serif;\"><span style=\"background-color: #ffffff;\"> </span></span>Future&lt;void&gt; sendJsonData() async {\n final body = jsonEncode({\n 'name': 'John Doe',\n 'email': 'john@example.com',\n 'age': 30,\n });\n\n final response = await http.post(Uri.parse(url), headers: headers, body: body);\n print(response.body);\n}\n</code></div>\n</div>\n<h3 data-start=\"999\" data-end=\"1036\">2. <strong data-start=\"1006\" data-end=\"1036\">Send Form URL Encoded Data</strong></h3>\n<div class=\"contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-dart\"><span style=\"color: #333333; font-family: Georgia, Times New Roman, Bitstream Charter, Times, serif;\"><span style=\"background-color: #ffffff;\"> </span></span>Future&lt;void&gt; sendFormUrlEncodedData() async {\n final body = {\n 'username': 'john',\n 'password': '123456',\n };\n\n final response = await http.post(\n Uri.parse(url),\n headers: {'Content-Type': 'application/x-www-form-urlencoded'},\n body: body,\n );\n print(response.body);\n}\n</code></div>\n</div>\n<h3 data-start=\"1340\" data-end=\"1396\">3. <strong data-start=\"1347\" data-end=\"1396\">Send Multipart/Form-Data (e.g., Image Upload)</strong></h3>\n<div class=\"contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-dart\"><span style=\"color: #333333; font-family: Georgia, Times New Roman, Bitstream Charter, Times, serif;\"><span style=\"background-color: #ffffff;\"> </span></span>Future&lt;void&gt; sendMultipartFormData(String filePath) async {\n var request = http.MultipartRequest('POST', Uri.parse(url));\n request.fields['user'] = 'john_doe';\n request.fields['email'] = 'john@example.com';\n\n request.files.add(await http.MultipartFile.fromPath('photo', filePath));\n\n var response = await request.send();\n print(await response.stream.bytesToString());\n}\n</code></div>\n</div>\n\n<hr data-start=\"1786\" data-end=\"1789\" />\n\n<h2 data-start=\"1791\" data-end=\"1838\">Step 4: Error Handling and Status Code Check</h2>\n<div class=\"contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary\">\n<div class=\"overflow-y-auto p-4\" dir=\"ltr\"><code class=\"whitespace-pre! language-dart\"><span style=\"color: #333333; font-family: Georgia, Times New Roman, Bitstream Charter, Times, serif;\"><span style=\"background-color: #ffffff;\"> </span></span>if (response.statusCode == 200) {\n // success\n} else {\n // handle error\n}\n</code></div>\n</div>\n\n<hr data-start=\"1928\" data-end=\"1931\" />\n\n<div class=\"_tableContainer_80l1q_1\">\n<div class=\"_tableWrapper_80l1q_14 group flex w-fit flex-col-reverse\" tabindex=\"-1\"></div>\n</div>