From 7b880a08bd67ea216d3b5a02e0d24628ac860440 Mon Sep 17 00:00:00 2001 From: rodolfobacuinjr Date: Tue, 6 Dec 2022 11:10:34 +0800 Subject: [PATCH] create user interface for QR-Code scanner scan qr codes --- .../components/save_settings.dart | 41 +++++ .../roles/qr_code_scanner.dart/scan.dart | 150 ++++++++++++++++++ unit2/lib/utils/router.dart | 3 +- unit2/lib/utils/text_container.dart | 3 + 4 files changed, 196 insertions(+), 1 deletion(-) create mode 100644 unit2/lib/screen/unit2/roles/qr_code_scanner.dart/components/save_settings.dart create mode 100644 unit2/lib/screen/unit2/roles/qr_code_scanner.dart/scan.dart diff --git a/unit2/lib/screen/unit2/roles/qr_code_scanner.dart/components/save_settings.dart b/unit2/lib/screen/unit2/roles/qr_code_scanner.dart/components/save_settings.dart new file mode 100644 index 0000000..ce4b27c --- /dev/null +++ b/unit2/lib/screen/unit2/roles/qr_code_scanner.dart/components/save_settings.dart @@ -0,0 +1,41 @@ +import 'package:flutter/material.dart'; + +import '../../../../../theme-data.dart/colors.dart'; + +class SelectedState extends StatelessWidget { + final String title; + final String subtitle; + const SelectedState({Key? key,required this.subtitle, required this.title}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Container( + height: 80, + width: double.infinity, + padding: const EdgeInsets.all(10), + child: Wrap( + alignment: WrapAlignment.center, + runAlignment: WrapAlignment.center, + children: [ + Column( + mainAxisAlignment: MainAxisAlignment.center, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Text( + title, + textAlign: TextAlign.center, + style: Theme.of(context).textTheme.button!.copyWith( + color: third, fontWeight: FontWeight.bold, fontSize: 18), + ), + Text( + subtitle, + style: Theme.of(context).textTheme.labelMedium, + ), + const Divider(), + + ]), + ], + ), + ); + } +} diff --git a/unit2/lib/screen/unit2/roles/qr_code_scanner.dart/scan.dart b/unit2/lib/screen/unit2/roles/qr_code_scanner.dart/scan.dart new file mode 100644 index 0000000..8908e49 --- /dev/null +++ b/unit2/lib/screen/unit2/roles/qr_code_scanner.dart/scan.dart @@ -0,0 +1,150 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/src/widgets/container.dart'; +import 'package:flutter/src/widgets/framework.dart'; +import 'package:fluttericon/entypo_icons.dart'; +import 'package:unit2/utils/text_container.dart'; + +import '../../../../theme-data.dart/colors.dart'; +import '../../../../utils/global.dart'; +import 'components/save_settings.dart'; + +class QRCodeScanner extends StatelessWidget { + const QRCodeScanner({super.key}); + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + title: const Text(qrScannerTitle), + centerTitle: true, + backgroundColor: primary, + ), + body: SizedBox( + height: screenHeight * 100, + width: double.infinity, + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + const SizedBox( + height: 40, + ), + GestureDetector( + onTap: () {}, + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + SizedBox( + height: 160, + child: Image.asset('assets/pngs/qr-scan.png')), + const SizedBox( + height: 8, + ), + Text( + "TAP TO SCAN QR CODE", + textAlign: TextAlign.center, + style: Theme.of(context) + .textTheme + .displayMedium! + .copyWith( + fontSize: 22, + color: primary, + fontWeight: FontWeight.bold), + ), + const SizedBox( + height: 8, + ), + //TODO add API data + "INCOMING" == "INCOMING" + ? SizedBox( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + "INCOMING", + textAlign: TextAlign.center, + style: Theme.of(context) + .textTheme + .displayMedium! + .copyWith( + fontSize: 20, + color: success2, + fontWeight: FontWeight.bold), + ), + const Icon( + Entypo.down_bold, + color: success2, + ) + ], + ), + ) + : SizedBox( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + //TODO add API data + "INCOMING", + textAlign: TextAlign.center, + style: Theme.of(context) + .textTheme + .displayMedium! + .copyWith( + fontSize: 20, + color: second, + fontWeight: FontWeight.bold), + ), + const Icon( + Entypo.up_bold, + color: second, + ) + ], + ), + ) + ], + ), + ), + Container( + padding: const EdgeInsets.only(top: 12), + decoration: const BoxDecoration( + boxShadow: [ + BoxShadow( + color: Colors.black38, + blurRadius: 30, + offset: Offset(-5, 0), + ), + ], + color: Colors.white, + borderRadius: BorderRadius.only( + topLeft: Radius.circular(15), + topRight: Radius.circular(15))), + width: double.infinity, + child: Column( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: MainAxisAlignment.center, + children: const [ + SelectedState( + //TODO add api data + + title: "Provincial Government of ADN", + subtitle: establishment, + ), + Center( + child: SelectedState( + //TODO add api data + title: "Agusan Up", + subtitle: checkpointArea, + ), + ), + SelectedState( + //TODO add api data + title: "INCOMING", + subtitle: scanMode, + ), + ], + ), + ) + ], + ), + )); + } +} diff --git a/unit2/lib/utils/router.dart b/unit2/lib/utils/router.dart index 7794074..a5e5216 100644 --- a/unit2/lib/utils/router.dart +++ b/unit2/lib/utils/router.dart @@ -1,4 +1,5 @@ import 'package:go_router/go_router.dart'; +import 'package:unit2/screen/unit2/roles/qr_code_scanner.dart/scan.dart'; import '../screen/sos/add_mobile.dart'; import '../screen/sos/request_sos.dart'; import '../screen/unit2/login/login.dart'; @@ -9,7 +10,7 @@ final GoRouter goRouter = GoRouter(routes: [ GoRoute( path: '/', name: 'login', - builder: (context, state) => const UniT2Login(), + builder: (context, state) => const QRCodeScanner(), routes: [ GoRoute( name: 'home', diff --git a/unit2/lib/utils/text_container.dart b/unit2/lib/utils/text_container.dart index 1cb3b80..856ae72 100644 --- a/unit2/lib/utils/text_container.dart +++ b/unit2/lib/utils/text_container.dart @@ -22,3 +22,6 @@ const String loginViaQr = "Login via QR code"; const String emergencyReponseLabel = " Request Emergency Response "; const String requestSOS = "Request SOS"; const String qrScannerTitle = "QR-Code Scanner"; +const String establishment = "Establishment"; +const String checkpointArea = "Checkpoint Area"; +const String scanMode = 'Scan Mode'; \ No newline at end of file