system bottom navigation bar theme improvement.

design_3.0_TM_Module_snagsFix
Sikander Saleem 2 months ago
parent f3539f1471
commit e0ad359295

@ -2,6 +2,7 @@ import 'dart:async';
import 'dart:convert'; import 'dart:convert';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:http/http.dart'; import 'package:http/http.dart';
import 'package:local_auth/local_auth.dart'; import 'package:local_auth/local_auth.dart';
import 'package:shared_preferences/shared_preferences.dart'; import 'package:shared_preferences/shared_preferences.dart';
@ -9,6 +10,7 @@ import 'package:test_sa/controllers/api_routes/api_manager.dart';
import 'package:test_sa/controllers/api_routes/urls.dart'; import 'package:test_sa/controllers/api_routes/urls.dart';
import 'package:test_sa/models/enums/user_types.dart'; import 'package:test_sa/models/enums/user_types.dart';
import 'package:test_sa/models/user.dart'; import 'package:test_sa/models/user.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';
import '../settings/app_settings.dart'; import '../settings/app_settings.dart';
@ -162,6 +164,12 @@ class SettingProvider extends ChangeNotifier {
_host = prefs.getString(ASettings.host) ?? URLs.host1; _host = prefs.getString(ASettings.host) ?? URLs.host1;
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
systemNavigationBarColor: _theme == "light" ? Colors.white : AppColor.neutral60,
systemNavigationBarIconBrightness: _theme == "light" ? Brightness.dark : Brightness.light,
));
isLoaded = true; isLoaded = true;
notifyListeners(); notifyListeners();
} }

@ -121,7 +121,10 @@ void main() async {
} else { } else {
await Firebase.initializeApp(); await Firebase.initializeApp();
} }
SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(statusBarColor: Colors.transparent, systemNavigationBarColor: Colors.white)); SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(statusBarColor: Colors.transparent,
systemNavigationBarColor: Colors.white,
systemNavigationBarIconBrightness: Brightness.dark,
));
/// only portrait mode /// only portrait mode
SystemChrome.setPreferredOrientations([ SystemChrome.setPreferredOrientations([

@ -211,7 +211,7 @@ class _InternalMaintenanceRequestState extends State<InternalMaintenanceRequest>
padding: EdgeInsets.symmetric(horizontal: 16.toScreenWidth), padding: EdgeInsets.symmetric(horizontal: 16.toScreenWidth),
alignment: Alignment.centerLeft, alignment: Alignment.centerLeft,
decoration: BoxDecoration( decoration: BoxDecoration(
color: AppColor.fieldBgColor(context), color: AppColor.fieldBgColor(context),
borderRadius: BorderRadius.circular(10), borderRadius: BorderRadius.circular(10),
boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 10)], boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 10)],
), ),
@ -250,7 +250,7 @@ class _InternalMaintenanceRequestState extends State<InternalMaintenanceRequest>
AppTextFormField( AppTextFormField(
labelText: context.translation.travelingHours, labelText: context.translation.travelingHours,
controller: _travellingHoursController, controller: _travellingHoursController,
backgroundColor:AppColor.fieldBgColor(context), backgroundColor: AppColor.fieldBgColor(context),
showShadow: false, showShadow: false,
labelStyle: AppTextStyles.textFieldLabelStyle, labelStyle: AppTextStyles.textFieldLabelStyle,
suffixIcon: "clock".toSvgAsset(width: 20, color: context.isDark ? AppColor.neutral10 : null).paddingOnly(end: 16), suffixIcon: "clock".toSvgAsset(width: 20, color: context.isDark ? AppColor.neutral10 : null).paddingOnly(end: 16),
@ -281,7 +281,7 @@ class _InternalMaintenanceRequestState extends State<InternalMaintenanceRequest>
AppTextFormField( AppTextFormField(
initialValue: requestDetailProvider.activityMaintenanceHelperModel?.technicalComment, initialValue: requestDetailProvider.activityMaintenanceHelperModel?.technicalComment,
labelText: context.translation.technicalComment, labelText: context.translation.technicalComment,
backgroundColor:AppColor.fieldBgColor(context), backgroundColor: AppColor.fieldBgColor(context),
showShadow: false, showShadow: false,
labelStyle: AppTextStyles.textFieldLabelStyle, labelStyle: AppTextStyles.textFieldLabelStyle,
alignLabelWithHint: true, alignLabelWithHint: true,
@ -306,7 +306,6 @@ class _InternalMaintenanceRequestState extends State<InternalMaintenanceRequest>
}, },
), ),
// const AssistantEmployeeCard().toShadowContainer(context, paddingObject: const EdgeInsets.symmetric(horizontal: 16)).paddingOnly(start: 13, end: 14, top: 12), // const AssistantEmployeeCard().toShadowContainer(context, paddingObject: const EdgeInsets.symmetric(horizontal: 16)).paddingOnly(start: 13, end: 14, top: 12),
100.height,
], ],
), ),
), ),
@ -358,7 +357,7 @@ class _InternalMaintenanceRequestState extends State<InternalMaintenanceRequest>
], ],
) )
], ],
).toShimmer(isShow: snapshot.isLoading,context: context), ).toShimmer(isShow: snapshot.isLoading, context: context),
], ],
); );
}); });

