Updated list contents

lib/view/screens/list_contents.dart

@@ -9,16 +9,24 @@ class ListContents extends StatelessWidget {
 
   final List<dynamic> listContents = [
     {
-        "name": "Animals"
+        "name": "Chapter 1",
+        "path": "chapter_1",
+        "locked": false
     },
     {
-        "name": "Fruits"
+        "name": "Chapter 2",
+        "path": "chapter_2",
+        "locked": true
     },
     {
-        "name": "Colors"
+        "name": "Chapter 3",
+        "path": "chapter_3",
+        "locked": true
     },
     {
-        "name": "Numbers"
+        "name": "Chapter 4",
+        "path": "chapter_4",
+        "locked": true
     }
   ];
 
@@ -61,8 +69,9 @@ class ListContents extends StatelessWidget {
                     itemCount: 4,
                     itemBuilder: (BuildContext ctx, index) {
                       return ListContentsBox(
-                        imagePath: 'assets/images/list_contents_${listContents[index]["name"].toLowerCase()}.png',
+                        imagePath: 'assets/images/${listContents[index]["path"]}.png',
-                        title: listContents[index]["name"]
+                        title: listContents[index]["name"],
+                        locked: listContents[index]["locked"]
                       );
                     },
                   ),

lib/view/widgets/list_contents_box.dart

@@ -4,46 +4,56 @@ import 'package:flutter/material.dart';
 import 'package:easy_learn/view/screens/content.dart';
 
 class ListContentsBox extends StatelessWidget {
-  const ListContentsBox({Key? key, required this.imagePath, required this.title}) : super(key: key);
+  const ListContentsBox({Key? key, required this.imagePath, required this.title, required this.locked}) : super(key: key);
 
   final String imagePath;
   final String title;
+  final bool locked;
 
   @override
   Widget build(BuildContext context) {
     return InkWell(
       onTap: (){
-        Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeft, child: const Content(category: 'None')));
+        if (!locked) {
+          Navigator.push(context, PageTransition(type: PageTransitionType.rightToLeft, child: const Content(category: 'chapter 1')));
+        }
       },
-      child: Container(
+      child: Banner(
-        padding: const EdgeInsets.all(5.0),
+        location: BannerLocation.topEnd,
-        decoration: BoxDecoration(
+        message: locked == false ? "Unlocked" : "Locked",
-          color: Colors.black.withOpacity(0.3),
+        color: locked == false ? Colors.green.withOpacity(0.6) : Colors.red.withOpacity(0.6),
-          borderRadius: const BorderRadius.all(Radius.circular(25.0))
+        textStyle: const TextStyle(fontWeight: FontWeight.w700, fontSize: 12.0, letterSpacing: 1.0),
+        textDirection: TextDirection.ltr,
+        child: Container(
+          padding: const EdgeInsets.all(5.0),
+          decoration: BoxDecoration(
+            color: Colors.black.withOpacity(0.3),
+            borderRadius: const BorderRadius.all(Radius.circular(25.0))
+          ),
+          child: Stack(
+            children: [
+              Container(
+                margin: const EdgeInsets.all(25.0),
+                decoration: BoxDecoration(
+                  image: DecorationImage(
+                    image: AssetImage(imagePath)
+                  )
+                ),
+                width: 300,
+                height: 300,
+              ),
+              SizedBox.expand(
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.end,
+                  children: [
+                    Text(title, style: const TextStyle(fontSize: 20, color: Colors.white),)
+                  ],
+                ),
+              )
+            ],
+          )
         ),
-        child: Stack(
-          children: [
-            Container(
-              margin: const EdgeInsets.all(25.0),
-              decoration: BoxDecoration(
-                image: DecorationImage(
-                  image: AssetImage(imagePath)
-                )
-              ),
-              width: 300,
-              height: 300,
-            ),
-            SizedBox.expand(
-              child: Row(
-                mainAxisAlignment: MainAxisAlignment.center,
-                crossAxisAlignment: CrossAxisAlignment.end,
-                children: [
-                  Text(title, style: const TextStyle(fontSize: 20, color: Colors.white),)
-                ],
-              ),
-            )
-          ],
-        )
       ),
     );
   }