process

lib/main.dart

@@ -30,14 +30,6 @@ class MyHomePage extends StatefulWidget {
 }
 
 class _MyHomePageState extends State<MyHomePage> {
-  int _counter = 0;
-
-  void _incrementCounter() {
-    setState(() {
-      _counter++;
-    });
-  }
-
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -45,25 +37,68 @@ class _MyHomePageState extends State<MyHomePage> {
         backgroundColor: Theme.of(context).colorScheme.inversePrimary,
         title: Text(widget.title),
       ),
-      body: Center(
+      body: const MyWidget(),
+    );
+  }
+}
+
+class MyWidget extends StatelessWidget {
+  const MyWidget({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Center(
+      child: SingleChildScrollView(
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
-          children: <Widget>[
-            const Text(
-              'You have pushed the button this many times:',
-            ),
-            Text(
-              '$_counter',
-              style: Theme.of(context).textTheme.headlineMedium,
-            ),
+          children: [
+            _Card("Hello1", translation: "desc"),
+            _Card("Hello1", translation: "desc"),
+            _Card("Hello", translation: "desc"),
           ],
         ),
       ),
-      floatingActionButton: FloatingActionButton(
-        onPressed: _incrementCounter,
-        tooltip: 'Increment',
-        child: const Icon(Icons.ac_unit_sharp),
-      ),
+    );
+  }
+}
+
+class _Card extends StatelessWidget {
+  final String word;
+  final String translation;
+  final IconData icon;
+
+  const _Card(
+    this.word, {
+    required this.translation,
+    this.icon = Icons.abc,
+  });
+
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(20),
+      margin: const EdgeInsets.all(10),
+      decoration: BoxDecoration(
+        color: Colors.amberAccent,
+        borderRadius: BorderRadius.circular(10),
+      ),
+      child: Column(
+        children: [
+          Text(
+            word,
+            style: Theme.of(context).textTheme.headlineLarge,
+          ),
+          Text(
+            translation,
+            style: Theme.of(context).textTheme.bodySmall,
+          ),
+          Icon(
+            icon,
+            size: 50,
+          )
+        ],
+      ),
     );
   }
 }