@ -58,42 +58,44 @@ class _LandPageState extends State<LandPage> {
context: context, context: context,
useSafeArea: true, useSafeArea: true,
backgroundColor: Colors.transparent, backgroundColor: Colors.transparent,
builder: (context) => Container( builder: (context) => SafeArea(
clipBehavior: Clip.antiAlias, child: Container(
decoration: BoxDecoration( clipBehavior: Clip.antiAlias,
color: Theme.of(context).scaffoldBackgroundColor, decoration: BoxDecoration(
borderRadius: const BorderRadius.only(topRight: Radius.circular(20), topLeft: Radius.circular(20)), color: Theme.of(context).scaffoldBackgroundColor,
), borderRadius: const BorderRadius.only(topRight: Radius.circular(20), topLeft: Radius.circular(20)),
padding: EdgeInsets.symmetric(horizontal: 24.toScreenWidth, vertical: 24.toScreenHeight), ),
child: Column( padding: EdgeInsets.symmetric(horizontal: 24.toScreenWidth, vertical: 24.toScreenHeight),
mainAxisSize: MainAxisSize.min, child: Column(
children: [ mainAxisSize: MainAxisSize.min,
Container( children: [
width: 40.toScreenWidth, Container(
height: 5.toScreenHeight, width: 40.toScreenWidth,
decoration: BoxDecoration(color: AppColor.neutral40, borderRadius: BorderRadius.circular(30)), height: 5.toScreenHeight,
), decoration: BoxDecoration(color: AppColor.neutral40, borderRadius: BorderRadius.circular(30)),
16.height, ),
Align( 16.height,
alignment: AlignmentDirectional.centerStart, Align(
child: (Platform.isAndroid ? "Fingerprint" : "Face ID").addTranslation.heading3(context).custom(fontWeight: FontWeight.w600), alignment: AlignmentDirectional.centerStart,
), child: (Platform.isAndroid ? "Fingerprint" : "Face ID").addTranslation.heading3(context).custom(fontWeight: FontWeight.w600),
16.height, ),
(Platform.isAndroid ? "fingerprint" : "faceid").toLottieAsset(height: 180), 16.height,
16.height, (Platform.isAndroid ? "fingerprint" : "faceid").toLottieAsset(height: 180),
Align( 16.height,
alignment: AlignmentDirectional.centerStart, Align(
child: "Let's set up Face ID/Fingerprint for quick and secure logins in the future".bodyText(context).custom(fontWeight: FontWeight.w500), alignment: AlignmentDirectional.centerStart,
), child: "Let's set up Face ID/Fingerprint for quick and secure logins in the future".bodyText(context).custom(fontWeight: FontWeight.w500),
24.height, ),
AppFilledButton( 24.height,
onPressed: () { AppFilledButton(
Navigator.pop(context); onPressed: () {
Navigator.of(context).pushNamed(SettingsPage.id); Navigator.pop(context);
}, Navigator.of(context).pushNamed(SettingsPage.id);
label: "Enable".addTranslation), },
], label: "Enable".addTranslation),
)), ],
)),
),
); );
} }
} }

