a

lib/data.dart

@@ -1,49 +1,59 @@
 import 'package:flutter/material.dart';
-import 'package:namer_app/list.dart';
 
-final List<Data> items = [
-  Data(
-      type: 'Foods & Drinks',
-      color: Color(0xffCCA600),
-      image: 'assets/images/food.png'),
-  Data(
-      type: 'Services',
-      color: Color(0xff90D8F9),
-      image: 'assets/images/service.png'),
-  Data(
-      type: 'Additional',
-      color: Color(0xffAACEE0),
-      image: 'assets/images/additional.png'),
-  Data(
-      type: 'First Aid',
-      color: Color(0xffFF1111),
-      image: 'assets/images/firstaid.png'),
-  Data(
-      type: 'Ticket',
-      color: Color(0xff5ED8F6),
-      image: 'assets/images/ticket.png'),
-  Data(
-      type: 'Vacation',
-      color: Color(0xffCCA600),
-      image: 'assets/images/vacation.png'),
-  Data(
-      type: 'Transportation',
-      color: Color(0xff6C8BA5),
-      image: 'assets/images/transportation.png'),
-  Data(
-      type: 'First Aid',
-      color: Color(0xffFF1111),
-      image: 'assets/images/firstaid.png'),
-  Data(
-      type: 'Foods & Drinks',
-      color: Color(0xffCCA600),
-      image: 'assets/images/food.png'),
-  Data(
-      type: 'Services',
-      color: Color(0xff90D8F9),
-      image: 'assets/images/service.png'),
-  Data(
-      type: 'Additional',
-      color: Color(0xffAACEE0),
-      image: 'assets/images/additional.png'),
+final List items = [
+  {
+    'type': 'Foods & Drinks',
+    'color': Color(0xffCCA600),
+    'image': 'assets/images/food.png'
+  },
+  {
+    'type': 'Services',
+    'color': Color(0xff90D8F9),
+    'image': 'assets/images/service.png'
+  },
+  {
+    'type': 'Additional',
+    'color': Color(0xffAACEE0),
+    'image': 'assets/images/additional.png'
+  },
+  {
+    'type': 'First Aid',
+    'color': Color(0xffFF1111),
+    'image': 'assets/images/firstaid.png'
+  },
+  {
+    'type': 'Ticket',
+    'color': Color(0xff5ED8F6),
+    'image': 'assets/images/ticket.png'
+  },
+  {
+    'type': 'Vacation',
+    'color': Color(0xffCCA600),
+    'image': 'assets/images/vacation.png'
+  },
+  {
+    'type': 'Transportation',
+    'color': Color(0xffCCA600),
+    'image': 'assets/images/transportation.png'
+  },
+  {
+    'type': 'First Aid',
+    'color': Color(0xffFF1111),
+    'image': 'assets/images/firstaid.png'
+  },
+  {
+    'type': 'Foods & Drinks',
+    'color': Color(0xffCCA600),
+    'image': 'assets/images/food.png'
+  },
+  {
+    'type': 'Services',
+    'color': Color(0xff90D8F9),
+    'image': 'assets/images/service.png'
+  },
+  {
+    'type': 'Additional',
+    'color': Color(0xffAACEE0),
+    'image': 'assets/images/additional.png'
+  },
 ];

lib/detail.dart

@@ -0,0 +1,141 @@
+import 'package:flutter/material.dart';
+import 'package:date_format/date_format.dart';
+
+var date = formatDate(DateTime.now(), [HH, ':', nn]);
+
+class DetailPage extends StatelessWidget {
+  final Map<String, dynamic> items;
+  DetailPage({super.key, required this.items});
+
+  @override
+  Widget build(BuildContext context) {
+    // print(items);
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Colors.white,
+        automaticallyImplyLeading: false,
+        elevation: 0,
+        toolbarHeight: 44,
+        title: Text(
+          date,
+          style: TextStyle(color: Color(0xff303336), fontSize: 15),
+        ),
+        actions: [
+          Icon(
+            Icons.signal_cellular_alt,
+            color: Color(0xff303336),
+          ),
+          Icon(
+            Icons.wifi,
+            color: Color(0xff303336),
+          ),
+          RotatedBox(
+            quarterTurns: -3,
+            child: Icon(
+              Icons.battery_std,
+              color: Color(0xff303336),
+            ),
+          )
+        ],
+      ),
+      body: Column(
+        children: [
+          Row(
+            children: [
+              BackButton(),
+              Text(
+                'Detail',
+                style: TextStyle(fontWeight: FontWeight.bold),
+              ),
+              Spacer(),
+              ElevatedButton(
+                onPressed: () {},
+                style: ElevatedButton.styleFrom(
+                    backgroundColor: Color(0xff078C84).withOpacity(0.1),
+                    side: BorderSide(color: Color(0xff078C84)),
+                    shape: RoundedRectangleBorder(
+                        borderRadius: BorderRadius.circular(35))),
+                child: Row(
+                  children: [
+                    Text(
+                      'Forum',
+                      style: TextStyle(color: Color(0xff078C84)),
+                    ),
+                    SizedBox(
+                      width: 5,
+                    ),
+                    Icon(
+                      Icons.message_outlined,
+                      color: Color(0xff078C84),
+                    )
+                  ],
+                ),
+              )
+            ],
+          ),
+          Divider(),
+          Container(
+            height: 44,
+            alignment: Alignment.centerLeft,
+            padding: EdgeInsets.symmetric(horizontal: 10),
+            child: Text(
+              'Food & Drink',
+              style: TextStyle(fontWeight: FontWeight.bold),
+            ),
+          ),
+          Row(
+            children: [
+              Container(
+                // decoration: BoxDecoration(),
+                // width: 100,
+                // height: 79.17,
+                // child: gambar(items),
+              ),
+              Column(
+                children: [
+                  Container(
+                    decoration: BoxDecoration(),
+                    child: Text(
+                      'Fresh smoked tuna with traditional recipe ...',
+                      overflow: TextOverflow.clip,
+                      style: TextStyle(
+                          fontWeight: FontWeight.w400,
+                          color: Color(0xff292D32)),
+                    ),
+                  ),
+                  Container(
+                    width: 272,
+                    decoration: BoxDecoration(),
+                    child: Text(
+                      'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
+                      overflow: TextOverflow.clip,
+                      style: TextStyle(
+                          fontWeight: FontWeight.w300,
+                          color: Color(0xff292D32)),
+                    ),
+                  )
+                ],
+              )
+            ],
+          ),
+        ],
+      ),
+    );
+  }
+
+  // Container gambar(items) {
+  //   return Container(
+  //     decoration: BoxDecoration(
+  //         border: Border.all(color: items['color']),
+  //         borderRadius: BorderRadius.all(Radius.circular(20)),
+  //         color: items['color'].withOpacity(0.4)),
+  //     padding: const EdgeInsets.all(5.0),
+  //     child: Image.asset(
+  //       items['image'],
+  //       width: 36,
+  //       height: 36,
+  //       fit: BoxFit.cover,
+  //     ),
+  //   );
+  // }
+}

lib/list.dart

@@ -3,6 +3,8 @@ import 'package:go_router/go_router.dart';
 import 'package:namer_app/data.dart';
 import 'package:date_format/date_format.dart';
 
+var date = formatDate(DateTime.now(), [HH, ':', nn]);
+
 class ListPage extends StatelessWidget {
   const ListPage({Key? key}) : super(key: key);
 
@@ -63,10 +65,12 @@ class ListPage extends StatelessWidget {
                         (i) => SizedBox(
                               child: ListTile(
                                 leading: gambar(items[i]),
-                                title: Text(items[i].type),
+                                title: Text(items[i]['type']),
                                 subtitle: Text(
-                                    'Description of ${items[i].type.toLowerCase()}'),
-                                trailing: IconDelete(),
+                                    'Description of ${items[i]['type'].toLowerCase()}'),
+                                trailing: IconDelete(
+                                  items: items[i],
+                                ),
                               ),
                             )),
                   ),
@@ -80,9 +84,9 @@ class ListPage extends StatelessWidget {
                         (i) => SizedBox(
                               child: ListTile(
                                 leading: gambar(items[i]),
-                                title: Text(items[i].type),
+                                title: Text(items[i]['type']),
                                 subtitle: Text(
-                                    'Description of ${items[i].type.toLowerCase()}'),
+                                    'Description of ${items[i]['type'].toLowerCase()}'),
                                 trailing: IconAdd(),
                               ),
                             )),
