lab 3 + p.s. устал

lib/main.dart

@@ -29,22 +29,6 @@ class MyHomePage extends StatefulWidget {
 }
 
 class _MyHomePageState extends State<MyHomePage> {
-
-  final List<FortniteSkin> skins = [
-    FortniteSkin(
-      imageUrl: 'assets/images/shark.png',
-      name: 'Safety First Steve',
-      description: 'Dont make him blow the whistle.!',
-      rarity: Rarity.epic,
-    ),
-    FortniteSkin(
-      imageUrl: 'assets/images/raven.png',
-      name: 'Raven',
-      description: 'Brooding master of dark skies.',
-      rarity: Rarity.legendary,
-    ),
-  ];
-
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -52,37 +36,109 @@ class _MyHomePageState extends State<MyHomePage> {
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
         title: Text(widget.title),
       ),
-      body: ListView.builder(
-        itemCount: skins.length,
-        itemBuilder: (context, index) {
-          final skin = skins[index];
-          return Padding(
-            padding: const EdgeInsets.all(8.0),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Image.asset(
-                  skin.imageUrl,
-                  height: 150,
-                  width: 150,
-                ),
-                Text(
-                  skin.name,
-                  style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
-                ),
-                Text(skin.description),
-                Text('Редкость: ${getRarityString(skin.rarity)}'),
-                const SizedBox(height: 20),
-              ],
-            ),
-          );
-        },
+      body: const MyWidget(),
+    );
+  }
+}
+final List<FortniteSkin> skins = [
+  FortniteSkin(
+    imageUrl: 'assets/images/shark.png',
+    name: 'Safety First Steve',
+    description: 'Dont make him blow the whistle.!',
+    rarity: Rarity.epic,
+  ),
+  FortniteSkin(
+    imageUrl: 'assets/images/raven.png',
+    name: 'Raven',
+    description: 'Brooding master of dark skies.',
+    rarity: Rarity.legendary,
+  ),
+];
+class MyWidget extends StatelessWidget{
+  const MyWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: SingleChildScrollView(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            for (var skin in skins)
+              _Card(
+                name: skin.name,
+                description: skin.description,
+                imageUrl: skin.imageUrl,
+              ),
+          ],
+        ),
       ),
     );
   }
 }
 
+class _Card extends StatelessWidget {
+  final String name;
+  final String imageUrl;
+  final String description;
 
+  const _Card({
+    required this.name,
+    required this.description,
+    required this.imageUrl,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.all(16),
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: Colors.greenAccent,
+        borderRadius: BorderRadius.circular(15),
+        border: Border.all(
+          color: Colors.black,
+          width: 3,
+        )
+      ),
+      child:  Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          ClipRRect(
+            borderRadius: BorderRadius.circular(15),
+            child: SizedBox(
+              height: 150,
+              width: 120,
+              child: Image.asset(
+                imageUrl,
+                fit: BoxFit.cover,
+                errorBuilder: (_,__,___) => const Placeholder(),
+              ),
+            ),
+          ),
+          Expanded(
+            child: Padding(
+              padding: const EdgeInsets.only(left: 16.0),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    name,
+                    style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
+                  ),
+                  Text(
+                      description,
+                      style: const TextStyle(fontSize: 15),
+                  )
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
 
 class FortniteSkin {
   final String imageUrl;