a

lib/lang.dart

@@ -10,18 +10,7 @@ class Lang extends StatefulWidget {
 }
 
 class _LangState extends State<Lang> {
-  var selectedIndex = 0;
-
-  // void _changeLang() {
-  //   setState(() {
-  //     if (selectedIndex == 0) {
-
-  //     } else {
-
-  //     }
-  //   });
-  // }
-
+  bool _hasBeenPressed = false;
   @override
   Widget build(BuildContext context) {
     return Padding(
@@ -29,38 +18,41 @@ class _LangState extends State<Lang> {
       child: Row(
         children: [
           ElevatedButton(
-            onPressed: () {
-              print('EN');
-            },
-            style: ButtonStyle(
-                foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
-                backgroundColor:
-                    MaterialStateProperty.all<Color>(Color(0xffFFFFFF).withOpacity(0.4)),
-                shape: MaterialStateProperty.all<RoundedRectangleBorder>(
-                    RoundedRectangleBorder(
-                  borderRadius: BorderRadius.only(
-                      topLeft: Radius.circular(16),
-                      bottomLeft: Radius.circular(16)),
-                ))),
-            child: Text('EN'),
-          ),
+              onPressed: () => {
+                    setState(() {
+                      _hasBeenPressed = !_hasBeenPressed;
+                    })
+                  },
+              style: ElevatedButton.styleFrom(
+                  backgroundColor: _hasBeenPressed
+                      ? Colors.white.withOpacity(0.4)
+                      : Color(0xffFF6600),
+                  shape: RoundedRectangleBorder(
+                      borderRadius: BorderRadius.only(
+                          topLeft: Radius.circular(30),
+                          bottomLeft: Radius.circular(30)))),
+              child: Text(
+                'EN',
+                style: TextStyle(color: Colors.white),
+              )),
           ElevatedButton(
-              onPressed: () {
-                print('ID');
-              },
-              style: ButtonStyle(
-                  foregroundColor:
-                      MaterialStateProperty.all<Color>(Colors.white),
-                  backgroundColor:
-                      MaterialStateProperty.all<Color>(Color(0xffFF6600)),
-                  shape: MaterialStateProperty.all<RoundedRectangleBorder>(
-                      RoundedRectangleBorder(
-                    borderRadius: BorderRadius.only(
-                        topRight: Radius.circular(16),
-                        bottomRight: Radius.circular(16)),
-                    side: BorderSide(color: Color(0xffFF6600)),
-                  ))),
-              child: Text('ID'))
+              onPressed: () => {
+                    setState(() {
+                      _hasBeenPressed = !_hasBeenPressed;
+                    })
+                  },
+              style: ElevatedButton.styleFrom(
+                  backgroundColor: _hasBeenPressed
+                      ? Color(0xffFF6600)
+                      : Colors.white.withOpacity(0.4),
+                  shape: RoundedRectangleBorder(
+                      borderRadius: BorderRadius.only(
+                          topRight: Radius.circular(30),
+                          bottomRight: Radius.circular(30)))),
+              child: Text(
+                'ID',
+                style: TextStyle(color: Colors.white),
+              )),
         ],
       ),
     );

lib/list.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
 
 class ListPage extends StatelessWidget {
   const ListPage({Key? key}) : super(key: key);
@@ -53,10 +54,6 @@ class ListPage extends StatelessWidget {
               Icons.wifi,
               color: Colors.white,
             ),
-            // Icon(
-            //   Icons.battery_std,
-            //   color: Colors.white,
-            // ),
             RotatedBox(
               quarterTurns: -3,
               child: Icon(
@@ -185,13 +182,22 @@ class TopMenu extends StatelessWidget {
             style: TextStyle(
                 fontWeight: FontWeight.bold, color: Color(0xff292D32)),
           ),
-          Expanded(child: Container()),
+          Expanded(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Container(
+                  color: Color(0xff292D32).withOpacity(0.15),
+                  height: 1,
+                  width: 24,
+                ),
+              ],
+            ),
+          ),
           ElevatedButton(
               style: ElevatedButton.styleFrom(
                   backgroundColor: Color(0xff078C84).withOpacity(0.1)),
-              onPressed: () {
-                print('Done');
-              },
+              onPressed: () => context.go('/listblock'),
               child: Text(
                 'Done',
                 style: TextStyle(

lib/listblock.dart

@@ -0,0 +1,229 @@
+import 'package:flutter/material.dart';
+
+class ListBlockPage extends StatelessWidget {
+  const ListBlockPage({Key? key}) : super(key: key);
+
+  @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(
+        appBar: AppBar(
+          backgroundColor: Color(0xff078C84),
+          automaticallyImplyLeading: false,
+          toolbarHeight: 44,
+          title: Text(
+            '${date.hour}:${date.minute}',
+            style: TextStyle(color: Colors.white, fontSize: 15),
+          ),
+          actions: [
+            Icon(
+              Icons.signal_cellular_alt,
+              color: Colors.white,
+            ),
+            Icon(
+              Icons.wifi,
+              color: Colors.white,
+            ),
+            RotatedBox(
+              quarterTurns: -3,
+              child: Icon(
+                Icons.battery_std,
+                color: Colors.white,
+              ),
+            )
+          ],
+        ),
+        body: Stack(children: [
+          Container(
+            decoration: BoxDecoration(color: Color(0xff078C84)),
+          ),
+          SingleChildScrollView(
+            child: Container(
+              decoration: BoxDecoration(
+                  color: Colors.white,
+                  borderRadius: BorderRadius.only(
+                      topLeft: Radius.circular(16),
+                      topRight: Radius.circular(16)),
+                  border: Border.all(color: Color(0xff078C84))),
+              child: Column(
+                children: [
+                  TopMenu(),
+                  Column(
+                    children: List.generate(
+                        items.length,
+                        (i) => SizedBox(
+                              child: ListTile(
+                                leading: gambar(items[i]),
+                                title: Text(items[i].type),
+                              ),
+                            )),
+                  ),
+                  Divider(
+                    thickness: 8,
+                  ),
+                  AvailableMenu(),
+                  Column(
+                    children: List.generate(
+                        items.length,
+                        (i) => SizedBox(
+                              child: ListTile(
+                                leading: gambar(items[i]),
+                                title: Text(items[i].type),
+                              ),
+                            )),
+                  )
+                ],
+              ),
+            ),
+          ),
+        ]));
+  }
+
+  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});
+}
+
+var date = DateTime.now();
+
+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.remove_circle,
+          color: Colors.red,
+        ),
+        SizedBox(width: 10),
+        Icon(Icons.menu),
+      ],
+    );
+  }
+}

