From f14ed6de32bda1a6e7999c3b378287b3838c8589 Mon Sep 17 00:00:00 2001
From: Ashish Madhup <119279720+madhupashish@users.noreply.github.com>
Date: Tue, 13 Jun 2023 14:09:18 +0530
Subject: [PATCH] Update ScreensShots.md

I have make use of the latest Flutter UI practices and improve the structure and styling of this code

In the upgraded code:

1. The code structure follows the standard Flutter app structure with a main entry point and a `MyApp` widget as the root widget.
2. The `MyApp` widget is a `StatelessWidget` that sets up the basic app scaffold with an app bar and a body.
3. The UI components are displayed in a `Column` widget inside the `body` of the `Scaffold`.
4. Each component is represented by a `ComponentCard` widget, which is a custom widget created to display an image and a title.
5. The image path and title for each component are passed as parameters to the `ComponentCard` widget.
6. The `ComponentCard` widget uses a `Card` to display the image and title, with appropriate padding and styling.

Make sure to update the image paths in the code to match the actual paths of this images. Also, consider adjusting the image dimensions to fit the specific requirements..
---
 ScreensShots.md | 97 +++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 82 insertions(+), 15 deletions(-)

diff --git a/ScreensShots.md b/ScreensShots.md
index 1439c04..ec0139b 100644
--- a/ScreensShots.md
+++ b/ScreensShots.md
@@ -1,15 +1,82 @@
-<h1 align=center> Flutter UI Components (Screen Shots) </h1>
-<h3 align=center> Amazing UI Components for you to choose from. 📜 </h3>
-<br>
-<table>
-<tr>
-  <td>Splash Screen</td>
-  <td>Avatar</td>
-  <td>Buttons</td>
-  </tr>
-  <tr>
-    <td><img src="assets/Screenshots/splash screen.jpg" width=400 height=700></td>
-    <td><img src="assets/Screenshots/avatar.jpg" width=400 height=700></td>
-    <td><img src="assets/Screenshots/buttons.jpg" width=400 height=700></td> 
-  </tr>
-  </table>
+import 'package:flutter/material.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      home: Scaffold(
+        appBar: AppBar(
+          title: Text('Flutter UI Components'),
+        ),
+        body: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Text(
+                'Amazing UI Components for you to choose from. 📜',
+                style: TextStyle(fontSize: 18),
+                textAlign: TextAlign.center,
+              ),
+              SizedBox(height: 20),
+              Row(
+                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+                children: [
+                  ComponentCard(
+                    title: 'Splash Screen',
+                    imagePath: 'assets/Screenshots/splash_screen.jpg',
+                  ),
+                  ComponentCard(
+                    title: 'Avatar',
+                    imagePath: 'assets/Screenshots/avatar.jpg',
+                  ),
+                  ComponentCard(
+                    title: 'Buttons',
+                    imagePath: 'assets/Screenshots/buttons.jpg',
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class ComponentCard extends StatelessWidget {
+  final String title;
+  final String imagePath;
+
+  const ComponentCard({
+    required this.title,
+    required this.imagePath,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      elevation: 4,
+      child: Column(
+        children: [
+          Image.asset(
+            imagePath,
+            width: 400,
+            height: 700,
+            fit: BoxFit.cover,
+          ),
+          Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Text(
+              title,
+              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}