a

lib/account.dart

@@ -241,7 +241,6 @@ class _AccountPageState extends State<AccountPage> {
           Divider(
             thickness: 8,
           ),
-          // Spacer(),
         ],
       ),
     );

lib/detail.dart

@@ -2,6 +2,8 @@ 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';
+// import 'package:easy_stepper/easy_stepper.dart';
+import 'package:timeline_tile/timeline_tile.dart';
 
 var date = formatDate(DateTime.now(), [HH, ':', nn]);
 
@@ -276,10 +278,43 @@ class DetailPage extends StatelessWidget {
                 style: TextStyle(fontWeight: FontWeight.w400, fontSize: 14),
               ),
             ),
+            //=======timelines=======
+            TimelineTile(
+              indicatorStyle: IndicatorStyle(
+                width: 20,
+                height: 5,
+                indicatorXY: 0,
+              ),
+              endChild: Container(
+                padding: EdgeInsets.symmetric(horizontal: 10),
+                child: Row(
+                  children: [
+                    Text('Requested'),
+                    Spacer(),
+                    Text('31 Jan 12:43'),
+                  ],
+                ),
+              ),
+            ),
+            //=======timelines=======
+            //=======easy stepper=======
+            // EasyStepper(
+            //   activeStep: 1,
+            //   direction: Axis.vertical,
+            //   alignment: Alignment.centerLeft,
+            //   steps: [
+            //     EasyStep(icon: Icon(Icons.abc), lineText: 'def'),
+            //     EasyStep(icon: Icon(Icons.ac_unit)),
+            //     EasyStep(icon: Icon(Icons.access_alarm)),
+            //   ],
+            // ),
+            //=======easy stepper=======
+            //=======another stepper======
             // Padding(
             //   padding: const EdgeInsets.all(10),
             //   child: AnotherStepper(
             //     stepperDirection: Axis.vertical,
+            //     verticalGap: 10,
             //     stepperList: [
             //       StepperData(
             //           subtitle: StepperText('Requested',