lib/login.dart

@@ -74,8 +74,12 @@ class LoginPage extends StatelessWidget {
                       decoration: InputDecoration(
                           border: OutlineInputBorder(),
                           focusedBorder: OutlineInputBorder(
+                              borderRadius:
+                                  BorderRadius.all(Radius.circular(12)),
                               borderSide: BorderSide(color: Colors.white)),
                           enabledBorder: OutlineInputBorder(
+                              borderRadius:
+                                  BorderRadius.all(Radius.circular(12)),
                               borderSide: BorderSide(color: Colors.white)),
                           labelText: 'Nama Pengguna',
                           labelStyle: TextStyle(color: Colors.white),
@@ -94,8 +98,10 @@ class LoginPage extends StatelessWidget {
                     decoration: InputDecoration(
                         border: OutlineInputBorder(),
                         focusedBorder: OutlineInputBorder(
+                            borderRadius: BorderRadius.all(Radius.circular(12)),
                             borderSide: BorderSide(color: Colors.white)),
                         enabledBorder: OutlineInputBorder(
+                            borderRadius: BorderRadius.all(Radius.circular(12)),
                             borderSide: BorderSide(color: Colors.white)),
                         labelText: 'Kata Sandi',
                         labelStyle: TextStyle(color: Colors.white),

lib/main.dart

@@ -3,26 +3,28 @@ import 'package:go_router/go_router.dart';
 import 'package:namer_app/list.dart';
 import 'package:namer_app/login.dart';
 import 'package:namer_app/lang.dart';
+import 'package:namer_app/listblock.dart';
 
 void main() {
-  runApp(MyApp(
-      // items: List<String>.generate(7, (i) => '$i')
-      ));
+  runApp(MyApp());
 }
 
 final _router = GoRouter(
   routes: [
-    GoRoute(path: '/', builder: (context, state) => MyHomePage(), //),
-        routes: [
-          GoRoute(
-            path: 'login',
-            builder: (context, state) => LoginPage(),
-          ),
-          GoRoute(
-            path: 'list',
-            builder: (context, state) => ListPage(),
-          ),
-        ]),
+    GoRoute(path: '/', builder: (context, state) => MyHomePage(), routes: [
+      GoRoute(
+        path: 'login',
+        builder: (context, state) => LoginPage(),
+      ),
+      GoRoute(
+        path: 'list',
+        builder: (context, state) => ListPage(),
+      ),
+      GoRoute(
+        path: 'listblock',
+        builder: (context, state) => ListBlockPage(),
+      )
+    ]),
   ],
 );