a

lib/account.dart

@@ -49,6 +49,15 @@ class _AccountPageState extends State<AccountPage> {
           )
         ],
       ),
+      bottomNavigationBar: BottomNavigationBar(
+        items: [
+          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
+          BottomNavigationBarItem(icon: Icon(Icons.history), label: 'History'),
+          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Account')
+        ],
+        currentIndex: _selectedNavbar,
+        onTap: _changeSelectedNavBar,
+      ),
       body: Column(
         children: [
           Container(
@@ -99,7 +108,7 @@ class _AccountPageState extends State<AccountPage> {
               children: [
                 Text(
                   'User ID',
-                  style: TextStyle(color: Color(0xff2D32BF).withOpacity(0.75)),
+                  style: TextStyle(color: Color(0xff292D32).withOpacity(0.75)),
                 ),
                 Spacer(),
                 Text(
@@ -118,7 +127,7 @@ class _AccountPageState extends State<AccountPage> {
               children: [
                 Text(
                   'Location',
-                  style: TextStyle(color: Color(0xff2D32BF).withOpacity(0.75)),
+                  style: TextStyle(color: Color(0xff292D32).withOpacity(0.75)),
                 ),
                 Spacer(),
                 Text(
@@ -137,7 +146,7 @@ class _AccountPageState extends State<AccountPage> {
               children: [
                 Text(
                   'Request Group',
-                  style: TextStyle(color: Color(0xff2D32BF).withOpacity(0.75)),
+                  style: TextStyle(color: Color(0xff292D32).withOpacity(0.75)),
                 ),
                 Spacer(),
                 Text(
@@ -167,7 +176,7 @@ class _AccountPageState extends State<AccountPage> {
               children: [
                 Icon(
                   Icons.language,
-                  color: Color(0xff2D32BF).withOpacity(0.75),
+                  color: Color(0xff292D32).withOpacity(0.75),
                 ),
                 Container(
                     margin: EdgeInsets.symmetric(horizontal: 5),
@@ -192,7 +201,7 @@ class _AccountPageState extends State<AccountPage> {
                   turns: AlwaysStoppedAnimation(135 / 360),
                   child: Icon(
                     Icons.vpn_key,
-                    color: Color(0xff2D32BF).withOpacity(0.75),
+                    color: Color(0xff292D32).withOpacity(0.75),
                   ),
                 ),
                 Container(
@@ -216,7 +225,7 @@ class _AccountPageState extends State<AccountPage> {
               children: [
                 Icon(
                   Icons.logout,
-                  color: Color(0xff2D32BF).withOpacity(0.75),
+                  color: Color(0xff292D32).withOpacity(0.75),
                 ),
                 Container(
                     margin: EdgeInsets.symmetric(horizontal: 5),
@@ -232,18 +241,7 @@ class _AccountPageState extends State<AccountPage> {
           Divider(
             thickness: 8,
           ),
-          Spacer(),
-          BottomNavigationBar(
-            items: [
-              BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
-              BottomNavigationBarItem(
-                  icon: Icon(Icons.history), label: 'History'),
-              BottomNavigationBarItem(
-                  icon: Icon(Icons.person), label: 'Account')
-            ],
-            currentIndex: _selectedNavbar,
-            onTap: _changeSelectedNavBar,
-          )
+          // Spacer(),
         ],
       ),
     );

lib/data.dart

@@ -4,56 +4,89 @@ final List items = [
   {
     'type': 'Foods & Drinks',
     'color': Color(0xffCCA600),
-    'image': 'assets/images/food.png'
+    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'longText':
+        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
+    'image': 'assets/images/food.png',
   },
   {
     'type': 'Services',
     'color': Color(0xff90D8F9),
+    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'longText':
+        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
     'image': 'assets/images/service.png'
   },
   {
     'type': 'Additional',
     'color': Color(0xffAACEE0),
+    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'longText':
+        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
     'image': 'assets/images/additional.png'
   },
   {
     'type': 'First Aid',
     'color': Color(0xffFF1111),
+    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'longText':
+        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
     'image': 'assets/images/firstaid.png'
   },
   {
     'type': 'Ticket',
     'color': Color(0xff5ED8F6),
+    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'longText':
+        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
     'image': 'assets/images/ticket.png'
   },
   {
     'type': 'Vacation',
     'color': Color(0xffCCA600),
+    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'longText':
+        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
     'image': 'assets/images/vacation.png'
   },
   {
     'type': 'Transportation',
     'color': Color(0xffCCA600),
+    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'longText':
+        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
     'image': 'assets/images/transportation.png'
   },
   {
-    'type': 'First Aid',
+    'type': 'First Aid2',
     'color': Color(0xffFF1111),
+    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'longText':
+        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
     'image': 'assets/images/firstaid.png'
   },
   {
-    'type': 'Foods & Drinks',
+    'type': 'Foods & Drinks2',
     'color': Color(0xffCCA600),
+    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'longText':
+        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
     'image': 'assets/images/food.png'
   },
   {
-    'type': 'Services',
+    'type': 'Services2',
     'color': Color(0xff90D8F9),
+    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'longText':
+        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
     'image': 'assets/images/service.png'
   },
   {
-    'type': 'Additional',
+    'type': 'Additional2',
     'color': Color(0xffAACEE0),
+    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'longText':
+        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
     'image': 'assets/images/additional.png'
   },
 ];

lib/detail.dart

@@ -1,3 +1,4 @@
+import 'package:dotted_line/dotted_line.dart';
 import 'package:flutter/material.dart';
 import 'package:date_format/date_format.dart';
 
@@ -38,104 +39,392 @@ class DetailPage extends StatelessWidget {
           )
         ],
       ),
-      body: Column(
-        children: [
-          Row(
-            children: [
-              BackButton(),
-              Text(
-                'Detail',
-                style: TextStyle(fontWeight: FontWeight.bold),
+      body: SingleChildScrollView(
+        child: Column(
+          children: [
+            Row(
+              children: [
+                BackButton(),
+                Text(
+                  'Detail',
+                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 17),
+                ),
+                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), fontSize: 15),
+                      ),
+                      SizedBox(
+                        width: 5,
+                      ),
+                      Icon(
+                        Icons.message_outlined,
+                        color: Color(0xff078C84),
+                      )
+                    ],
+                  ),
+                )
+              ],
+            ),
+            Divider(),
+            Container(
+              height: 44,
+              alignment: Alignment.centerLeft,
+              padding: EdgeInsets.symmetric(horizontal: 10),
+              child: Text(
+                items['type'],
+                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
               ),
-              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),
-                    )
-                  ],
+            ),
+            Row(
+              children: [
+                Container(
+                  width: 400,
+                  margin: EdgeInsets.symmetric(horizontal: 10),
+                  decoration: BoxDecoration(
+                      border: Border.all(color: Colors.black.withOpacity(0.1)),
+                      shape: BoxShape.rectangle,
+                      borderRadius: BorderRadius.circular(12)),
+                  child: Row(
+                    children: [
+                      SizedBox(
+                        width: 100,
+                        height: 79.17,
+                        child: gambar(items),
+                      ),
+                      Container(
+                        width: 5,
+                      ),
+                      Column(
+                        children: [
+                          Container(
+                            margin: EdgeInsets.all(5),
+                            decoration: BoxDecoration(),
+                            child: Text(
+                              items['smallText'],
+                              overflow: TextOverflow.clip,
+                              style: TextStyle(
+                                  fontWeight: FontWeight.w400,
+                                  color: Color(0xff292D32),
+                                  fontSize: 14),
+                            ),
+                          ),
+                          DottedLine(
+                            lineLength: 272,
+                          ),
+                          Container(
+                            margin: EdgeInsets.all(5),
+                            width: 272,
+                            decoration: BoxDecoration(),
+                            child: Text(
+                              items['longText'],
+                              overflow: TextOverflow.clip,
+                              style: TextStyle(
+                                  fontWeight: FontWeight.w300,
+                                  color: Color(0xff292D32),
+                                  fontSize: 13),
+                            ),
+                          )
+                        ],
+                      )
+                    ],
+                  ),
                 ),
-              )
-            ],
-          ),
-          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),
+            Container(
+              height: 10,
+            ),
+            Container(
+              padding: EdgeInsets.symmetric(horizontal: 10),
+              child: Row(
+                children: [
+                  Text(
+                    'Ticket Number',
+                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
+                  ),
+                  Spacer(),
+                  Text(
+                    '202209270254',
+                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
+                  )
+                ],
+              ),
+            ),
+            Container(
+              height: 10,
+            ),
+            Container(
+              padding: EdgeInsets.symmetric(horizontal: 10),
+              child: Row(
+                children: [
+                  Text(
+                    'Location',
+                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
+                  ),
+                  Spacer(),
+                  Text(
+                    'Room 331',
+                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
+                  )
+                ],
+              ),
+            ),
+            Container(
+              margin: EdgeInsets.all(10),
+              height: 1,
+              color: Color(0xff292D32).withOpacity(0.5),
+            ),
+            Container(
+              alignment: Alignment.centerLeft,
+              padding: EdgeInsets.symmetric(horizontal: 10),
+              child: Text(
+                'Image',
+                style: TextStyle(fontWeight: FontWeight.w400, fontSize: 14),
+              ),
+            ),
+            Container(
+              height: 5,
+            ),
+            Container(
+              alignment: Alignment.centerLeft,
+              padding: EdgeInsets.symmetric(horizontal: 10),
+              child: Text(
+                'No image attached.',
+                style: TextStyle(
+                    fontWeight: FontWeight.w400,
+                    fontSize: 12,
+                    color: Color(0xff292D32).withOpacity(0.85)),
+              ),
+            ),
+            Container(
+              height: 10,
+            ),
+            Container(
+              alignment: Alignment.centerLeft,
+              padding: EdgeInsets.symmetric(horizontal: 10),
+              child: Text(
+                'Note',
+                style: TextStyle(fontWeight: FontWeight.w400, fontSize: 14),
+              ),
+            ),
+            Container(
+              height: 5,
+            ),
+            Container(
+              alignment: Alignment.centerLeft,
+              padding: EdgeInsets.symmetric(horizontal: 10),
+              child: Text(
+                '-',
+                style: TextStyle(
+                    fontWeight: FontWeight.w400,
+                    fontSize: 12,
+                    color: Color(0xff292D32).withOpacity(0.85)),
+              ),
+            ),
+            Divider(
+              thickness: 8,
+            ),
+            Container(
+              height: 10,
+            ),
+            Container(
+              alignment: Alignment.centerLeft,
+              padding: EdgeInsets.symmetric(horizontal: 10),
+              child: Text(
+                'Activity',
+                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
+              ),
+            ),
+            Container(
+              height: 10,
+            ),
+            Container(
+              padding: EdgeInsets.symmetric(horizontal: 10),
+              child: Row(
+                children: [
+                  Text(
+                    'Servant',
+                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
+                  ),
+                  Spacer(),
+                  Text(
+                    'Rendra WS',
+                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
+                  )
+                ],
+              ),
+            ),
+            Container(
+              margin: EdgeInsets.all(10),
+              height: 1,
+              color: Color(0xff292D32).withOpacity(0.5),
+            ),
+            Container(
+              alignment: Alignment.centerLeft,
+              padding: EdgeInsets.symmetric(horizontal: 10),
+              child: Text(
+                'Timeline',
+                style: TextStyle(fontWeight: FontWeight.w400, fontSize: 14),
+              ),
+            ),
+            Container(
+              height: 10,
+            ),
+            Container(
+              padding: EdgeInsets.symmetric(horizontal: 10),
+              child: Row(
+                children: [
+                  Icon(
+                    Icons.circle,
+                    color: Color(0xffE8E8E8),
+                  ),
+                  Container(
+                    width: 10,
+                  ),
+                  Text(
+                    'Requested',
+                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
+                  ),
+                  Spacer(),
+                  Text(
+                    '31 Jan 12:43',
+                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
+                  )
+                ],
               ),
-              Column(
+            ),
+            Container(
+              height: 5,
+            ),
+            Container(
+              padding: EdgeInsets.symmetric(horizontal: 10),
+              child: Row(
                 children: [
+                  Icon(
+                    Icons.circle,
+                    color: Color(0xffE8E8E8),
+                  ),
                   Container(
-                    decoration: BoxDecoration(),
-                    child: Text(
-                      'Fresh smoked tuna with traditional recipe ...',
-                      overflow: TextOverflow.clip,
-                      style: TextStyle(
-                          fontWeight: FontWeight.w400,
-                          color: Color(0xff292D32)),
-                    ),
+                    width: 10,
+                  ),
+                  Text(
+                    'On Process',
+                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
+                  ),
+                  Spacer(),
+                  Text(
+                    '31 Jan 14:43',
+                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
+                  )
+                ],
+              ),
+            ),
+            Container(
+              height: 5,
+            ),
+            Container(
+              padding: EdgeInsets.symmetric(horizontal: 10),
+              child: Row(
+                children: [
+                  Icon(
+                    Icons.circle,
+                    color: Color(0xff078C84),
                   ),
                   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)),
-                    ),
+                    width: 10,
+                  ),
+                  Text(
+                    'Finish',
+                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
+                  ),
+                  Spacer(),
+                  Text(
+                    '31 Jan 15:43',
+                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
                   )
                 ],
-              )
-            ],
-          ),
-        ],
+              ),
+            ),
+            Container(
+              height: 5,
+            ),
+            Container(
+              alignment: Alignment.centerRight,
+              padding: EdgeInsets.symmetric(horizontal: 10),
+              child: Text(
+                'tamu minta dibungkus untuk dibawa keluar',
+                style: TextStyle(
+                  fontWeight: FontWeight.w400,
+                  fontSize: 12,
+                  color: Color(0xff078C84),
+                ),
+              ),
+            ),
+            Container(
+              height: 10,
+            ),
+            Container(
+              margin: EdgeInsets.all(10),
+              height: 1,
+              color: Color(0xff292D32).withOpacity(0.5),
+            ),
+            Container(
+              height: 10,
+            ),
+            Container(
+              padding: EdgeInsets.symmetric(horizontal: 10),
+              child: Row(
+                children: [
+                  Container(
+                    width: 10,
+                  ),
+                  Text(
+                    'Rate',
+                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
+                  ),
+                  Spacer(),
+                  Text(
+                    'Really pleased',
+                    style: TextStyle(color: Color(0xff292D32), fontSize: 14),
+                  ),
+                  Container(
+                    width: 10,
+                  ),
+                  Icon(Icons.tag_faces)
+                ],
+              ),
+            ),
+            Divider(
+              thickness: 8,
+            ),
+          ],
+        ),
       ),
     );
   }
 
-  // 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,
-  //     ),
-  //   );
-  // }
+  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'],
+        fit: BoxFit.cover,
+      ),
+    );
+  }
 }

lib/list.dart

@@ -64,7 +64,11 @@ class ListPage extends StatelessWidget {
                         7,
                         (i) => SizedBox(
                               child: ListTile(
-                                leading: gambar(items[i]),
+                                leading: SizedBox(
+                                  width: 60,
+                                  height: 60,
+                                  child: gambar(items[i]),
+                                ),
                                 title: Text(items[i]['type']),
                                 subtitle: Text(
                                     'Description of ${items[i]['type'].toLowerCase()}'),
@@ -83,7 +87,11 @@ class ListPage extends StatelessWidget {
                         items.length,
                         (i) => SizedBox(
                               child: ListTile(
-                                leading: gambar(items[i]),
+                                leading: SizedBox(
+                                  width: 60,
+                                  height: 60,
+                                  child: gambar(items[i]),
+                                ),
                                 title: Text(items[i]['type']),
                                 subtitle: Text(
                                     'Description of ${items[i]['type'].toLowerCase()}'),
@@ -107,8 +115,6 @@ class ListPage extends StatelessWidget {
       padding: const EdgeInsets.all(5.0),
       child: Image.asset(
         items['image'],
-        width: 36,
-        height: 36,
         fit: BoxFit.cover,
       ),
     );
@@ -201,11 +207,13 @@ class IconDelete extends StatelessWidget {
         IconButton(
           icon: Icon(Icons.remove_circle),
           color: Colors.red,
-          onPressed: () {print(items);},
+          onPressed: () {
+            print(items);
+          },
         ),
         SizedBox(width: 10),
         IconButton(
-          onPressed: () => context.goNamed('detail', queryParams: items),
+          onPressed: () => context.go("/list/detail/${items['type']}"),
           icon: Icon(Icons.menu),
         )
       ],

lib/listblock.dart

@@ -65,7 +65,11 @@ class ListBlockPage extends StatelessWidget {
                   itemBuilder: (context, index) => Column(
                     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                     children: [
-                      gambar(items[index]),
+                      SizedBox(
+                        width: 60,
+                        height: 60,
+                        child: gambar(items[index]),
+                      ),
                       Text(items[index]['type']),
                     ],
                   ),
@@ -79,7 +83,11 @@ class ListBlockPage extends StatelessWidget {
                   itemBuilder: (context, index) => Column(
                     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                     children: [
-                      gambar(items[index]),
+                      SizedBox(
+                        width: 60,
+                        height: 60,
+                        child: gambar(items[index]),
+                      ),
                       Text(items[index]['type']),
                     ],
                   ),
@@ -100,8 +108,6 @@ class ListBlockPage extends StatelessWidget {
       padding: const EdgeInsets.all(5.0),
       child: Image.asset(
         items['image'],
-        width: 36,
-        height: 36,
         fit: BoxFit.cover,
       ),
     );

lib/main.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:namer_app/account.dart';
+import 'package:namer_app/data.dart';
 import 'package:namer_app/list.dart';
 import 'package:namer_app/login.dart';
 import 'package:namer_app/lang.dart';
@@ -29,9 +30,11 @@ final _router = GoRouter(
           ),
           GoRoute(
               name: 'detail',
-              path: 'detail',
+              path: 'detail/:type',
               builder: (context, state) {
-                return DetailPage(items: state.queryParams);
+                var item = items.firstWhere(
+                    (element) => element['type'] == state.params['type']);
+                return DetailPage(items: item);
               })
         ],
       ),

pubspec.lock

@@ -49,6 +49,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.0.7"
+  dotted_line:
+    dependency: "direct main"
+    description:
+      name: dotted_line
+      sha256: "453e6d0ec4fe923ae00469dbc2973b9e9b11ef1c71abcded003d05af0a219d23"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.0"
   english_words:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -17,6 +17,7 @@ dependencies:
   go_router: ^6.0.2
   flutter_layout_grid: ^1.0.3
   date_format: ^2.0.7
+  dotted_line: ^3.1.0
 
 dev_dependencies:
   flutter_test: