How To Display Image in Flutter App

\n<ol>\n<li>Import Required Packages:</li>\n</ol>\n\n\n\n<pre class=\"wp-block-code\"><code> import 'package:flutter/material.dart';\n import 'dart:convert';\n import 'package:http/http.dart' as http;\n import 'package:carousel_slider/carousel_slider.dart';</code></pre>\n\n\n\nThese lines import the necessary packages for building a Flutter app with HTTP requests and image carousels.\n\n\n\n<ol start=\"2\">\n<li>Create a StatefulWidget:</li>\n</ol>\n\n\n\n<pre class=\"wp-block-code\"><code> class Home extends StatefulWidget {\n const Home({Key? key}) : super(key: key);\n\n @override\n State<Home> createState() => _HomeState();\n }</code></pre>\n\n\n\nThis defines a Flutter <code>StatefulWidget</code> called <code>Home</code>.\n\n\n\n<ol start=\"3\">\n<li>Define the <code>_HomeState</code> Class:</li>\n</ol>\n\n\n\n<pre class=\"wp-block-code\"><code> class _HomeState extends State<Home> {\n List<String> images = [];\n String productName = '';\n String productDescription = '';\n\n @override\n void initState() {\n super.initState();\n fetchData();\n }\n // Rest of the code...\n }</code></pre>\n\n\n\nIn <code>_HomeState</code>, we initialize three variables: <code>images</code> for storing image URLs, <code>productName</code> for the product title, and <code>productDescription</code> for the product description. The <code>initState</code> method is called when the widget is first created, and it invokes <code>fetchData()</code> to retrieve data from the API.\n\n\n\n<ol start=\"4\">\n<li>Fetch Data from API:</li>\n</ol>\n\n\n\n<pre class=\"wp-block-code\"><code> fetchData() async {\n final response = await http.get(Uri.parse('https://booppers.tk/api/fetch_product.php'));\n if (response.statusCode == 200) {\n var data = json.decode(response.body);\n setState(() {\n images = [\n 'https://booppers.tk/uploads/' + data['pro_img_1'],\n 'https://booppers.tk/uploads/' + data['pro_img_2'],\n 'https://booppers.tk/uploads/' + data['pro_img_3']\n ];\n productName = data['pro_name'];\n productDescription = data['pro_desc'];\n });\n }\n }</code></pre>\n\n\n\nThe <code>fetchData</code> function makes an HTTP GET request to the specified API endpoint and processes the response. It extracts image URLs, product name, and product description, storing them in the corresponding variables.\n\n\n\n<ol start=\"5\">\n<li>Build the Flutter UI:</li>\n</ol>\n\n\n\n<pre class=\"wp-block-code\"><code> @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n // App bar configuration...\n ),\n body: SingleChildScrollView(\n child: Column(\n children: [\n // Carousel for images...\n\n // Display Product Title and Description...\n\n // Rest of the UI...\n ],\n ),\n ),\n );\n }</code></pre>\n\n\n\nThis is the main UI structure of the app. It includes an app bar, a carousel for displaying product images, and a section for showing the product title and description.\n\n\n\n<ol start=\"6\">\n<li>Display Product Title and Description:</li>\n</ol>\n\n\n\n<pre class=\"wp-block-code\"><code> // Display Product Title and Description\n Container(\n margin: EdgeInsets.all(20),\n child: Column(\n crossAxisAlignment: CrossAxisAlignment.start,\n children: [\n Text(\n 'Product Title:',\n style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),\n ),\n SizedBox(height: 10),\n Text(\n productName,\n style: TextStyle(fontSize: 16),\n ),\n SizedBox(height: 20),\n Text(\n 'Product Description:',\n style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),\n ),\n SizedBox(height: 10),\n Text(\n productDescription,\n style: TextStyle(fontSize: 16),\n ),\n ],\n ),\n ),</code></pre>\n\n\n\nIn this section, we use a <code>Container</code> to display the product title and description. The title is displayed with a larger font and bold text, followed by the product description.\n\n\n\n<h3 class=\"wp-block-heading\"></h3>\n