Fetching Data From PHP API to Flutter App

<!-- wp:paragraph -->\n<p><strong>Import Packages</strong></p>\n<!-- /wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>import 'package:flutter/material.dart';\nimport 'dart:convert';\nimport 'package:http/http.dart' as http;\n</code></pre>\n<!-- /wp:code -->\n\n<!-- wp:list -->\n<ul><!-- wp:list-item -->\n<li><code>material.dart</code>: Provides Material Design widgets. <a href=\"https://api.flutter.dev/flutter/material/material-library.html\" target=\"_blank\" data-type=\"link\" data-id=\"https://api.flutter.dev/flutter/material/material-library.html\" rel=\"noreferrer noopener nofollow\">Reference Link</a></li>\n<!-- /wp:list-item -->\n\n<!-- wp:list-item -->\n<li><code>convert</code>: Allows you to convert between different data representations like JSON to Map. <a href=\"https://api.dart.dev/stable/3.1.0/dart-convert/dart-convert-library.html#:~:text=To%20use%20this%20library%20in,named%20json%20and%20utf8%2C%20respectively.\" data-type=\"link\" data-id=\"https://api.dart.dev/stable/3.1.0/dart-convert/dart-convert-library.html#:~:text=To%20use%20this%20library%20in,named%20json%20and%20utf8%2C%20respectively.\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Reference Link</a></li>\n<!-- /wp:list-item -->\n\n<!-- wp:list-item -->\n<li><code>http</code>: Used for making HTTP requests. <a href=\"https://pub.dev/packages/http\" target=\"_blank\" data-type=\"link\" data-id=\"https://pub.dev/packages/http\" rel=\"noreferrer noopener nofollow\">Reference Link</a></li>\n<!-- /wp:list-item --></ul>\n<!-- /wp:list -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>class Home extends StatefulWidget {\n @override\n _HomeState createState() => _HomeState();\n}\n</code></pre>\n<!-- /wp:code -->\n\n<!-- wp:paragraph -->\n<p><code>StatefulWidget</code>: A widget that can change over time.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>class _HomeState extends State&lt;Home> {\n Map&lt;String, dynamic>? productData;\n</code></pre>\n<!-- /wp:code -->\n\n<!-- wp:list -->\n<ul><!-- wp:list-item -->\n<li><code>_HomeState</code>: The mutable state for the <code>Home</code> widget.</li>\n<!-- /wp:list-item -->\n\n<!-- wp:list-item -->\n<li><code>productData</code>: A map to hold the product data fetched from the API.</li>\n<!-- /wp:list-item --></ul>\n<!-- /wp:list -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code> @override\n void initState() {\n super.initState();\n fetchProduct();\n }\n</code></pre>\n<!-- /wp:code -->\n\n<!-- wp:paragraph -->\n<p><code>initState()</code>: Called when the <code>State</code> object is created. We use it to call <code>fetchProduct()</code>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code> fetchProduct() async {\n final response = await http.get(Uri.parse('http://booppers.tk/api/fetch_product.php'));\n if (response.statusCode == 200) {\n setState(() {\n productData = json.decode(response.body);\n });\n }\n }\n</code></pre>\n<!-- /wp:code -->\n\n<!-- wp:paragraph -->\n<p><code>fetchProduct()</code>: Fetches product data from the API and updates <code>productData</code>.</p>\n<!-- /wp:paragraph -->\n\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code> @override\n Widget build(BuildContext context) {\n return Scaffold(\n // ... (Your UI code)\n );\n }\n</code></pre>\n<!-- /wp:code -->\n\n<!-- wp:list -->\n<ul><!-- wp:list-item -->\n<li><code>build()</code>: Builds the UI. It returns a <code>Scaffold</code> widget, which is a basic layout structure.</li>\n<!-- /wp:list-item --></ul>\n<!-- /wp:list -->\n\n<!-- wp:heading {\"level\":4} -->\n<h4 class=\"wp-block-heading\">Drawer and AppBar</h4>\n<!-- /wp:heading -->\n\n<!-- wp:paragraph -->\n<p>Inside the <code>Scaffold</code>, you have an <code>AppBar</code> and a <code>Drawer</code> for navigation.</p>\n<!-- /wp:paragraph -->