@@ -309,90 +344,111 @@ class DetailPage extends StatelessWidget {
             //                 borderRadius: BorderRadius.circular(30)),
             //           )),
             //     ],
-            //     verticalGap: 10,
             //   ),
             // ),
-            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),
-                  )
-                ],
-              ),
-            ),
-            Container(
-              height: 5,
-            ),
-            Container(
-              padding: EdgeInsets.symmetric(horizontal: 10),
-              child: Row(
-                children: [
-                  Icon(
-                    Icons.circle,
-                    color: Color(0xffE8E8E8),
-                  ),
-                  Container(
-                    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: 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,
-            ),
+            //=======another stepper======
+            //=======stepper=======
+            // Stepper(
+            //     controlsBuilder: (context, details) {
+            //       return Container(height: 1,);
+            //     },
+            //     steps: [
+            //       Step(
+            //           content: Container(height: null,),
+            //           title: Row(
+            //             children: [
+            //               Text('Requested'),
+            //               Spacer(),
+            //               Text('31 Jan 12:43')
+            //             ],
+            //           )),
+            //       Step(content: Container(), title: Text('On Process')),
+            //       Step(content: Container(), title: Text('Finish')),
+            //     ]),
+            //=======stepper=======
+            //=======manual========
+            // 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),
+            //       )
+            //     ],
+            //   ),
+            // ),
+            // Container(
+            //   height: 5,
+            // ),
+            // Container(
+            //   padding: EdgeInsets.symmetric(horizontal: 10),
+            //   child: Row(
+            //     children: [
+            //       Icon(
+            //         Icons.circle,
+            //         color: Color(0xffE8E8E8),
+            //       ),
+            //       Container(
+            //         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: 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,
+            // ),
+            //=======manual========
             Container(
               alignment: Alignment.centerRight,
               padding: EdgeInsets.symmetric(horizontal: 10),

lib/listblock.dart

@@ -67,7 +67,7 @@ class ListBlockPage extends StatelessWidget {
                     children: [
                       InkWell(
                         onTap: () =>
-                            context.go("/search/${items[index]['type']}"),
+                            context.go("/list/listblock/search/${items[index]['type']}"),
                         child: SizedBox(
                           width: 60,
                           height: 60,
@@ -89,7 +89,7 @@ class ListBlockPage extends StatelessWidget {
                     children: [
                       InkWell(
                         onTap: () =>
-                            context.go("/search/${items[index]['type']}"),
+                            context.go("/list/listblock/search/${items[index]['type']}"),
                         child: SizedBox(
                           width: 60,
                           height: 60,

lib/main.dart

@@ -28,6 +28,15 @@ final _router = GoRouter(
           GoRoute(
             path: 'listblock',
             builder: (context, state) => ListBlockPage(),
+            routes: [
+              GoRoute(
+                  path: 'search/:type',
+                  builder: (context, state) {
+                    var item = items.firstWhere(
+                        (element) => element['type'] == state.params['type']);
+                    return SearchPage(items: item);
+                  })
+            ],
           ),
           GoRoute(
               path: 'detail/:type',
@@ -42,13 +51,6 @@ final _router = GoRouter(
         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);
-          })
     ]),
   ],
 );
@@ -175,6 +177,9 @@ class Pindai extends StatelessWidget {
                 'Pindai QR',
                 style: TextStyle(color: Colors.white, fontSize: 20),
               ),
+              Container(
+                width: 5,
+              ),
               Image.asset(
                 'assets/images/scan_icon_183865.png',
                 width: 32,

lib/search.dart

@@ -65,7 +65,8 @@ class SearchPage extends StatelessWidget {
               ),
             ),
             Container(
-              margin: EdgeInsets.all(10),
+              width: 396,
+              margin: EdgeInsets.all(5),
               decoration: BoxDecoration(
                   border: Border.all(color: Colors.black.withOpacity(0.1)),
                   shape: BoxShape.rectangle,
@@ -86,13 +87,10 @@ class SearchPage extends StatelessWidget {
                   ),
                   Padding(
                     padding: const EdgeInsets.symmetric(horizontal: 5),
-                    child: DottedLine(
-                      lineLength: 396,
-                    ),
+                    child: DottedLine(),
                   ),
                   Container(
                     margin: EdgeInsets.all(5),
-                    width: 396,
                     child: Text(
                       items['longText'],
                       overflow: TextOverflow.clip,
@@ -106,51 +104,169 @@ class SearchPage extends StatelessWidget {
               ),
             ),
             Container(
-              margin: EdgeInsets.symmetric(horizontal: 10),
+              margin: EdgeInsets.all(10),
               child: Text(
                 'Your Location',
                 style: TextStyle(fontWeight: FontWeight.w500, fontSize: 14),
               ),
             ),
+            Container(
+                width: 396,
+                margin: EdgeInsets.symmetric(horizontal: 10),
+                decoration: BoxDecoration(
+                    color: Color(0xff078C84).withOpacity(0.85),
+                    border: Border.all(color: Color(0xff078C84)),
+                    shape: BoxShape.rectangle,
+                    borderRadius: BorderRadius.only(
+                        topLeft: Radius.circular(12),
+                        topRight: Radius.circular(12))),
+                child: Padding(
+                    padding: const EdgeInsets.all(5),
+                    child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Row(
+                            children: [
+                              Icon(Icons.remove),
+                              Column(
+                                crossAxisAlignment: CrossAxisAlignment.start,
+                                children: [
+                                  Text('Default Location'),
+                                  Container(
+                                    height: 5,
+                                  ),
+                                  Text('Room 331')
+                                ],
+                              )
+                            ],
+                          ),
+                        ]))),
+            Container(
+                width: 396,
+                margin: EdgeInsets.symmetric(
+                  horizontal: 10,
+                ),
+                decoration: BoxDecoration(
+                    border: Border.all(color: Colors.black.withOpacity(0.1)),
+                    shape: BoxShape.rectangle,
+                    borderRadius: BorderRadius.only(
+                        bottomLeft: Radius.circular(12),
+                        bottomRight: Radius.circular(12))),
+                child: Padding(
+                    padding: const EdgeInsets.all(5),
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Row(
+                          children: [
+                            Icon(Icons.add),
+                            Column(
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: [
+                                Text('I moved to other location'),
+                                Container(
+                                  width: 350,
+                                  margin: EdgeInsets.symmetric(vertical: 5),
+                                  decoration: BoxDecoration(
+                                      border: Border.all(
+                                          color: Colors.black.withOpacity(0.1)),
+                                      shape: BoxShape.rectangle,
+                                      borderRadius: BorderRadius.circular(12)),
+                                  child: Row(
+                                    children: [
+                                      Padding(
+                                        padding: const EdgeInsets.symmetric(
+                                            horizontal: 5),
+                                        child: Icon(
+                                          Icons.location_on_outlined,
+                                          color: Color(0xffD91B1B),
+                                        ),
+                                      ),
+                                      Text(
+                                        'Where are you?',
+                                        style: TextStyle(
+                                            fontWeight: FontWeight.w300,
+                                            fontSize: 13,
+                                            color: Color(0xff292D32)
+                                                .withOpacity(0.5)),
+                                      )
+                                    ],
+                                  ),
+                                )
+                              ],
+                            )
+                          ],
+                        ),
+                      ],
+                    ))),
             Container(
               margin: EdgeInsets.all(10),
+              child: Text(
+                'Add Image',
+                style: TextStyle(fontWeight: FontWeight.w500, fontSize: 14),
+              ),
+            ),
+            Container(
+              margin: EdgeInsets.symmetric(horizontal: 10),
+              child: Row(
+                children: [
+                  Text(
+                    'You can send us a picture as a clue or something..',
+                    style: TextStyle(
+                        fontWeight: FontWeight.w300,
+                        fontSize: 12,
+                        color: Color(0xff292D32).withOpacity(0.85)),
+                  ),
+                  Spacer(),
+                  Icon(
+                    Icons.photo_camera,
+                    color: Color(0xff078C84),
+                  )
+                ],
+              ),
+            ),
+            Divider(),
+            Container(
+              width: 394,
+              margin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
               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)),
-                          )
-                        ],
-                      )
-                    ],
-                  ),
-                ],
+              child: Padding(
+                padding: const EdgeInsets.all(5),
+                child: Row(
+                  children: [
+                    Icon(Icons.edit),
+                    Container(
+                      width: 5,
+                    ),
+                    Text('Add note..',
+                        style: TextStyle(
+                            fontWeight: FontWeight.w300,
+                            fontSize: 13,
+                            color: Color(0xff292D32).withOpacity(0.5))),
+                  ],
+                ),
               ),
             ),
