a

lib/data.dart

@@ -6,87 +6,87 @@ final List items = [
     '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 ...',
+        'Fresh tuna meat prepared with traditional recipes from North Maluku. All recipes mixed together ...',
     'image': 'assets/images/food.png',
   },
   {
     'type': 'Services',
     'color': Color(0xff90D8F9),
-    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'smallText': 'Great services with bla bla bla ...',
     'longText':
-        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
+        'Great services with great service with great service with great service with great service with ...',
     'image': 'assets/images/service.png'
   },
   {
     'type': 'Additional',
     'color': Color(0xffAACEE0),
-    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'smallText': 'Additional service with bla bla bla ...',
     'longText':
-        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
+        'Additional service with additional service with additional service with additional service with additional service with ...',
     'image': 'assets/images/additional.png'
   },
   {
     'type': 'First Aid',
     'color': Color(0xffFF1111),
-    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'smallText': 'First Aid with bla bla bla ...',
     'longText':
-        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
+        'First Aid service with first Aid service with first Aid service with first Aid service with first Aid service with ...',
     'image': 'assets/images/firstaid.png'
   },
   {
     'type': 'Ticket',
     'color': Color(0xff5ED8F6),
-    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'smallText': 'Ticket service with ...',
     'longText':
-        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
+        'Ticket service with ticket service with ticket service with ticket service with ticket service with ticket service with ...',
     'image': 'assets/images/ticket.png'
   },
   {
     'type': 'Vacation',
     'color': Color(0xffCCA600),
-    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'smallText': 'Vacation service with ...',
     'longText':
-        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
+        'Vacation service with vacation service with vacation service with vacation service with vacation service with vacation service with ...',
     'image': 'assets/images/vacation.png'
   },
   {
     'type': 'Transportation',
     'color': Color(0xffCCA600),
-    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'smallText': 'Transportation service with ...',
     'longText':
-        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
+        'Transportation service with transportation service with transportation service with transportation service with transportation service with ...',
     'image': 'assets/images/transportation.png'
   },
   {
-    'type': 'First Aid2',
-    'color': Color(0xffFF1111),
-    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'type': 'Bathtub',
+    'color': Color(0xffFF1150),
+    'smallText': 'Bathtub service with ...',
     'longText':
-        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
-    'image': 'assets/images/firstaid.png'
+        'Bathtub service with bathtub service with bathtub service with bathtub service with bathtub service with bathtub service with bathtub service with ...',
+    'image': 'assets/images/bathtub.png'
   },
   {
-    'type': 'Foods & Drinks2',
+    'type': 'Danger',
     'color': Color(0xffCCA600),
-    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'smallText': 'Danger service with ...',
     'longText':
-        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
-    'image': 'assets/images/food.png'
+        'Danger service with danger service with danger service with danger service with danger service with danger service with danger service with danger service with ...',
+    'image': 'assets/images/danger-sign.png'
   },
   {
-    'type': 'Services2',
+    'type': 'Database',
     'color': Color(0xff90D8F9),
-    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'smallText': 'Database service with ...',
     'longText':
-        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
-    'image': 'assets/images/service.png'
+        'Database service with database service with database service with database service with database service with database service with database service with database service with ...',
+    'image': 'assets/images/database.png'
   },
   {
-    'type': 'Additional2',
+    'type': 'Noise',
     'color': Color(0xffAACEE0),
-    'smallText': 'Fresh smoked tuna with traditional recipe ...',
+    'smallText': 'Noise service with ...',
     'longText':
-        'Fresh tuna meat prepared with traditional recipes from Nort Maluku. All recipes mixed together ...',
-    'image': 'assets/images/additional.png'
+        'Noise service with noise service with noise service with noise service with noise service with noise service with noise service with noise service with noise service with noise service with ...',
+    'image': 'assets/images/noise-pollution.png'
   },
 ];

lib/detail.dart

@@ -1,6 +1,7 @@
 import 'package:dotted_line/dotted_line.dart';
 import 'package:flutter/material.dart';
 import 'package:date_format/date_format.dart';
+// import 'package:another_stepper/another_stepper.dart';
 
 var date = formatDate(DateTime.now(), [HH, ':', nn]);
 
@@ -10,7 +11,6 @@ class DetailPage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    // print(items);
     return Scaffold(
       appBar: AppBar(
         backgroundColor: Colors.white,
@@ -109,7 +109,6 @@ class DetailPage extends StatelessWidget {
                         children: [
                           Container(
                             margin: EdgeInsets.all(5),
-                            decoration: BoxDecoration(),
                             child: Text(
                               items['smallText'],
                               overflow: TextOverflow.clip,
@@ -125,7 +124,6 @@ class DetailPage extends StatelessWidget {
                           Container(
                             margin: EdgeInsets.all(5),
                             width: 272,
-                            decoration: BoxDecoration(),
                             child: Text(
                               items['longText'],
                               overflow: TextOverflow.clip,
@@ -278,6 +276,42 @@ class DetailPage extends StatelessWidget {
                 style: TextStyle(fontWeight: FontWeight.w400, fontSize: 14),
               ),
             ),
+            // Padding(
+            //   padding: const EdgeInsets.all(10),
+            //   child: AnotherStepper(
+            //     stepperDirection: Axis.vertical,
+            //     stepperList: [
+            //       StepperData(
+            //           subtitle: StepperText('Requested',
+            //               textStyle: TextStyle(
+            //                   color: Color(0xff292D32), fontSize: 14)),
+            //           iconWidget: Container(
+            //             decoration: BoxDecoration(
+            //                 color: Color(0xffE8E8E8),
+            //                 borderRadius: BorderRadius.circular(30)),
+            //           )),
+            //       StepperData(
+            //           subtitle: StepperText('On Process',
+            //               textStyle: TextStyle(
+            //                   color: Color(0xff292D32), fontSize: 14)),
+            //           iconWidget: Container(
+            //             decoration: BoxDecoration(
+            //                 color: Color(0xffE8E8E8),
+            //                 borderRadius: BorderRadius.circular(30)),
+            //           )),
+            //       StepperData(
+            //           subtitle: StepperText('Finish',
+            //               textStyle: TextStyle(
+            //                   color: Color(0xff292D32), fontSize: 14)),
+            //           iconWidget: Container(
+            //             decoration: BoxDecoration(
+            //                 color: Color(0xff078C84),
+            //                 borderRadius: BorderRadius.circular(30)),
+            //           )),
+            //     ],
+            //     verticalGap: 10,
+            //   ),
+            // ),
             Container(
               height: 10,
             ),

lib/listblock.dart

@@ -65,10 +65,14 @@ class ListBlockPage extends StatelessWidget {
                   itemBuilder: (context, index) => Column(
                     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                     children: [
-                      SizedBox(
-                        width: 60,
-                        height: 60,
-                        child: gambar(items[index]),
+                      InkWell(
+                        onTap: () =>
+                            context.go("/search/${items[index]['type']}"),
+                        child: SizedBox(
+                          width: 60,
+                          height: 60,
+                          child: gambar(items[index]),
+                        ),
                       ),
                       Text(items[index]['type']),
                     ],
@@ -83,10 +87,14 @@ class ListBlockPage extends StatelessWidget {
                   itemBuilder: (context, index) => Column(
                     mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                     children: [
-                      SizedBox(
-                        width: 60,
-                        height: 60,
-                        child: gambar(items[index]),
+                      InkWell(
+                        onTap: () =>
+                            context.go("/search/${items[index]['type']}"),
+                        child: SizedBox(
+                          width: 60,
+                          height: 60,
+                          child: gambar(items[index]),
+                        ),
                       ),
                       Text(items[index]['type']),
                     ],

lib/main.dart

@@ -8,6 +8,7 @@ import 'package:namer_app/lang.dart';
 import 'package:namer_app/listblock.dart';
 import 'package:flutter/rendering.dart';
 import 'package:namer_app/detail.dart';
+import 'package:namer_app/search.dart';
 
 void main() {
   runApp(MyApp());
@@ -29,7 +30,6 @@ final _router = GoRouter(
             builder: (context, state) => ListBlockPage(),
           ),
           GoRoute(
-              name: 'detail',
               path: 'detail/:type',
               builder: (context, state) {
                 var item = items.firstWhere(
@@ -41,7 +41,14 @@ final _router = GoRouter(
       GoRoute(
         path: 'account',
         builder: (context, state) => AccountPage(),
-      )
+      ),
+      GoRoute(
+          path: 'search/:type',
+          builder: (context, state) {
+            var item = items.firstWhere(
+                (element) => element['type'] == state.params['type']);
+            return SearchPage(items: item);
+          })
     ]),
   ],
 );

lib/search.dart

@@ -0,0 +1,173 @@
+import 'package:flutter/material.dart';
+import 'package:date_format/date_format.dart';
+import 'package:dotted_line/dotted_line.dart';
+
+var date = formatDate(DateTime.now(), [HH, ':', nn]);
+
+class SearchPage extends StatelessWidget {
+  final Map<String, dynamic> items;
+  SearchPage({super.key, required this.items});
+
+  @override
+  Widget build(BuildContext context) {
+    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: SingleChildScrollView(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                BackButton(),
+                Container(
+                  height: 44,
+                  alignment: Alignment.centerLeft,
+                  padding: EdgeInsets.symmetric(horizontal: 10),
+                  child: Text(
+                    items['type'],
+                    style: TextStyle(fontWeight: FontWeight.w500, fontSize: 17),
+                  ),
+                ),
+              ],
+            ),
+            Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 10),
+              child: SizedBox(
+                width: 396,
+                height: 267.72,
+                child: gambar(items),
+              ),
+            ),
+            Container(
+              margin: EdgeInsets.all(10),
+              decoration: BoxDecoration(
+                  border: Border.all(color: Colors.black.withOpacity(0.1)),
+                  shape: BoxShape.rectangle,
+                  borderRadius: BorderRadius.circular(12)),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Container(
+                    margin: EdgeInsets.all(5),
+                    child: Text(
+                      items['type'],
+                      overflow: TextOverflow.clip,
+                      style: TextStyle(
+                          fontWeight: FontWeight.w400,
+                          color: Color(0xff292D32),
+                          fontSize: 14),
+                    ),
+                  ),
+                  Padding(
+                    padding: const EdgeInsets.symmetric(horizontal: 5),
+                    child: DottedLine(
+                      lineLength: 396,
+                    ),
+                  ),
+                  Container(
+                    margin: EdgeInsets.all(5),
+                    width: 396,
+                    child: Text(
+                      items['longText'],
+                      overflow: TextOverflow.clip,
+                      style: TextStyle(
+                          fontWeight: FontWeight.w300,
+                          color: Color(0xff292D32),
+                          fontSize: 13),
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            Container(
+              margin: EdgeInsets.symmetric(horizontal: 10),
+              child: Text(
+                'Your Location',
+                style: TextStyle(fontWeight: FontWeight.w500, fontSize: 14),
+              ),
+            ),
+            Container(
+              margin: EdgeInsets.all(10),
+              decoration: BoxDecoration(
+                  border: Border.all(color: Colors.black.withOpacity(0.1)),
+                  shape: BoxShape.rectangle,
+                  borderRadius: BorderRadius.circular(12)),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Row(
+                    children: [
+                      Icon(Icons.remove),
+                      Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [Text('Default Location'), Text('Room 331')],
+                      )
+                    ],
+                  ),
+                  Divider(),
+                  Row(
+                    children: [
+                      Icon(Icons.add),
+                      Column(
+                        children: [
+                          Text('I moved to other location'),
+                          Container(
+                            decoration: BoxDecoration(
+                                border: Border.all(
+                                    color: Colors.black.withOpacity(0.1)),
+                                shape: BoxShape.rectangle,
+                                borderRadius: BorderRadius.circular(12)),
+                          )
+                        ],
+                      )
+                    ],
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  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,
+      ),
+    );
+  }
+}

pubspec.lock

@@ -1,6 +1,22 @@
 # Generated by pub
 # See https://dart.dev/tools/pub/glossary#lockfile
 packages:
+  another_stepper:
+    dependency: "direct main"
+    description:
+      name: another_stepper
+      sha256: "04f5166c57f2412c612b17101e8a3d819f210c53f6bc1b5be541dc4c6987c681"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.2"
+  archive:
+    dependency: transitive
+    description:
+      name: archive
+      sha256: d6347d54a2d8028e0437e3c099f66fdb8ae02c4720c1e7534c9f24c10351f85d
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.3.6"
   async:
     dependency: transitive
     description:
@@ -41,6 +57,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.17.0"
+  convert:
+    dependency: transitive
+    description:
+      name: convert
+      sha256: "0f08b14755d163f6e2134cb58222dd25ea2a2ee8a195e53983d57c075324d592"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.1.1"
+  crypto:
+    dependency: transitive
+    description:
+      name: crypto
+      sha256: aa274aa7774f8964e4f4f38cc994db7b6158dd36e9187aaceaddc994b35c6c67
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.2"
   date_format:
     dependency: "direct main"
     description:
@@ -57,6 +89,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.1.0"
+  easy_stepper:
+    dependency: "direct main"
+    description:
+      name: easy_stepper
+      sha256: c08c1a1a3346beb093aa4382d2942516635b1290d4117974577329f966b69375
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.3.2"
   english_words:
     dependency: "direct main"
     description:
@@ -112,6 +152,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "6.0.6"
+  im_stepper:
+    dependency: "direct main"
+    description:
+      name: im_stepper
+      sha256: "84ca411f7c4666cb8762a6dd6eec0353c96c67f674124614263875d0570ca634"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.0.1+1"
   js:
     dependency: transitive
     description:
@@ -136,6 +184,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.1.1"
+  lottie:
+    dependency: transitive
+    description:
+      name: lottie
+      sha256: "49bbc544e44bf0c734ccda29b182e3516a12f5021ea98b206cf31a168b0f97da"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.2.0"
   matcher:
     dependency: transitive
     description:
@@ -176,6 +232,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.8.2"
+  pointycastle:
+    dependency: transitive
+    description:
+      name: pointycastle
+      sha256: db7306cf0249f838d1a24af52b5a5887c5bf7f31d8bb4e827d071dc0939ad346
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.6.2"
   provider:
     dependency: "direct main"
     description:
@@ -245,6 +309,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.4.16"
+  typed_data:
+    dependency: transitive
+    description:
+      name: typed_data
+      sha256: "26f87ade979c47a150c9eaab93ccd2bebe70a27dc0b4b29517f2904f04eb11a5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.3.1"
   vector_math:
     dependency: transitive
     description:

pubspec.yaml

@@ -11,13 +11,15 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
-
   english_words: ^4.0.0
   provider: ^6.0.0
   go_router: ^6.0.2
   flutter_layout_grid: ^1.0.3
   date_format: ^2.0.7
   dotted_line: ^3.1.0
+  another_stepper: ^1.2.2
+  easy_stepper: ^0.3.2
+  im_stepper: ^1.0.1+1
 
 dev_dependencies:
   flutter_test: