a

lib/list coba.dart

@@ -5,7 +5,15 @@ class ListPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    // var items;
+    var items = [
+      'Foods & Drinks',
+      'Services',
+      'Additional',
+      'First Aid',
+      'Ticket',
+      'Vacation',
+      'Transportation'
+    ];    
     return Scaffold(
         body: Column(
       crossAxisAlignment: CrossAxisAlignment.start,
@@ -19,12 +27,12 @@ class ListPage extends StatelessWidget {
         Expanded(
             child: ListView.builder(
                 shrinkWrap: true,
-                // itemCount: items.length,
+                itemCount: items.length,
                 itemBuilder: (context, index) {
                   return Card(
                     child: ListTile(
-                      // title: Text(items[index]),
-                      // subtitle: Text('Description of 'items[index]),
+                      title: Text(items[index]),
+                      subtitle: Text('Description of ${items[index]}'),
                       // trailing: Icon(
                       //   Icons.do_not_disturb_on,
                       //   color: Colors.red,

lib/list copy.dart

@@ -0,0 +1,495 @@
+import 'package:flutter/material.dart';
+
+class ListPage extends StatelessWidget {
+  const ListPage({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    var items = [
+      'Foods & Drinks',
+      'Services',
+      'Additional',
+      'First Aid',
+      'Ticket',
+      'Vacation',
+      'Transportation'
+    ];
+    return Scaffold(
+        appBar: AppBar(
+          backgroundColor: Color(0xff078C84),
+        ),
+        resizeToAvoidBottomInset: false,
+        body: ListView(
+          children: [
+            Card(
+              child: Column(
+                children: [
+                  Row(
+                    children: [
+                      Text(
+                        'Top Menu',
+                        textAlign: TextAlign.left,
+                        style: TextStyle(
+                            fontWeight: FontWeight.w500,
+                            color: Color(0xff292D32)),
+                      ),
+                      Expanded(child: Container()),
+                      ElevatedButton(
+                          style: ElevatedButton.styleFrom(
+                              backgroundColor:
+                                  Color(0xff078C84).withOpacity(0.1)),
+                          onPressed: () {
+                            print('Done');
+                          },
+                          child: Text(
+                            'Done',
+                            style: TextStyle(
+                                color: Color(0xff078C84),
+                                fontWeight: FontWeight.w300),
+                          ))
+                    ],
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: Row(
+                      children: [
+                        Container(
+                          decoration: BoxDecoration(
+                              border: Border.all(color: Color(0xffCCA600)),
+                              borderRadius:
+                                  BorderRadius.all(Radius.circular(20)),
+                              color: Color(0xffCCA600).withOpacity(0.4)),
+                          padding: const EdgeInsets.all(10.0),
+                          child: Image.asset(
+                            'assets/images/food.png',
+                            width: 36,
+                            height: 36,
+                            fit: BoxFit.cover,
+                          ),
+                        ),
+                        Padding(
+                          padding: const EdgeInsets.all(8.0),
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Text(
+                                'Foods & Drinks',
+                                style: TextStyle(fontSize: 14),
+                              ),
+                              Text(
+                                'Description of foods & drink',
+                                style: TextStyle(fontSize: 12),
+                              ),
+                            ],
+                          ),
+                        ),
+                        Expanded(child: Container()),
+                        IconDelete()
+                      ],
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: Row(
+                      children: [
+                        Container(
+                          decoration: BoxDecoration(
+                              border: Border.all(color: Color(0xff90D8F9)),
+                              borderRadius:
+                                  BorderRadius.all(Radius.circular(20)),
+                              color: Color(0xff90D8F9).withOpacity(0.22)),
+                          padding: const EdgeInsets.all(10.0),
+                          child: Image.asset(
+                            'assets/images/service.png',
+                            width: 36,
+                            height: 36,
+                            fit: BoxFit.cover,
+                          ),
+                        ),
+                        Padding(
+                          padding: const EdgeInsets.all(8.0),
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Text(
+                                'Services',
+                                style: TextStyle(fontSize: 14),
+                              ),
+                              Text(
+                                'Description of services',
+                                style: TextStyle(fontSize: 12),
+                              ),
+                            ],
+                          ),
+                        ),
+                        Expanded(child: Container()),
+                        IconDelete()
+                      ],
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: Row(
+                      children: [
+                        Container(
+                          decoration: BoxDecoration(
+                              border: Border.all(color: Color(0xffAACEE0)),
+                              borderRadius:
+                                  BorderRadius.all(Radius.circular(20)),
+                              color: Color(0xffAACEE0).withOpacity(0.31)),
+                          padding: const EdgeInsets.all(10.0),
+                          child: Image.asset(
+                            'assets/images/additional.png',
+                            width: 36,
+                            height: 36,
+                            fit: BoxFit.cover,
+                          ),
+                        ),
+                        Padding(
+                          padding: const EdgeInsets.all(8.0),
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Text(
+                                'Additional',
+                                style: TextStyle(fontSize: 14),
+                              ),
+                              Text(
+                                'Description of additional',
+                                style: TextStyle(fontSize: 12),
+                              ),
+                            ],
+                          ),
+                        ),
+                        Expanded(child: Container()),
+                        IconDelete()
+                      ],
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: Row(
+                      children: [
+                        Container(
+                          decoration: BoxDecoration(
+                              border: Border.all(color: Color(0xffFF1111)),
+                              borderRadius:
+                                  BorderRadius.all(Radius.circular(20)),
+                              color: Color(0xffFF1111).withOpacity(0.15)),
+                          padding: const EdgeInsets.all(10.0),
+                          child: Image.asset(
+                            'assets/images/firstaid.png',
+                            width: 36,
+                            height: 36,
+                            fit: BoxFit.cover,
+                          ),
+                        ),
+                        Padding(
+                          padding: const EdgeInsets.all(8.0),
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Text(
+                                'First Aid',
+                                style: TextStyle(fontSize: 14),
+                              ),
+                              Text(
+                                'Description of first aid',
+                                style: TextStyle(fontSize: 12),
+                              ),
+                            ],
+                          ),
+                        ),
+                        Expanded(child: Container()),
+                        IconDelete()
+                      ],
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: Row(
+                      children: [
+                        Container(
+                          decoration: BoxDecoration(
+                              border: Border.all(color: Color(0xff5ED8F6)),
+                              borderRadius:
+                                  BorderRadius.all(Radius.circular(20)),
+                              color: Color(0xff5ED8F6).withOpacity(0.26)),
+                          padding: const EdgeInsets.all(10.0),
+                          child: Image.asset(
+                            'assets/images/ticket.png',
+                            width: 36,
+                            height: 36,
+                            fit: BoxFit.cover,
+                          ),
+                        ),
+                        Padding(
+                          padding: const EdgeInsets.all(8.0),
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Text(
+                                'Ticket',
+                                style: TextStyle(fontSize: 14),
+                              ),
+                              Text(
+                                'Description of ticket',
+                                style: TextStyle(fontSize: 12),
+                              ),
+                            ],
+                          ),
+                        ),
+                        Expanded(child: Container()),
+                        IconDelete()
+                      ],
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: Row(
+                      children: [
+                        Container(
+                          decoration: BoxDecoration(
+                              border: Border.all(color: Color(0xffCCA600)),
+                              borderRadius:
+                                  BorderRadius.all(Radius.circular(20)),
+                              color: Color(0xffCCA600).withOpacity(0.2)),
+                          padding: const EdgeInsets.all(10.0),
+                          child: Image.asset(
+                            'assets/images/vacation.png',
+                            width: 36,
+                            height: 36,
+                            fit: BoxFit.cover,
+                          ),
+                        ),
+                        Padding(
+                          padding: const EdgeInsets.all(8.0),
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Text(
+                                'Vacation',
+                                style: TextStyle(fontSize: 14),
+                              ),
+                              Text(
+                                'Description of vacation',
+                                style: TextStyle(fontSize: 12),
+                              ),
+                            ],
+                          ),
+                        ),
+                        Expanded(child: Container()),
+                        IconDelete()
+                      ],
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: Row(
+                      children: [
+                        Container(
+                          decoration: BoxDecoration(
+                              border: Border.all(color: Color(0xff6C8BA5)),
+                              borderRadius:
+                                  BorderRadius.all(Radius.circular(20)),
+                              color: Color(0xff6C8BA5).withOpacity(0.24)),
+                          padding: const EdgeInsets.all(10.0),
+                          child: Image.asset(
+                            'assets/images/transportation.png',
+                            width: 36,
+                            height: 36,
+                            fit: BoxFit.cover,
+                          ),
+                        ),
+                        Padding(
+                          padding: const EdgeInsets.all(8.0),
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Text(
+                                'Transportation',
+                                style: TextStyle(fontSize: 14),
+                              ),
+                              Text(
+                                'Description of transportation',
+                                style: TextStyle(fontSize: 12),
+                              ),
+                            ],
+                          ),
+                        ),
+                        Expanded(child: Container()),
+                        IconDelete()
+                      ],
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            Card(
+              child: Column(
+                children: [
+                  Row(
+                    children: [
+                      Text(
+                        'Available Menu',
+                        textAlign: TextAlign.left,
+                      ),
+                    ],
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: Row(
+                      children: [
+                        Container(
+                          decoration: BoxDecoration(
+                              border: Border.all(color: Color(0xffCCA600)),
+                              borderRadius:
+                                  BorderRadius.all(Radius.circular(20)),
+                              color: Color(0xffCCA600).withOpacity(0.2)),
+                          padding: const EdgeInsets.all(10.0),
+                          child: Image.asset(
+                            'assets/images/food.png',
+                            width: 36,
+                            height: 36,
+                            fit: BoxFit.cover,
+                          ),
+                        ),
+                        Padding(
+                          padding: const EdgeInsets.all(8.0),
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Text(
+                                'Foods & Drinks',
+                                style: TextStyle(fontSize: 14),
+                              ),
+                              Text(
+                                'Description of foods & drink',
+                                style: TextStyle(fontSize: 12),
+                              ),
+                            ],
+                          ),
+                        ),
+                        Expanded(child: Container()),
+                        IconAdd(),
+                      ],
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: Row(
+                      children: [
+                        Container(
+                          decoration: BoxDecoration(
+                              border: Border.all(color: Color(0xff90D8F9)),
+                              borderRadius:
+                                  BorderRadius.all(Radius.circular(20)),
+                              color: Color(0xff90D8F9).withOpacity(0.22)),
+                          padding: const EdgeInsets.all(10.0),
+                          child: Image.asset(
+                            'assets/images/service.png',
+                            width: 36,
+                            height: 36,
+                            fit: BoxFit.cover,
+                          ),
+                        ),
+                        Padding(
+                          padding: const EdgeInsets.all(8.0),
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Text(
+                                'Services',
+                                style: TextStyle(fontSize: 14),
+                              ),
+                              Text(
+                                'Description of services',
+                                style: TextStyle(fontSize: 12),
+                              ),
+                            ],
+                          ),
+                        ),
+                        Expanded(child: Container()),
+                        IconAdd(),
+                      ],
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.all(8.0),
+                    child: Row(
+                      children: [
+                        Container(
+                          decoration: BoxDecoration(
+                              border: Border.all(color: Color(0xffAACEE0)),
+                              borderRadius:
+                                  BorderRadius.all(Radius.circular(20)),
+                              color: Color(0xffAACEE0).withOpacity(0.31)),
+                          padding: const EdgeInsets.all(10.0),
+                          child: Image.asset(
+                            'assets/images/additional.png',
+                            width: 36,
+                            height: 36,
+                            fit: BoxFit.cover,
+                          ),
+                        ),
+                        Padding(
+                          padding: const EdgeInsets.all(8.0),
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Text(
+                                'Additional',
+                                style: TextStyle(fontSize: 14),
+                              ),
+                              Text(
+                                'Description of additional',
+                                style: TextStyle(fontSize: 12),
+                              ),
+                            ],
+                          ),
+                        ),
+                        Expanded(child: Container()),
+                        IconAdd(),
+                      ],
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ));
+  }
+}
+
+class IconAdd extends StatelessWidget {
+  const IconAdd({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Icon(
+      Icons.add_circle,
+      color: Colors.red,
+    );
+  }
+}
+
+class IconDelete extends StatelessWidget {
+  const IconDelete({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Icon(
+          Icons.do_not_disturb_on,
+          color: Colors.red,
+        ),
+        Icon(Icons.dehaze),
+      ],
+    );
+  }
+}

lib/list.dart

@@ -5,489 +5,195 @@ class ListPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    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'),
+    ];
     return Scaffold(
-        resizeToAvoidBottomInset: false,
-        backgroundColor: Color(0xff078C84),
-        body: ListView(
-          children: [
-            Row(
-              children: [
-                BackButton(),
-              ],
-            ),
-            Card(
-              child: Column(
-                children: [
-                  Row(
-                    children: [
-                      Text(
-                        'Top Menu',
-                        textAlign: TextAlign.left,
-                        style: TextStyle(
-                            fontWeight: FontWeight.w500,
-                            color: Color(0xff292D32)),
-                      ),
-                      Expanded(child: Container()),
-                      ElevatedButton(
-                          style: ElevatedButton.styleFrom(
-                              backgroundColor:
-                                  Color(0xff078C84).withOpacity(0.1)),
-                          onPressed: () {
-                            print('Done');
-                          },
-                          child: Text(
-                            'Done',
-                            style: TextStyle(
-                                color: Color(0xff078C84),
-                                fontWeight: FontWeight.w300),
-                          ))
-                    ],
-                  ),
-                  Padding(
-                    padding: const EdgeInsets.all(8.0),
-                    child: Row(
-                      children: [
-                        Container(
-                          decoration: BoxDecoration(
-                              border: Border.all(color: Color(0xffCCA600)),
-                              borderRadius:
-                                  BorderRadius.all(Radius.circular(20)),
-                              color: Color(0xffCCA600).withOpacity(0.4)),
-                          padding: const EdgeInsets.all(10.0),
-                          child: Image.asset(
-                            'assets/images/food.png',
-                            width: 36,
-                            height: 36,
-                            fit: BoxFit.cover,
-                          ),
-                        ),
-                        Padding(
-                          padding: const EdgeInsets.all(8.0),
-                          child: Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              Text(
-                                'Foods & Drinks',
-                                style: TextStyle(fontSize: 14),
-                              ),
-                              Text(
-                                'Description of foods & drink',
-                                style: TextStyle(fontSize: 12),
-                              ),
-                            ],
-                          ),
-                        ),
-                        Expanded(child: Container()),
-                        Icon(
-                          Icons.do_not_disturb_on,
-                          color: Colors.red,
-                        ),
-                        Icon(Icons.dehaze),
-                      ],
-                    ),
-                  ),
-                  Padding(
-                    padding: const EdgeInsets.all(8.0),
-                    child: Row(
-                      children: [
-                        Container(
-                          decoration: BoxDecoration(
-                              border: Border.all(color: Color(0xff90D8F9)),
-                              borderRadius:
-                                  BorderRadius.all(Radius.circular(20)),
-                              color: Color(0xff90D8F9).withOpacity(0.22)),
-                          padding: const EdgeInsets.all(10.0),
-                          child: Image.asset(
-                            'assets/images/service.png',
-                            width: 36,
-                            height: 36,
-                            fit: BoxFit.cover,
-                          ),
-                        ),
-                        Padding(
-                          padding: const EdgeInsets.all(8.0),
-                          child: Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              Text(
-                                'Services',
-                                style: TextStyle(fontSize: 14),
-                              ),
-                              Text(
-                                'Description of services',
-                                style: TextStyle(fontSize: 12),
-                              ),
-                            ],
-                          ),
-                        ),
-                        Expanded(child: Container()),
-                        Icon(
-                          Icons.do_not_disturb_on,
-                          color: Colors.red,
-                        ),
-                        Icon(Icons.dehaze),
-                      ],
-                    ),
-                  ),
-                  Padding(
-                    padding: const EdgeInsets.all(8.0),
-                    child: Row(
-                      children: [
-                        Container(
-                          decoration: BoxDecoration(
-                              border: Border.all(color: Color(0xffAACEE0)),
-                              borderRadius:
-                                  BorderRadius.all(Radius.circular(20)),
-                              color: Color(0xffAACEE0).withOpacity(0.31)),
-                          padding: const EdgeInsets.all(10.0),
-                          child: Image.asset(
-                            'assets/images/additional.png',
-                            width: 36,
-                            height: 36,
-                            fit: BoxFit.cover,
-                          ),
-                        ),
-                        Padding(
-                          padding: const EdgeInsets.all(8.0),
-                          child: Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              Text(
-                                'Additional',
-                                style: TextStyle(fontSize: 14),
-                              ),
-                              Text(
-                                'Description of additional',
-                                style: TextStyle(fontSize: 12),
-                              ),
-                            ],
-                          ),
-                        ),
-                        Expanded(child: Container()),
-                        Icon(
-                          Icons.do_not_disturb_on,
-                          color: Colors.red,
-                        ),
-                        Icon(Icons.dehaze),
-                      ],
-                    ),
-                  ),
-                  Padding(
-                    padding: const EdgeInsets.all(8.0),
-                    child: Row(
-                      children: [
-                        Container(
-                          decoration: BoxDecoration(
-                              border: Border.all(color: Color(0xffFF1111)),
-                              borderRadius:
-                                  BorderRadius.all(Radius.circular(20)),
-                              color: Color(0xffFF1111).withOpacity(0.15)),
-                          padding: const EdgeInsets.all(10.0),
-                          child: Image.asset(
-                            'assets/images/firstaid.png',
-                            width: 36,
-                            height: 36,
-                            fit: BoxFit.cover,
-                          ),
-                        ),
-                        Padding(
-                          padding: const EdgeInsets.all(8.0),
-                          child: Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              Text(
-                                'First Aid',
-                                style: TextStyle(fontSize: 14),
-                              ),
-                              Text(
-                                'Description of first aid',
-                                style: TextStyle(fontSize: 12),
-                              ),
-                            ],
-                          ),
-                        ),
-                        Expanded(child: Container()),
-                        Icon(
-                          Icons.do_not_disturb_on,
-                          color: Colors.red,
-                        ),
-                        Icon(Icons.dehaze),
-                      ],
-                    ),
-                  ),
-                  Padding(
-                    padding: const EdgeInsets.all(8.0),
-                    child: Row(
-                      children: [
-                        Container(
-                          decoration: BoxDecoration(
-                              border: Border.all(color: Color(0xff5ED8F6)),
-                              borderRadius:
-                                  BorderRadius.all(Radius.circular(20)),
-                              color: Color(0xff5ED8F6).withOpacity(0.26)),
-                          padding: const EdgeInsets.all(10.0),
-                          child: Image.asset(
-                            'assets/images/ticket.png',
-                            width: 36,
-                            height: 36,
-                            fit: BoxFit.cover,
-                          ),
-                        ),
-                        Padding(
-                          padding: const EdgeInsets.all(8.0),
-                          child: Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              Text(
-                                'Ticket',
-                                style: TextStyle(fontSize: 14),
-                              ),
-                              Text(
-                                'Description of ticket',
-                                style: TextStyle(fontSize: 12),
-                              ),
-                            ],
-                          ),
-                        ),
-                        Expanded(child: Container()),
-                        Icon(
-                          Icons.do_not_disturb_on,
-                          color: Colors.red,
-                        ),
-                        Icon(Icons.dehaze),
-                      ],
-                    ),
-                  ),
-                  Padding(
-                    padding: const EdgeInsets.all(8.0),
-                    child: Row(
-                      children: [
-                        Container(
-                          decoration: BoxDecoration(
-                              border: Border.all(color: Color(0xffCCA600)),
-                              borderRadius:
-                                  BorderRadius.all(Radius.circular(20)),
-                              color: Color(0xffCCA600).withOpacity(0.2)),
-                          padding: const EdgeInsets.all(10.0),
-                          child: Image.asset(
-                            'assets/images/vacation.png',
-                            width: 36,
-                            height: 36,
-                            fit: BoxFit.cover,
-                          ),
-                        ),
-                        Padding(
-                          padding: const EdgeInsets.all(8.0),
-                          child: Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              Text(
-                                'Vacation',
-                                style: TextStyle(fontSize: 14),
-                              ),
-                              Text(
-                                'Description of vacation',
-                                style: TextStyle(fontSize: 12),
-                              ),
-                            ],
-                          ),
-                        ),
-                        Expanded(child: Container()),
-                        Icon(
-                          Icons.do_not_disturb_on,
-                          color: Colors.red,
-                        ),
-                        Icon(Icons.dehaze),
-                      ],
-                    ),
-                  ),
-                  Padding(
-                    padding: const EdgeInsets.all(8.0),
-                    child: Row(
-                      children: [
-                        Container(
-                          decoration: BoxDecoration(
-                              border: Border.all(color: Color(0xff6C8BA5)),
-                              borderRadius:
-                                  BorderRadius.all(Radius.circular(20)),
-                              color: Color(0xff6C8BA5).withOpacity(0.24)),
-                          padding: const EdgeInsets.all(10.0),
-                          child: Image.asset(
-                            'assets/images/transportation.png',
-                            width: 36,
-                            height: 36,
-                            fit: BoxFit.cover,
-                          ),
-                        ),
-                        Padding(
-                          padding: const EdgeInsets.all(8.0),
-                          child: Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              Text(
-                                'Transportation',
-                                style: TextStyle(fontSize: 14),
-                              ),
-                              Text(
-                                'Description of transportation',
-                                style: TextStyle(fontSize: 12),
-                              ),
-                            ],
-                          ),
-                        ),
-                        Expanded(child: Container()),
-                        Icon(
-                          Icons.do_not_disturb_on,
-                          color: Colors.red,
-                        ),
-                        Icon(Icons.dehaze),
-                      ],
-                    ),
-                  ),
-                ],
+        appBar: AppBar(
+          backgroundColor: Color(0xff078C84),
+          automaticallyImplyLeading: false,
+          toolbarHeight: 44,
+        ),
+        body: SingleChildScrollView(
+          child: Column(
+            children: [
+              TopMenu(),
+              Column(
+                children: List.generate(
+                    items.length,
+                    (i) => SizedBox(
+                          child: ListTile(
+                            leading: gambar(items[i]),
+                            title: Text(items[i].type),
+                            subtitle: Text(
+                                'Description of ${items[i].type.toLowerCase()}'),
+                            trailing: IconDelete(),
+                          ),
+                        )),
               ),
-            ),
-            Card(
-              child: Column(
-                children: [
-                  Row(
-                    children: [
-                      Text(
-                        'Available Menu',
-                        textAlign: TextAlign.left,
-                      ),
-                    ],
-                  ),
-                  Padding(
-                    padding: const EdgeInsets.all(8.0),
-                    child: Row(
-                      children: [
-                        Container(
-                          decoration: BoxDecoration(
-                              border: Border.all(color: Color(0xffCCA600)),
-                              borderRadius:
-                                  BorderRadius.all(Radius.circular(20)),
-                              color: Color(0xffCCA600).withOpacity(0.2)),
-                          padding: const EdgeInsets.all(10.0),
-                          child: Image.asset(
-                            'assets/images/food.png',
-                            width: 36,
-                            height: 36,
-                            fit: BoxFit.cover,
-                          ),
-                        ),
-                        Padding(
-                          padding: const EdgeInsets.all(8.0),
-                          child: Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              Text(
-                                'Foods & Drinks',
-                                style: TextStyle(fontSize: 14),
-                              ),
-                              Text(
-                                'Description of foods & drink',
-                                style: TextStyle(fontSize: 12),
-                              ),
-                            ],
-                          ),
-                        ),
-                        Expanded(child: Container()),
-                        Icon(
-                          Icons.add_circle,
-                          color: Colors.red,
-                        ),
-                      ],
-                    ),
-                  ),
-                  Padding(
-                    padding: const EdgeInsets.all(8.0),
-                    child: Row(
-                      children: [
-                        Container(
-                          decoration: BoxDecoration(
-                              border: Border.all(color: Color(0xff90D8F9)),
-                              borderRadius:
-                                  BorderRadius.all(Radius.circular(20)),
-                              color: Color(0xff90D8F9).withOpacity(0.22)),
-                          padding: const EdgeInsets.all(10.0),
-                          child: Image.asset(
-                            'assets/images/service.png',
-                            width: 36,
-                            height: 36,
-                            fit: BoxFit.cover,
-                          ),
-                        ),
-                        Padding(
-                          padding: const EdgeInsets.all(8.0),
-                          child: Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              Text(
-                                'Services',
-                                style: TextStyle(fontSize: 14),
-                              ),
-                              Text(
-                                'Description of services',
-                                style: TextStyle(fontSize: 12),
-                              ),
-                            ],
-                          ),
-                        ),
-                        Expanded(child: Container()),
-                        Icon(
-                          Icons.add_circle,
-                          color: Colors.red,
-                        ),
-                      ],
-                    ),
-                  ),
-                  Padding(
-                    padding: const EdgeInsets.all(8.0),
-                    child: Row(
-                      children: [
-                        Container(
-                          decoration: BoxDecoration(
-                              border: Border.all(color: Color(0xffAACEE0)),
-                              borderRadius:
-                                  BorderRadius.all(Radius.circular(20)),
-                              color: Color(0xffAACEE0).withOpacity(0.31)),
-                          padding: const EdgeInsets.all(10.0),
-                          child: Image.asset(
-                            'assets/images/additional.png',
-                            width: 36,
-                            height: 36,
-                            fit: BoxFit.cover,
-                          ),
-                        ),
-                        Padding(
-                          padding: const EdgeInsets.all(8.0),
-                          child: Column(
-                            crossAxisAlignment: CrossAxisAlignment.start,
-                            children: [
-                              Text(
-                                'Additional',
-                                style: TextStyle(fontSize: 14),
-                              ),
-                              Text(
-                                'Description of additional',
-                                style: TextStyle(fontSize: 12),
-                              ),
-                            ],
-                          ),
-                        ),
-                        Expanded(child: Container()),
-                        Icon(
-                          Icons.add_circle,
-                          color: Colors.red,
-                        ),
-                      ],
-                    ),
-                  ),
-                ],
+              Divider(
+                thickness: 8,
               ),
-            ),
-          ],
+              AvailableMenu(),
+              Column(
+                children: List.generate(
+                    items.length,
+                    (i) => SizedBox(
+                          child: ListTile(
+                            leading: gambar(items[i]),
+                            title: Text(items[i].type),
+                            subtitle: Text(
+                                'Description of ${items[i].type.toLowerCase()}'),
+                            trailing: IconAdd(),
+                          ),
+                        )),
+              )
+            ],
+          ),
         ));
   }
+
+  Container gambar(Data 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,
+      ),
+    );
+  }
+}
+
+class Data {
+  String type;
+  Color color;
+  String image;
+
+  Data({required this.type, required this.color, required this.image});
+}
+
+class AvailableMenu extends StatelessWidget {
+  const AvailableMenu({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(5.0),
+      child: Row(
+        children: [
+          Text(
+            'Available Menu',
+            textAlign: TextAlign.left,
+            style: TextStyle(
+                fontWeight: FontWeight.bold, color: Color(0xff292D32)),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+class TopMenu extends StatelessWidget {
+  const TopMenu({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(5.0),
+      child: Row(
+        children: [
+          Text(
+            'Top Menu',
+            textAlign: TextAlign.left,
+            style: TextStyle(
+                fontWeight: FontWeight.bold, color: Color(0xff292D32)),
+          ),
+          Expanded(child: Container()),
+          ElevatedButton(
+              style: ElevatedButton.styleFrom(
+                  backgroundColor: Color(0xff078C84).withOpacity(0.1)),
+              onPressed: () {
+                print('Done');
+              },
+              child: Text(
+                'Done',
+                style: TextStyle(
+                    color: Color(0xff078C84), fontWeight: FontWeight.w300),
+              ))
+        ],
+      ),
+    );
+  }
+}
+
+class IconAdd extends StatelessWidget {
+  const IconAdd({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Icon(
+      Icons.add_circle,
+      color: Colors.red,
+    );
+  }
+}
+
+class IconDelete extends StatelessWidget {
+  const IconDelete({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Icon(
+          Icons.do_not_disturb_on,
+          color: Colors.red,
+        ),
+        SizedBox(width: 10),
+        Icon(Icons.dehaze),
+      ],
+    );
+  }
 }

lib/login.dart

@@ -113,16 +113,6 @@ class LoginPage extends StatelessWidget {
                           borderRadius: BorderRadius.circular(12.0),
                         ),
                       ),
-                      // style: ButtonStyle(
-                      //     backgroundColor:
-                      //         MaterialStateProperty.all(Color(0xff078C84)),
-                      //     foregroundColor:
-                      //         MaterialStateProperty.all<Color>(Colors.black),
-                      //     shape:
-                      //         MaterialStateProperty.all<RoundedRectangleBorder>(
-                      //             RoundedRectangleBorder(
-                      //       borderRadius: BorderRadius.circular(10),
-                      //     ))),
                       child: Text(
                         'Masuk',
                         style: TextStyle(color: Colors.white),
@@ -145,7 +135,8 @@ class LoginPage extends StatelessWidget {
                           fontSize: 16,
                           decoration: TextDecoration.underline,
                           fontWeight: FontWeight.w400,
-                          color: Colors.white)),
+                          color: Colors.white,
+                          decorationColor: Colors.white)),
                   Text('Versi 4.0.0.0',
                       style: TextStyle(
                         fontSize: 16,
@@ -155,9 +146,6 @@ class LoginPage extends StatelessWidget {
                 ],
               ),
             ),
-            // Container(
-            //   color: Theme.of(context).colorScheme.primaryContainer,
-            // )
           ],
         ),
       ),

lib/main.dart

@@ -106,6 +106,7 @@ class MyHomePage extends StatelessWidget {
                           fontSize: 16,
                           decoration: TextDecoration.underline,
                           fontWeight: FontWeight.w400,
+                          decorationColor: Colors.white,
                           color: Colors.white)),
                   Text('Versi 4.0.0.0',
                       style: TextStyle(

pubspec.lock

@@ -5,49 +5,56 @@ packages:
     dependency: transitive
     description:
       name: async
-      url: "https://pub.dartlang.org"
+      sha256: bfe67ef28df125b7dddcea62755991f807aa39a2492a23e1550161692950bbe0
+      url: "https://pub.dev"
     source: hosted
-    version: "2.9.0"
+    version: "2.10.0"
   boolean_selector:
     dependency: transitive
     description:
       name: boolean_selector
-      url: "https://pub.dartlang.org"
+      sha256: "6cfb5af12253eaf2b368f07bacc5a80d1301a071c73360d746b7f2e32d762c66"
+      url: "https://pub.dev"
     source: hosted
-    version: "2.1.0"
+    version: "2.1.1"
   characters:
     dependency: transitive
     description:
       name: characters
-      url: "https://pub.dartlang.org"
+      sha256: e6a326c8af69605aec75ed6c187d06b349707a27fbff8222ca9cc2cff167975c
+      url: "https://pub.dev"
     source: hosted
     version: "1.2.1"
   clock:
     dependency: transitive
     description:
       name: clock
-      url: "https://pub.dartlang.org"
+      sha256: cb6d7f03e1de671e34607e909a7213e31d7752be4fb66a86d29fe1eb14bfb5cf
+      url: "https://pub.dev"
     source: hosted
     version: "1.1.1"
   collection:
     dependency: transitive
     description:
       name: collection
-      url: "https://pub.dartlang.org"
+      sha256: cfc915e6923fe5ce6e153b0723c753045de46de1b4d63771530504004a45fae0
+      url: "https://pub.dev"
     source: hosted
-    version: "1.16.0"
+    version: "1.17.0"
   english_words:
     dependency: "direct main"
     description:
       name: english_words
-      url: "https://pub.dartlang.org"
+      sha256: "6a7ef6473a97bd8571b6b641d006a6e58a7c67e65fb6f3d6d1151cb46b0e983c"
+      url: "https://pub.dev"
     source: hosted
     version: "4.0.0"
   fake_async:
     dependency: transitive
     description:
       name: fake_async
-      url: "https://pub.dartlang.org"
+      sha256: "511392330127add0b769b75a987850d136345d9227c6b94c96a04cf4a391bf78"
+      url: "https://pub.dev"
     source: hosted
     version: "1.3.1"
   flutter:
@@ -59,7 +66,8 @@ packages:
     dependency: "direct dev"
     description:
       name: flutter_lints
-      url: "https://pub.dartlang.org"
+      sha256: aeb0b80a8b3709709c9cc496cdc027c5b3216796bc0af0ce1007eaf24464fd4c
+      url: "https://pub.dev"
     source: hosted
     version: "2.0.1"
   flutter_test:
@@ -76,70 +84,80 @@ packages:
     dependency: "direct main"
     description:
       name: go_router
-      url: "https://pub.dartlang.org"
+      sha256: "5a0b2e0bc88a006c09d2b419004ffabecf83a74520b8852ea148f22e82634c27"
+      url: "https://pub.dev"
     source: hosted
-    version: "6.0.2"
+    version: "6.0.6"
   js:
     dependency: transitive
     description:
       name: js
-      url: "https://pub.dartlang.org"
+      sha256: "5528c2f391ededb7775ec1daa69e65a2d61276f7552de2b5f7b8d34ee9fd4ab7"
+      url: "https://pub.dev"
     source: hosted
-    version: "0.6.4"
+    version: "0.6.5"
   lints:
     dependency: transitive
     description:
       name: lints
-      url: "https://pub.dartlang.org"
+      sha256: "5e4a9cd06d447758280a8ac2405101e0e2094d2a1dbdd3756aec3fe7775ba593"
+      url: "https://pub.dev"
     source: hosted
     version: "2.0.1"
   logging:
     dependency: transitive
     description:
       name: logging
-      url: "https://pub.dartlang.org"
+      sha256: "04094f2eb032cbb06c6f6e8d3607edcfcb0455e2bb6cbc010cb01171dcb64e6d"
+      url: "https://pub.dev"
     source: hosted
     version: "1.1.1"
   matcher:
     dependency: transitive
     description:
       name: matcher
-      url: "https://pub.dartlang.org"
+      sha256: "16db949ceee371e9b99d22f88fa3a73c4e59fd0afed0bd25fc336eb76c198b72"
+      url: "https://pub.dev"
     source: hosted
-    version: "0.12.12"
+    version: "0.12.13"
   material_color_utilities:
     dependency: transitive
     description:
       name: material_color_utilities
-      url: "https://pub.dartlang.org"
+      sha256: d92141dc6fe1dad30722f9aa826c7fbc896d021d792f80678280601aff8cf724
+      url: "https://pub.dev"
     source: hosted
-    version: "0.1.5"
+    version: "0.2.0"
   meta:
     dependency: transitive
     description:
       name: meta
-      url: "https://pub.dartlang.org"
+      sha256: "6c268b42ed578a53088d834796959e4a1814b5e9e164f147f580a386e5decf42"
+      url: "https://pub.dev"
     source: hosted
     version: "1.8.0"
   nested:
     dependency: transitive
     description:
       name: nested
-      url: "https://pub.dartlang.org"
+      sha256: "03bac4c528c64c95c722ec99280375a6f2fc708eec17c7b3f07253b626cd2a20"
+      url: "https://pub.dev"
     source: hosted
     version: "1.0.0"
   path:
     dependency: transitive
     description:
       name: path
-      url: "https://pub.dartlang.org"
+      sha256: db9d4f58c908a4ba5953fcee2ae317c94889433e5024c27ce74a37f94267945b
+      url: "https://pub.dev"
     source: hosted
     version: "1.8.2"
   provider:
     dependency: "direct main"
     description:
       name: provider
-      url: "https://pub.dartlang.org"
+      sha256: cdbe7530b12ecd9eb455bdaa2fcb8d4dad22e80b8afb4798b41479d5ce26847f
+      url: "https://pub.dev"
     source: hosted
     version: "6.0.5"
   sky_engine:
@@ -151,51 +169,58 @@ packages:
     dependency: transitive
     description:
       name: source_span
-      url: "https://pub.dartlang.org"
+      sha256: dd904f795d4b4f3b870833847c461801f6750a9fa8e61ea5ac53f9422b31f250
+      url: "https://pub.dev"
     source: hosted
-    version: "1.9.0"
+    version: "1.9.1"
   stack_trace:
     dependency: transitive
     description:
       name: stack_trace
-      url: "https://pub.dartlang.org"
+      sha256: c3c7d8edb15bee7f0f74debd4b9c5f3c2ea86766fe4178eb2a18eb30a0bdaed5
+      url: "https://pub.dev"
     source: hosted
-    version: "1.10.0"
+    version: "1.11.0"
   stream_channel:
     dependency: transitive
     description:
       name: stream_channel
-      url: "https://pub.dartlang.org"
+      sha256: "83615bee9045c1d322bbbd1ba209b7a749c2cbcdcb3fdd1df8eb488b3279c1c8"
+      url: "https://pub.dev"
     source: hosted
-    version: "2.1.0"
+    version: "2.1.1"
   string_scanner:
     dependency: transitive
     description:
       name: string_scanner
-      url: "https://pub.dartlang.org"
+      sha256: "556692adab6cfa87322a115640c11f13cb77b3f076ddcc5d6ae3c20242bedcde"
+      url: "https://pub.dev"
     source: hosted
-    version: "1.1.1"
+    version: "1.2.0"
   term_glyph:
     dependency: transitive
     description:
       name: term_glyph
-      url: "https://pub.dartlang.org"
+      sha256: a29248a84fbb7c79282b40b8c72a1209db169a2e0542bce341da992fe1bc7e84
+      url: "https://pub.dev"
     source: hosted
     version: "1.2.1"
   test_api:
     dependency: transitive
     description:
       name: test_api
-      url: "https://pub.dartlang.org"
+      sha256: ad540f65f92caa91bf21dfc8ffb8c589d6e4dc0c2267818b4cc2792857706206
+      url: "https://pub.dev"
     source: hosted
-    version: "0.4.12"
+    version: "0.4.16"
   vector_math:
     dependency: transitive
     description:
       name: vector_math
-      url: "https://pub.dartlang.org"
+      sha256: "80b3257d1492ce4d091729e3a67a60407d227c27241d6927be0130c98e741803"
+      url: "https://pub.dev"
     source: hosted
-    version: "2.1.2"
+    version: "2.1.4"
 sdks:
   dart: ">=2.18.4 <3.0.0"
   flutter: ">=3.3.0"