+            Container(
+              margin: EdgeInsets.symmetric(horizontal: 10, vertical: 5),
+              width: 396,
+              height: 51,
+              child: ElevatedButton(
+                  style: ElevatedButton.styleFrom(
+                    backgroundColor: Color(0xff078C84),
+                  ),
+                  onPressed: () {},
+                  child: Text(
+                    'Send Request',
+                    style: TextStyle(
+                        fontWeight: FontWeight.w600,
+                        fontSize: 16,
+                        color: Colors.white),
+                  )),
+            )
           ],
         ),
       ),

pubspec.lock

@@ -309,6 +309,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.4.16"
+  timeline_tile:
+    dependency: "direct main"
+    description:
+      name: timeline_tile
+      sha256: "85ec2023c67137397c2812e3e848b2fb20b410b67cd9aff304bb5480c376fc0c"
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.0"
+  timelines:
+    dependency: "direct main"
+    description:
+      name: timelines
+      sha256: "40214f5ab772ff45459cb8c15e5f60505a6828af0c0eb1eec6f29ed911a4c1c5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.0"
   typed_data:
     dependency: transitive
     description:

pubspec.yaml

@@ -20,6 +20,8 @@ dependencies:
   another_stepper: ^1.2.2
   easy_stepper: ^0.3.2
   im_stepper: ^1.0.1+1
+  timelines: ^0.1.0
+  timeline_tile: ^2.0.0
 
 dev_dependencies:
   flutter_test: