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 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:http/http.dart';
import 'package:local_auth/local_auth.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/models/enums/user_types.dart';
import 'package:test_sa/models/user.dart';
import 'package:test_sa/new_views/app_style/app_color.dart';
import '../settings/app_settings.dart';
@ -162,6 +164,12 @@ class SettingProvider extends ChangeNotifier {
_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;
notifyListeners();
}

@ -121,7 +121,10 @@ void main() async {
} else {
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
SystemChrome.setPreferredOrientations([

@ -211,7 +211,7 @@ class _InternalMaintenanceRequestState extends State<InternalMaintenanceRequest>
padding: EdgeInsets.symmetric(horizontal: 16.toScreenWidth),
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
color: AppColor.fieldBgColor(context),
color: AppColor.fieldBgColor(context),
borderRadius: BorderRadius.circular(10),
boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.05), blurRadius: 10)],
),
@ -250,7 +250,7 @@ class _InternalMaintenanceRequestState extends State<InternalMaintenanceRequest>
AppTextFormField(
labelText: context.translation.travelingHours,
controller: _travellingHoursController,
backgroundColor:AppColor.fieldBgColor(context),
backgroundColor: AppColor.fieldBgColor(context),
showShadow: false,
labelStyle: AppTextStyles.textFieldLabelStyle,
suffixIcon: "clock".toSvgAsset(width: 20, color: context.isDark ? AppColor.neutral10 : null).paddingOnly(end: 16),
@ -281,7 +281,7 @@ class _InternalMaintenanceRequestState extends State<InternalMaintenanceRequest>
AppTextFormField(
initialValue: requestDetailProvider.activityMaintenanceHelperModel?.technicalComment,
labelText: context.translation.technicalComment,
backgroundColor:AppColor.fieldBgColor(context),
backgroundColor: AppColor.fieldBgColor(context),
showShadow: false,
labelStyle: AppTextStyles.textFieldLabelStyle,
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),
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,
useSafeArea: true,
backgroundColor: Colors.transparent,
builder: (context) => Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
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(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 40.toScreenWidth,
height: 5.toScreenHeight,
decoration: BoxDecoration(color: AppColor.neutral40, borderRadius: BorderRadius.circular(30)),
),
16.height,
Align(
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,
Align(
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(
onPressed: () {
Navigator.pop(context);
Navigator.of(context).pushNamed(SettingsPage.id);
},
label: "Enable".addTranslation),
],
)),
builder: (context) => SafeArea(
child: Container(
clipBehavior: Clip.antiAlias,
decoration: BoxDecoration(
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(
mainAxisSize: MainAxisSize.min,
children: [
Container(
width: 40.toScreenWidth,
height: 5.toScreenHeight,
decoration: BoxDecoration(color: AppColor.neutral40, borderRadius: BorderRadius.circular(30)),
),
16.height,
Align(
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,
Align(
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(
onPressed: () {
Navigator.pop(context);
Navigator.of(context).pushNamed(SettingsPage.id);
},
label: "Enable".addTranslation),
],
)),
),
);
}
}

@ -1,6 +1,7 @@
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_advanced_switch/flutter_advanced_switch.dart';
import 'package:local_auth_darwin/local_auth_darwin.dart';
@ -75,6 +76,11 @@ class _SettingsPageState extends State<SettingsPage> {
..addListener(() async {
await _settingProvider!.setDarkTheme(_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")

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

Loading…
Cancel
Save