Completed kiosk ui screens
Faiz Hashmi
7 months ago
parent
ad5f5b7852
commit
c46c475feb
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 30 KiB |
@ -0,0 +1,4 @@
|
||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
||||
<svg width="100px" height="100px" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0H6V2H10V4H8.86807C8.57073 5.66996 7.78574 7.17117 6.6656 8.35112C7.46567 8.73941 8.35737 8.96842 9.29948 8.99697L10.2735 6H12.7265L15.9765 16H13.8735L13.2235 14H9.77647L9.12647 16H7.0235L8.66176 10.9592C7.32639 10.8285 6.08165 10.3888 4.99999 9.71246C3.69496 10.5284 2.15255 11 0.5 11H0V9H0.5C1.5161 9 2.47775 8.76685 3.33437 8.35112C2.68381 7.66582 2.14629 6.87215 1.75171 6H4.02179C4.30023 6.43491 4.62904 6.83446 4.99999 7.19044C5.88743 6.33881 6.53369 5.23777 6.82607 4H0V2H4V0ZM12.5735 12L11.5 8.69688L10.4265 12H12.5735Z" fill="#000000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 825 B |
@ -1,15 +1,18 @@
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:hmg_qline/views/main_queue_screen/main_queue_screen.dart';
|
||||
import 'package:hmg_qline/views/splash_screen/splash_screen.dart';
|
||||
import 'package:hmg_qline/views/kiosk_screens/kiosk_main_screen.dart';
|
||||
|
||||
class AppRoutes {
|
||||
//User
|
||||
static const String splash = "/splash";
|
||||
static const String mainQueueScreen = "/mainQueueScreen";
|
||||
static const String kioskMainScreen = "/kioskMainScreen";
|
||||
static const String initialRoute = splash;
|
||||
|
||||
static final Map<String, WidgetBuilder> routes = {
|
||||
splash: (context) => const SplashScreen(),
|
||||
kioskMainScreen: (context) => const KioskMainScreen(),
|
||||
mainQueueScreen: (context) => const MainQueueScreen(),
|
||||
};
|
||||
}
|
||||
|
||||
@ -0,0 +1,184 @@
|
||||
import 'dart:developer';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_svg/flutter_svg.dart';
|
||||
import 'package:hmg_qline/constants/app_constants.dart';
|
||||
import 'package:hmg_qline/utilities/enums.dart';
|
||||
import 'package:hmg_qline/view_models/screen_config_view_model.dart';
|
||||
import 'package:hmg_qline/views/common_widgets/app_texts_widget.dart';
|
||||
import 'package:hmg_qline/views/view_helpers/size_config.dart';
|
||||
|
||||
Widget getWeatherWidget(ScreenConfigViewModel screenConfigViewModel) {
|
||||
if (screenConfigViewModel.weathersWidgetModel.maxTemp == null || screenConfigViewModel.weathersWidgetModel.minTemp == null || screenConfigViewModel.weathersWidgetModel.iconPhrase == null) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
return Container(
|
||||
height: (screenConfigViewModel.globalConfigurationsModel.orientationTypeEnum == ScreenOrientationEnum.portraitUp ||
|
||||
screenConfigViewModel.globalConfigurationsModel.orientationTypeEnum == ScreenOrientationEnum.portraitDown)
|
||||
? SizeConfig.getHeightMultiplier() * 2
|
||||
: SizeConfig.getHeightMultiplier() * 0.9,
|
||||
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
|
||||
margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
|
||||
decoration: AppColors.configWidgetDecoration,
|
||||
child: Directionality(
|
||||
textDirection: screenConfigViewModel.globalConfigurationsModel.textDirection,
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
AppText(
|
||||
screenConfigViewModel.globalConfigurationsModel.weatherText,
|
||||
color: Colors.grey,
|
||||
fontSize: SizeConfig.getWidthMultiplier() * 2,
|
||||
fontFamily: screenConfigViewModel.globalConfigurationsModel.screenLanguageEnum == LanguageEnum.arabic ? AppStrings.fontNameCairo : AppStrings.fontNamePoppins,
|
||||
),
|
||||
AppText(
|
||||
"${screenConfigViewModel.globalConfigurationsModel.maxText}: ${screenConfigViewModel.weathersWidgetModel.maxTemp}°C , ${screenConfigViewModel.globalConfigurationsModel.minText}: ${screenConfigViewModel.weathersWidgetModel.minTemp}°C",
|
||||
fontSize: SizeConfig.getWidthMultiplier() * 3,
|
||||
fontHeight: 1,
|
||||
fontFamily: screenConfigViewModel.globalConfigurationsModel.screenLanguageEnum == LanguageEnum.arabic ? AppStrings.fontNameCairo : AppStrings.fontNamePoppins,
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(width: 15),
|
||||
SvgPicture.asset(
|
||||
screenConfigViewModel.weathersWidgetModel.weatherIconPath ?? AppAssets.weatherIcon,
|
||||
height: SizeConfig.getHeightMultiplier() * 0.5,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget getPrayerWidget(ScreenConfigViewModel screenConfigViewModel) {
|
||||
if (screenConfigViewModel.nextPrayerToShowWithTime.isEmpty) {
|
||||
return const SizedBox.shrink();
|
||||
}
|
||||
return SizedBox(
|
||||
child: Container(
|
||||
height: (screenConfigViewModel.globalConfigurationsModel.orientationTypeEnum == ScreenOrientationEnum.portraitUp ||
|
||||
screenConfigViewModel.globalConfigurationsModel.orientationTypeEnum == ScreenOrientationEnum.portraitDown)
|
||||
? SizeConfig.getHeightMultiplier() * 2
|
||||
: SizeConfig.getHeightMultiplier() * 0.9,
|
||||
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
|
||||
margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
|
||||
decoration: AppColors.configWidgetDecoration,
|
||||
child: Directionality(
|
||||
textDirection: screenConfigViewModel.globalConfigurationsModel.textDirection,
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
AppText(
|
||||
screenConfigViewModel.globalConfigurationsModel.nextPrayerText,
|
||||
color: Colors.grey,
|
||||
fontSize: SizeConfig.getWidthMultiplier() * 1.5,
|
||||
fontFamily: screenConfigViewModel.globalConfigurationsModel.screenLanguageEnum == LanguageEnum.arabic ? AppStrings.fontNameCairo : AppStrings.fontNamePoppins,
|
||||
),
|
||||
AppText(
|
||||
screenConfigViewModel.nextPrayerToShowWithTime,
|
||||
fontSize: SizeConfig.getWidthMultiplier() * 3,
|
||||
fontHeight: 1,
|
||||
fontFamily: screenConfigViewModel.globalConfigurationsModel.screenLanguageEnum == LanguageEnum.arabic ? AppStrings.fontNameCairo : AppStrings.fontNamePoppins,
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(width: 15),
|
||||
SvgPicture.asset(
|
||||
AppAssets.mosqueIcon,
|
||||
height: SizeConfig.getWidthMultiplier() * 7,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
int getFlexForScreenTypes(ScreenConfigViewModel screenConfigVM) {
|
||||
int flex = 1;
|
||||
if (screenConfigVM.currentScreenTypeEnum == ScreenTypeEnum.roomLevelScreen) {
|
||||
if (screenConfigVM.globalConfigurationsModel.orientationTypeEnum == ScreenOrientationEnum.portraitUp ||
|
||||
screenConfigVM.globalConfigurationsModel.orientationTypeEnum == ScreenOrientationEnum.portraitDown) {
|
||||
flex = 2;
|
||||
} else {
|
||||
flex = 3;
|
||||
}
|
||||
} else {
|
||||
if (screenConfigVM.globalConfigurationsModel.orientationTypeEnum == ScreenOrientationEnum.portraitUp ||
|
||||
screenConfigVM.globalConfigurationsModel.orientationTypeEnum == ScreenOrientationEnum.portraitDown) {
|
||||
flex = 2;
|
||||
} else {
|
||||
flex = 1;
|
||||
}
|
||||
}
|
||||
return flex;
|
||||
}
|
||||
|
||||
Widget counterNoText(int counterNo) {
|
||||
return AppText(
|
||||
"${AppStrings.counterNo}$counterNo",
|
||||
fontFamily: AppStrings.fontNamePoppins,
|
||||
textAlign: TextAlign.center,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: Colors.transparent,
|
||||
fontSize: SizeConfig.getWidthMultiplier() * 8,
|
||||
);
|
||||
}
|
||||
|
||||
Widget noPatientInQueue({required String text, required String fontName, required bool isForRoomLevel, required int counterNo}) {
|
||||
Widget noPatientText = Center(
|
||||
child: AppText(
|
||||
text,
|
||||
fontFamily: fontName,
|
||||
textAlign: TextAlign.center,
|
||||
fontSize: SizeConfig.getWidthMultiplier() * 9,
|
||||
),
|
||||
);
|
||||
if (isForRoomLevel) {
|
||||
return Column(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [counterNoText(counterNo), noPatientText, const SizedBox.shrink()],
|
||||
);
|
||||
} else {
|
||||
return noPatientText;
|
||||
}
|
||||
}
|
||||
|
||||
Widget commonSelectionCardKiosk({required ScreenConfigViewModel screenConfigViewModel, required String title, required String icon, required VoidCallback onTap}) {
|
||||
log("screenConfigViewModel.globalConfigurationsModel.orientationTypeEnum: ${screenConfigViewModel.globalConfigurationsModel.orientationTypeEnum}");
|
||||
return InkWell(
|
||||
onTap: onTap,
|
||||
child: SizedBox(
|
||||
child: Container(
|
||||
constraints: BoxConstraints(minWidth: SizeConfig.getWidthMultiplier() * 30),
|
||||
padding: const EdgeInsets.all(5),
|
||||
margin: const EdgeInsets.all(10),
|
||||
decoration: AppColors.configWidgetDecoration,
|
||||
child: Directionality(
|
||||
textDirection: screenConfigViewModel.globalConfigurationsModel.textDirection,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
SvgPicture.asset(icon, height: SizeConfig.getWidthMultiplier() * 12),
|
||||
const SizedBox(height: 15),
|
||||
AppText(
|
||||
title,
|
||||
fontSize: SizeConfig.getWidthMultiplier() * 6,
|
||||
fontHeight: 1,
|
||||
fontFamily: screenConfigViewModel.globalConfigurationsModel.screenLanguageEnum == LanguageEnum.arabic ? AppStrings.fontNameCairo : AppStrings.fontNamePoppins,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,138 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:hmg_qline/constants/app_constants.dart';
|
||||
import 'package:hmg_qline/utilities/enums.dart';
|
||||
import 'package:hmg_qline/utilities/extensions.dart';
|
||||
import 'package:hmg_qline/view_models/screen_config_view_model.dart';
|
||||
import 'package:hmg_qline/views/common_widgets/app_footer.dart';
|
||||
import 'package:hmg_qline/views/common_widgets/app_general_widgets.dart';
|
||||
import 'package:hmg_qline/views/common_widgets/app_header.dart';
|
||||
import 'package:hmg_qline/views/common_widgets/app_scaffold.dart';
|
||||
import 'package:hmg_qline/views/view_helpers/size_config.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
class KioskMainScreen extends StatelessWidget {
|
||||
const KioskMainScreen({super.key});
|
||||
|
||||
Widget getBody({required BuildContext context}) {
|
||||
return Consumer<ScreenConfigViewModel>(
|
||||
builder: (BuildContext context, ScreenConfigViewModel screenConfigVM, Widget? child) {
|
||||
return Column(
|
||||
children: [
|
||||
if (screenConfigVM.globalConfigurationsModel.screenTypeEnum != ScreenTypeEnum.roomLevelScreen) ...[
|
||||
Expanded(
|
||||
flex: getFlexForScreenTypes(screenConfigVM),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20),
|
||||
child: Row(
|
||||
children: [
|
||||
if (screenConfigVM.globalConfigurationsModel.isWeatherReq) ...[
|
||||
getWeatherWidget(screenConfigVM),
|
||||
],
|
||||
const SizedBox(width: 20),
|
||||
if (screenConfigVM.globalConfigurationsModel.isPrayerTimeReq) ...[
|
||||
getPrayerWidget(screenConfigVM),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
)
|
||||
],
|
||||
const SizedBox(height: 12),
|
||||
Expanded(flex: 10, child: dataContentKiosk(context: context)),
|
||||
if (!screenConfigVM.globalConfigurationsModel.isWeatherReq && !screenConfigVM.globalConfigurationsModel.isPrayerTimeReq) ...[
|
||||
const SizedBox(height: 100),
|
||||
],
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget kioskLanguageStateWidget(ScreenConfigViewModel screenConfigViewModel) {
|
||||
return GridView.builder(
|
||||
itemCount: 2,
|
||||
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
|
||||
itemBuilder: (BuildContext context, int index) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(20),
|
||||
child: commonSelectionCardKiosk(
|
||||
screenConfigViewModel: screenConfigViewModel,
|
||||
title: index == 0 ? "English" : "عربي",
|
||||
icon: AppAssets.languageIcon,
|
||||
onTap: () {
|
||||
if (index == 0) {
|
||||
screenConfigViewModel.updateCurrentSelectedKioskLanguage(LanguageEnum.english);
|
||||
screenConfigViewModel.updateKioskScreenState(KioskScreenStateEnums.queueSelectionState);
|
||||
} else {
|
||||
screenConfigViewModel.updateCurrentSelectedKioskLanguage(LanguageEnum.arabic);
|
||||
screenConfigViewModel.updateKioskScreenState(KioskScreenStateEnums.queueSelectionState);
|
||||
}
|
||||
},
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget kioskQueueSelectionStateWidget(ScreenConfigViewModel screenConfigViewModel) {
|
||||
return GridView.builder(
|
||||
itemCount: 5,
|
||||
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: (screenConfigViewModel.globalConfigurationsModel.orientationTypeEnum == ScreenOrientationEnum.portraitUp ||
|
||||
screenConfigViewModel.globalConfigurationsModel.orientationTypeEnum == ScreenOrientationEnum.portraitDown)
|
||||
? 3
|
||||
: 2,
|
||||
),
|
||||
itemBuilder: (BuildContext context, int index) {
|
||||
return Column(mainAxisSize: MainAxisSize.min, children: [
|
||||
commonSelectionCardKiosk(
|
||||
screenConfigViewModel: screenConfigViewModel,
|
||||
title: "New Latest Certificate Generation ${index + 1}",
|
||||
icon: AppAssets.languageIcon,
|
||||
onTap: () {
|
||||
screenConfigViewModel.updateKioskScreenState(KioskScreenStateEnums.languageState);
|
||||
}),
|
||||
]);
|
||||
});
|
||||
}
|
||||
|
||||
Widget kioskTicketNumberStateWidget(ScreenConfigViewModel screenConfigViewModel) {
|
||||
return Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
commonSelectionCardKiosk(screenConfigViewModel: screenConfigViewModel, title: "English", icon: AppAssets.languageIcon, onTap: () {}),
|
||||
commonSelectionCardKiosk(screenConfigViewModel: screenConfigViewModel, title: "عربي", icon: AppAssets.languageIcon, onTap: () {}),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget dataContentKiosk({required BuildContext context}) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(10),
|
||||
child: Consumer(builder: (BuildContext context, ScreenConfigViewModel screenConfigViewModel, Widget? child) {
|
||||
return switch (screenConfigViewModel.kioskScreenStateEnum) {
|
||||
KioskScreenStateEnums.languageState => kioskLanguageStateWidget(screenConfigViewModel),
|
||||
KioskScreenStateEnums.queueSelectionState => kioskQueueSelectionStateWidget(screenConfigViewModel),
|
||||
KioskScreenStateEnums.ticketNoState => kioskTicketNumberStateWidget(screenConfigViewModel),
|
||||
};
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Selector<ScreenConfigViewModel, ScreenOrientationEnum>(
|
||||
selector: (context, screenConfigViewModel) => screenConfigViewModel.globalConfigurationsModel.orientationTypeEnum,
|
||||
builder: (BuildContext context, ScreenOrientationEnum screenOrientationEnum, Widget? child) {
|
||||
return RotatedBox(
|
||||
quarterTurns: screenOrientationEnum.getTurnsByOrientation(),
|
||||
child: AppScaffold(
|
||||
appBar: const AppHeader(),
|
||||
body: getBody(context: context),
|
||||
bottomNavigationBar: const AppFooter(),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue