assistant employee selection sheet ui improvement.

design_3.0_TM_Module_snagsFix
Sikander Saleem 2 months ago
parent 7efeeed619
commit 5e9e8dc870

@ -3,6 +3,7 @@ import 'package:test_sa/extensions/context_extension.dart';
import 'package:test_sa/extensions/int_extensions.dart'; import 'package:test_sa/extensions/int_extensions.dart';
import 'package:test_sa/extensions/text_extensions.dart'; import 'package:test_sa/extensions/text_extensions.dart';
import 'package:test_sa/extensions/widget_extensions.dart'; import 'package:test_sa/extensions/widget_extensions.dart';
import 'package:test_sa/modules/cm_module/views/components/action_button/footer_action_button.dart';
import 'package:test_sa/new_views/app_style/app_color.dart'; import 'package:test_sa/new_views/app_style/app_color.dart';
import 'package:test_sa/new_views/common_widgets/app_filled_button.dart'; import 'package:test_sa/new_views/common_widgets/app_filled_button.dart';
@ -45,121 +46,118 @@ class _SelectionBottomSheetState<T> extends State<SelectionBottomSheet<T>> {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return SafeArea( return Container(
child: Container( height: MediaQuery.of(context).size.height * .7,
height: MediaQuery.of(context).size.height * .7, color: Theme.of(context).scaffoldBackgroundColor,
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),
borderRadius: const BorderRadius.all(Radius.circular(12.0)),
), ),
contentPadding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0), ],
).paddingOnly(top: 16, start: 16, end: 16, bottom: 0),
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)),
), ),
contentPadding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0),
), ),
8.height, ).paddingOnly(top: 16, start: 16, end: 16, bottom: 16),
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: EdgeInsets.zero,
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>( ),
// Specify type for RadioListTile child: RadioListTile<T>(
value: filteredList![index], // Specify type for RadioListTile
dense: true, value: filteredList![index],
contentPadding: EdgeInsets.zero, dense: true,
groupValue: _selectedValue, groupValue: _selectedValue,
activeColor: AppColor.textColor(context), activeColor: AppColor.textColor(context),
onChanged: (value) { contentPadding: const EdgeInsets.only(left: 16, right: 16),
_selectedValue = value; onChanged: (value) {
searchFocusNode.unfocus(); _selectedValue = value;
setState(() {}); searchFocusNode.unfocus();
}, setState(() {});
title: Text( },
widget.builderString(filteredList![index]).cleanupWhitespace.capitalizeFirstOfEach ?? "", title: Text(
style: Theme.of(context).textTheme.bodyLarge, widget.builderString(filteredList![index]).cleanupWhitespace.capitalizeFirstOfEach ?? "",
), style: Theme.of(context).textTheme.bodyLarge,
), ),
), ),
), ),
), ),
8.height, ),
if (_selectedValue != null) 8.height,
AppFilledButton( if (_selectedValue != null)
label: context.translation.select, FooterActionButton.footerContainer(
maxWidth: true, context: context,
onPressed: () { child: AppFilledButton(
Navigator.pop(context); label: context.translation.select,
widget.onSelect(_selectedValue); maxWidth: true,
}, onPressed: () {
), Navigator.pop(context);
], widget.onSelect(_selectedValue);
), },
)),
],
), ),
); );
} }

@ -124,7 +124,8 @@ class _SingleAssistantEmployeeMenuState extends State<AssistantEmployeeMenu> {
value: value, value: value,
child: Text( child: Text(
value.user?.name ?? "NULL", // Use null-aware operator for user.name value.user?.name ?? "NULL", // Use null-aware operator for user.name
style: AppTextStyles.bodyText.copyWith(color: AppColor.black20), // style: AppTextStyles.bodyText.copyWith(color: AppColor.black20),
style: Theme.of(context).textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w500, color: context.isDark ? AppColor.white10 : AppColor.black10),
), ),
); );
}, },

Loading…
Cancel
Save