lib/main.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'dart:math';
 
 void main() {
   runApp(const MyApp());
@@ -11,11 +12,12 @@ class MyApp extends StatelessWidget {
   Widget build(BuildContext context) {
     return MaterialApp(
       title: 'Flutter Demo',
+      debugShowCheckedModeBanner: false,
       theme: ThemeData(
         colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
         useMaterial3: true,
       ),
-      home: const MyHomePage(title: 'Batsylev Vladislav Alexeyevich'),
+      home: const MyHomePage(title: 'Бацылев Владислав Алексеевич'),
     );
   }
 }
@@ -32,39 +34,145 @@ class MyHomePage extends StatefulWidget {
 }
 
 class _MyHomePageState extends State<MyHomePage> {
-  int _counter = 0;
+  final Color _color = Colors.purple;
-
-  void _incrementCounter() {
-    setState(() {
-                                    _counter++;
-    });
-  }
 
   @override
   Widget build(BuildContext context) {
-                            return Scaffold(
+    return Scaffold(
       appBar: AppBar(
-                                backgroundColor: Theme.of(context).colorScheme.inversePrimary,
+        backgroundColor: _color,
-                        title: Text(widget.title),
+        title: Text(widget.title),
       ),
-      body: Center(
+      body: const MyWidget(),
-                        child: Column(
+    );
-                                                                                                                                            mainAxisAlignment: MainAxisAlignment.center,
+  }
-          children: <Widget>[
+}
-            const Text(
+
-              'You have pushed the button this many times:',
+
-            ),
+  class _CardData{
-            Text(
+  final String text;
-              '$_counter',
+  final String discriptionText;
-              style: Theme.of(context).textTheme.headlineMedium,
+  final IconData icon;
-            ),
+  final String? imageUrl;
-          ],
+
-        ),
+  _CardData(
-      ),
+    this.text, {
-      floatingActionButton: FloatingActionButton(
+    this.icon = Icons.ac_unit_outlined,
-        onPressed: _incrementCounter,
+    required this.discriptionText,
-        tooltip: 'Increment',
+    this.imageUrl,
-        child: const Icon(Icons.add),
+  });
-      ),     );
+}
+
+class MyWidget extends StatelessWidget {
+  const MyWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final data = [
+      _CardData('Arc Warden',
+        discriptionText: 'Ловкость',
+        icon: Icons.account_circle,
+        imageUrl: 'https://yt3.googleusercontent.com/VnqOJt9iHkwXonTzNfenydf4hTD2ilYcmiZv-RP8-3eifX16A64eZyV4z43LBL4EhPWAhTN2lJE=s900-c-k-c0x00ffffff-no-rj',
+      ),
+      _CardData('Void Spirit',
+        discriptionText: 'Универсальный',
+        icon: Icons.account_circle,
+        imageUrl: 'https://cdna.artstation.com/p/assets/covers/images/024/245/520/large/maxime-lebled-voidspirit.jpg?1581789586',
+      ),
+      _CardData('Invoker',
+        discriptionText: 'Универсальный',
+        icon: Icons.account_circle,
+        imageUrl: 'https://steamuserimages-a.akamaihd.net/ugc/1010400569445271177/6D5FF0CF2C48F8351C9AAC98363DEC31386678AB/?imw=5000&imh=5000&ima=fit&impolicy=Letterbox&imcolor=%23000000&letterbox=false',
+      ),
+    ];
+    return Center(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
+        children: data.map((e) => _Card.fromData(e)).toList(),
+      ),
+    );
+  }
+}
+
+class _Card extends StatelessWidget {
+  final String text;
+  final String discriptionText;
+  final IconData icon;
+  final String? imageUrl;
+
+  const _Card(
+      this.text,{
+      this.icon = Icons.ice_skating_outlined,
+      required this.discriptionText,
+      this.imageUrl,
+      });
+
+  factory _Card.fromData(_CardData data) => _Card(
+    data.text,
+    discriptionText: data.discriptionText,
+    icon: data.icon,
+    imageUrl: data.imageUrl,
+  );
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      margin: const EdgeInsets.all(16),
+      padding: const EdgeInsets.all(16),
+      decoration: BoxDecoration(
+        color: Colors.white70,
+        borderRadius: BorderRadius.circular(20),
+        border: Border.all(color: Colors.grey),
+        boxShadow: [
+          BoxShadow(
+            color: Colors.grey.withOpacity(.5),
+            spreadRadius: 4,
+            offset: const Offset(0, 5),
+            blurRadius: 8,
+          ),
+        ],
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.start,
+        children: [
+          ClipRRect(
+            borderRadius: BorderRadius.circular(20),
+            child: SizedBox(
+              height: 140,
+              width: 100,
+              child: Image.network (
+                imageUrl ?? '',
+                fit: BoxFit.cover,
+                errorBuilder: (_,__,___) => const Placeholder(),
+              ),
+            ),
+          ),
+
+
+          Expanded(
+            child: Padding(
+              padding: const EdgeInsets.only(left: 16.0),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    text,
+                    style: Theme.of(context).textTheme.headlineLarge,
+                  ),
+                  Text(
+                    discriptionText,
+                    style: Theme.of(context).textTheme.bodyLarge,
+                  ),
+                ],
+              ),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Icon(icon),
+          ),
+        ],
+      )
+    );
   }
 }