@@ -97,12 +101,12 @@ class ListPage extends StatelessWidget {
   Container gambar(items) {
     return Container(
       decoration: BoxDecoration(
-          border: Border.all(color: items.color),
+          border: Border.all(color: items['color']),
           borderRadius: BorderRadius.all(Radius.circular(20)),
-          color: items.color.withOpacity(0.4)),
+          color: items['color'].withOpacity(0.4)),
       padding: const EdgeInsets.all(5.0),
       child: Image.asset(
-        items.image,
+        items['image'],
         width: 36,
         height: 36,
         fit: BoxFit.cover,
@@ -111,16 +115,6 @@ class ListPage extends StatelessWidget {
   }
 }
 
-class Data {
-  String type;
-  Color color;
-  String image;
-
-  Data({required this.type, required this.color, required this.image});
-}
-
-var date = formatDate(DateTime.now(), [HH, ':', nn]);
-
 class AvailableMenu extends StatelessWidget {
   const AvailableMenu({
     Key? key,
@@ -193,7 +187,9 @@ class IconAdd extends StatelessWidget {
 }
 
 class IconDelete extends StatelessWidget {
-  const IconDelete({
+  final Map<String, dynamic> items;
+  IconDelete({
+    required this.items,
     Key? key,
   }) : super(key: key);
 
@@ -205,11 +201,11 @@ class IconDelete extends StatelessWidget {
         IconButton(
           icon: Icon(Icons.remove_circle),
           color: Colors.red,
-          onPressed: () {},
+          onPressed: () {print(items);},
         ),
         SizedBox(width: 10),
         IconButton(
-          onPressed: () {},
+          onPressed: () => context.goNamed('detail', queryParams: items),
           icon: Icon(Icons.menu),
         )
       ],

lib/listblock.dart

@@ -3,6 +3,8 @@ import 'package:go_router/go_router.dart';
 import 'package:namer_app/data.dart';
 import 'package:date_format/date_format.dart';
 
+var date = formatDate(DateTime.now(), [HH, ':', nn]);
+
 class ListBlockPage extends StatelessWidget {
   const ListBlockPage({Key? key}) : super(key: key);
 
@@ -64,7 +66,7 @@ class ListBlockPage extends StatelessWidget {
                     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                     children: [
                       gambar(items[index]),
-                      Text(items[index].type),
+                      Text(items[index]['type']),
                     ],
                   ),
                   itemCount: 7,
@@ -78,7 +80,7 @@ class ListBlockPage extends StatelessWidget {
                     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                     children: [
                       gambar(items[index]),
-                      Text(items[index].type),
+                      Text(items[index]['type']),
                     ],
                   ),
                   itemCount: items.length,
@@ -92,12 +94,12 @@ class ListBlockPage extends StatelessWidget {
   Container gambar(items) {
     return Container(
       decoration: BoxDecoration(
-          border: Border.all(color: items.color),
+          border: Border.all(color: items['color']),
           borderRadius: BorderRadius.all(Radius.circular(20)),
-          color: items.color.withOpacity(0.4)),
+          color: items['color'].withOpacity(0.4)),
       padding: const EdgeInsets.all(5.0),
       child: Image.asset(
-        items.image,
+        items['image'],
         width: 36,
         height: 36,
         fit: BoxFit.cover,
@@ -106,16 +108,6 @@ class ListBlockPage extends StatelessWidget {
   }
 }
 
-class Data {
-  String type;
-  Color color;
-  String image;
-
-  Data({required this.type, required this.color, required this.image});
-}
-
-var date = formatDate(DateTime.now(), [HH, ':', nn]);
-
 class AvailableMenu extends StatelessWidget {
   const AvailableMenu({
     Key? key,

lib/main.dart

@@ -6,6 +6,7 @@ import 'package:namer_app/login.dart';
 import 'package:namer_app/lang.dart';
 import 'package:namer_app/listblock.dart';
 import 'package:flutter/rendering.dart';
+import 'package:namer_app/detail.dart';
 
 void main() {
   runApp(MyApp());
@@ -25,7 +26,13 @@ final _router = GoRouter(
           GoRoute(
             path: 'listblock',
             builder: (context, state) => ListBlockPage(),
-          )
+          ),
+          GoRoute(
+              name: 'detail',
+              path: 'detail',
+              builder: (context, state) {
+                return DetailPage(items: state.queryParams);
+              })
         ],
       ),
       GoRoute(