@ -1,6 +1,7 @@
import 'dart:io'; import 'dart:io';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_advanced_switch/flutter_advanced_switch.dart'; import 'package:flutter_advanced_switch/flutter_advanced_switch.dart';
import 'package:local_auth_darwin/local_auth_darwin.dart'; import 'package:local_auth_darwin/local_auth_darwin.dart';
@ -75,6 +76,11 @@ class _SettingsPageState extends State<SettingsPage> {
..addListener(() async { ..addListener(() async {
await _settingProvider!.setDarkTheme(_settingProvider!.theme == "light"); await _settingProvider!.setDarkTheme(_settingProvider!.theme == "light");
themeController!.value = _settingProvider!.theme == "light"; themeController!.value = _settingProvider!.theme == "light";
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
systemNavigationBarColor: _settingProvider!.theme == "light" ? Colors.white : AppColor.neutral60,
systemNavigationBarIconBrightness: _settingProvider!.theme == "light" ? Brightness.dark : Brightness.light,
));
}); });
// authController ??= ValueNotifier<bool>(_settingProvider.localAuth == "false") // authController ??= ValueNotifier<bool>(_settingProvider.localAuth == "false")

@ -45,119 +45,121 @@ class _SelectionBottomSheetState<T> extends State<SelectionBottomSheet<T>> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return SafeArea(
height: MediaQuery.of(context).size.height * .7, child: Container(
color: Theme.of(context).scaffoldBackgroundColor, height: MediaQuery.of(context).size.height * .7,
padding: const EdgeInsets.all(21), color: Theme.of(context).scaffoldBackgroundColor,
child: Column( padding: const EdgeInsets.all(21),
crossAxisAlignment: CrossAxisAlignment.start, child: Column(
children: [ crossAxisAlignment: CrossAxisAlignment.start,
Row( children: [
children: [ Row(
widget.title.heading5(context).expanded, children: [
if (widget.showCancel) widget.title.heading5(context).expanded,
AnimatedOpacity( if (widget.showCancel)
opacity: _selectedValue != null ? 1 : 0, AnimatedOpacity(
duration: const Duration(milliseconds: 250), opacity: _selectedValue != null ? 1 : 0,
child: Container( duration: const Duration(milliseconds: 250),
height: 30, child: Container(
decoration: BoxDecoration(color: const Color(0xffF63939).withOpacity(.75), borderRadius: BorderRadius.circular(30)), height: 30,
padding: const EdgeInsets.only(left: 8, right: 12, top: 4, bottom: 4), decoration: BoxDecoration(color: const Color(0xffF63939).withOpacity(.75), borderRadius: BorderRadius.circular(30)),
alignment: Alignment.center, padding: const EdgeInsets.only(left: 8, right: 12, top: 4, bottom: 4),
child: Row( alignment: Alignment.center,
mainAxisSize: MainAxisSize.min, child: Row(
children: [ mainAxisSize: MainAxisSize.min,
const Icon(Icons.clear, color: Colors.white, size: 16), children: [
4.width, const Icon(Icons.clear, color: Colors.white, size: 16),
const Text( 4.width,
"Clear", const Text(
style: TextStyle(fontSize: 14, color: Colors.white), "Clear",
) style: TextStyle(fontSize: 14, color: Colors.white),
], )
), ],
).onPress(_selectedValue != null ),
? () { ).onPress(_selectedValue != null
Navigator.pop(context); ? () {
widget.onSelect(null); Navigator.pop(context);
} widget.onSelect(null);
: null), }
: null),
),
],
),
16.height,
TextField(
onChanged: (queryString) {
query = queryString;
setState(() {});
},
style: const TextStyle(fontSize: 14),
focusNode: searchFocusNode,
decoration: InputDecoration(
hintText: 'Search by name',
labelText: 'Search',
labelStyle: TextStyle(color: AppColor.textColor(context)),
filled: true,
fillColor: AppColor.fieldBgColor(context),
hintStyle: const TextStyle(fontSize: 14),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: AppColor.blueStatus(context), width: 2.0),
borderRadius: const BorderRadius.all(Radius.circular(12.0)),
), ),
], enabledBorder: OutlineInputBorder(
), borderSide: BorderSide(color: AppColor.blueStatus(context), width: 1.0),
16.height, borderRadius: const BorderRadius.all(Radius.circular(12.0)),
TextField( ),
onChanged: (queryString) { contentPadding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
query = queryString;
setState(() {});
},
style: const TextStyle(fontSize: 14),
focusNode: searchFocusNode,
decoration: InputDecoration(
hintText: 'Search by name',
labelText: 'Search',
labelStyle: TextStyle(color: AppColor.textColor(context)),
filled: true,
fillColor: AppColor.fieldBgColor(context),
hintStyle: const TextStyle(fontSize: 14),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: AppColor.blueStatus(context), width: 2.0),
borderRadius: const BorderRadius.all(Radius.circular(12.0)),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: AppColor.blueStatus(context), width: 1.0),
borderRadius: const BorderRadius.all(Radius.circular(12.0)),
), ),
contentPadding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
), ),
), 8.height,
8.height, Expanded(
Expanded( // Wrap ListView with Expanded
// Wrap ListView with Expanded child: ListView.builder(
child: ListView.builder( itemCount: filteredList?.length,
itemCount: filteredList?.length, padding: const EdgeInsets.only(top: 8),
padding: const EdgeInsets.only(top: 8), itemBuilder: (cxt, index) => Theme(
itemBuilder: (cxt, index) => Theme( data: Theme.of(context).copyWith(
data: Theme.of(context).copyWith( radioTheme: RadioThemeData(
radioTheme: RadioThemeData( fillColor: MaterialStateColor.resolveWith((states) {
fillColor: MaterialStateColor.resolveWith((states) { if (states.contains(MaterialState.selected)) {
if (states.contains(MaterialState.selected)) { return AppColor.textColor(context); // Active color
return AppColor.textColor(context); // Active color }
} return Colors.grey; // Inactive color
return Colors.grey; // Inactive color }),
}), ),
), ),
), child: RadioListTile<T>(
child: RadioListTile<T>( // Specify type for RadioListTile
// Specify type for RadioListTile value: filteredList![index],
value: filteredList![index], dense: true,
dense: true, contentPadding: EdgeInsets.zero,
contentPadding: EdgeInsets.zero, groupValue: _selectedValue,
groupValue: _selectedValue, activeColor: AppColor.textColor(context),
activeColor: AppColor.textColor(context), onChanged: (value) {
onChanged: (value) { _selectedValue = value;
_selectedValue = value; searchFocusNode.unfocus();
searchFocusNode.unfocus(); setState(() {});
setState(() {}); },
}, title: Text(
title: Text( widget.builderString(filteredList![index]).cleanupWhitespace.capitalizeFirstOfEach ?? "",
widget.builderString(filteredList![index]).cleanupWhitespace.capitalizeFirstOfEach ?? "", style: Theme.of(context).textTheme.bodyLarge,
style: Theme.of(context).textTheme.bodyLarge, ),
), ),
), ),
), ),
), ),
), 8.height,
8.height, if (_selectedValue != null)
if (_selectedValue != null) AppFilledButton(
AppFilledButton( label: context.translation.select,
label: context.translation.select, maxWidth: true,
maxWidth: true, onPressed: () {
onPressed: () { Navigator.pop(context);
Navigator.pop(context); widget.onSelect(_selectedValue);
widget.onSelect(_selectedValue); },
}, ),
), ],
], ),
), ),
); );
} }

Loading…
Cancel
Save