refactor: Replace MyButton with OutlinedButton and ElevatedButton in various bottom sheets for improved UI consistency

This commit is contained in:
Vaibhav Surve 2025-06-28 13:14:22 +05:30
parent 2c79d3eec8
commit 8f87161d74
6 changed files with 303 additions and 184 deletions

View File

@ -1,7 +1,6 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:marco/controller/task_planing/daily_task_planing_controller.dart';
import 'package:marco/helpers/widgets/my_button.dart';
import 'package:marco/helpers/widgets/my_text.dart';
import 'package:marco/helpers/widgets/my_spacing.dart';
import 'package:marco/helpers/widgets/my_snackbar.dart';
@ -197,16 +196,34 @@ class _AssignTaskBottomSheetState extends State<AssignTaskBottomSheet> {
),
MySpacing.height(24),
Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
MyButton(
OutlinedButton.icon(
onPressed: () => Get.back(),
icon: const Icon(Icons.close, color: Colors.red),
label: MyText.bodyMedium("Cancel", color: Colors.red),
style: OutlinedButton.styleFrom(
side: const BorderSide(color: Colors.red),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
padding: const EdgeInsets.symmetric(
horizontal: 20, vertical: 14),
),
),
ElevatedButton.icon(
onPressed: _onAssignTaskPressed,
backgroundColor: const Color.fromARGB(255, 95, 132, 255),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
icon: const Icon(Icons.check_circle_outline,
color: Colors.white),
label:
MyText.bodyMedium("Assign Task", color: Colors.white),
],
style: ElevatedButton.styleFrom(
backgroundColor: Colors.indigo,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
padding: const EdgeInsets.symmetric(
horizontal: 28, vertical: 14),
),
),
],

View File

@ -1,7 +1,6 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:marco/controller/task_planing/report_task_controller.dart';
import 'package:marco/helpers/theme/app_theme.dart';
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
import 'package:marco/helpers/widgets/my_button.dart';
import 'package:marco/helpers/widgets/my_spacing.dart';
@ -342,9 +341,6 @@ class _CommentTaskBottomSheetState extends State<CommentTaskBottomSheet>
}
},
isLoading: controller.isLoading,
splashColor: contentTheme.secondary.withAlpha(25),
backgroundColor: Colors.blueAccent,
loadingIndicatorColor: contentTheme.onPrimary,
),
MySpacing.height(10),
if ((widget.taskData['taskComments'] as List<dynamic>?)
@ -526,43 +522,46 @@ class _CommentTaskBottomSheetState extends State<CommentTaskBottomSheet>
required VoidCallback onCancel,
required Future<void> Function() onSubmit,
required RxBool isLoading,
required Color splashColor,
required Color backgroundColor,
required Color loadingIndicatorColor,
double? buttonHeight,
}) {
return Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
MyButton.text(
OutlinedButton.icon(
onPressed: onCancel,
padding: MySpacing.xy(20, 16),
splashColor: splashColor,
child: MyText.bodySmall('Cancel'),
icon: const Icon(Icons.close, color: Colors.red),
label: MyText.bodyMedium("Cancel", color: Colors.red),
style: OutlinedButton.styleFrom(
side: const BorderSide(color: Colors.red),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
),
),
MySpacing.width(12),
Obx(() {
return MyButton(
onPressed: isLoading.value ? null : onSubmit,
elevation: 0,
padding: MySpacing.xy(20, 16),
backgroundColor: backgroundColor,
borderRadiusAll: AppStyle.buttonRadius.medium,
child: isLoading.value
? SizedBox(
width: buttonHeight ?? 16,
height: buttonHeight ?? 16,
return ElevatedButton.icon(
onPressed: isLoading.value ? null : () => onSubmit(),
icon: isLoading.value
? const SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator(
strokeWidth: 2,
valueColor: AlwaysStoppedAnimation<Color>(
loadingIndicatorColor,
),
valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
),
)
: MyText.bodySmall(
'Comment',
color: loadingIndicatorColor,
),
: const Icon(Icons.check_circle_outline, color: Colors.white),
label: isLoading.value
? const SizedBox()
: MyText.bodyMedium("Comment", color: Colors.white),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.indigo,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 14),
),
);
}),
],

View File

@ -488,10 +488,8 @@ class _ReportActionBottomSheetState extends State<ReportActionBottomSheet>
widget.taskData['plannedWork'] ??
'0') ??
0,
activityId:
widget.activityId,
workAreaId:
widget.workAreaId,
activityId: widget.activityId,
workAreaId: widget.workAreaId,
onSubmit: () {
Navigator.of(context).pop();
},
@ -502,9 +500,6 @@ class _ReportActionBottomSheetState extends State<ReportActionBottomSheet>
}
},
isLoading: controller.isLoading,
splashColor: contentTheme.secondary.withAlpha(25),
backgroundColor: Colors.blueAccent,
loadingIndicatorColor: contentTheme.onPrimary,
),
MySpacing.height(10),
@ -687,43 +682,46 @@ class _ReportActionBottomSheetState extends State<ReportActionBottomSheet>
required VoidCallback onCancel,
required Future<void> Function() onSubmit,
required RxBool isLoading,
required Color splashColor,
required Color backgroundColor,
required Color loadingIndicatorColor,
double? buttonHeight,
}) {
return Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
MyButton.text(
OutlinedButton.icon(
onPressed: onCancel,
padding: MySpacing.xy(20, 16),
splashColor: splashColor,
child: MyText.bodySmall('Cancel'),
icon: const Icon(Icons.close, color: Colors.red),
label: MyText.bodyMedium("Cancel", color: Colors.red),
style: OutlinedButton.styleFrom(
side: const BorderSide(color: Colors.red),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 14),
),
),
MySpacing.width(12),
Obx(() {
return MyButton(
onPressed: isLoading.value ? null : onSubmit,
elevation: 0,
padding: MySpacing.xy(20, 16),
backgroundColor: backgroundColor,
borderRadiusAll: AppStyle.buttonRadius.medium,
child: isLoading.value
? SizedBox(
width: buttonHeight ?? 16,
height: buttonHeight ?? 16,
return ElevatedButton.icon(
onPressed: isLoading.value ? null : () => onSubmit(),
icon: isLoading.value
? const SizedBox(
width: 16,
height: 16,
child: CircularProgressIndicator(
strokeWidth: 2,
valueColor: AlwaysStoppedAnimation<Color>(
loadingIndicatorColor,
),
valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
),
)
: MyText.bodySmall(
'Submit Report',
color: loadingIndicatorColor,
),
: const Icon(Icons.send),
label: isLoading.value
? const SizedBox()
: MyText.bodyMedium("Submit", color: Colors.white),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.indigo,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
padding: const EdgeInsets.symmetric(horizontal: 28, vertical: 14),
),
);
}),
],

View File

@ -1,7 +1,6 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:marco/controller/task_planing/report_task_controller.dart';
import 'package:marco/helpers/theme/app_theme.dart';
import 'package:marco/helpers/utils/mixins/ui_mixin.dart';
import 'package:marco/helpers/widgets/my_button.dart';
import 'package:marco/helpers/widgets/my_spacing.dart';
@ -347,58 +346,86 @@ class _ReportTaskBottomSheetState extends State<ReportTaskBottomSheet>
);
}),
Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
MyButton.text(
OutlinedButton.icon(
onPressed: () => Navigator.of(context).pop(),
padding: MySpacing.xy(20, 16),
splashColor: contentTheme.secondary.withAlpha(25),
child: MyText.bodySmall('Cancel'),
icon: const Icon(Icons.close, color: Colors.red),
label: MyText.bodyMedium("Cancel",
color: Colors.red, fontWeight: 600),
style: OutlinedButton.styleFrom(
side: const BorderSide(color: Colors.red),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
padding: const EdgeInsets.symmetric(
horizontal: 20, vertical: 14),
),
),
MySpacing.width(12),
Obx(() {
final isLoading = controller.reportStatus.value == ApiStatus.loading;
return MyButton(
onPressed: isLoading
? null
: () async {
if (controller.basicValidator.validateForm()) {
final success = await controller.reportTask(
projectId: controller.basicValidator.getController('task_id')?.text ?? '',
comment: controller.basicValidator.getController('comment')?.text ?? '',
completedTask: int.tryParse(
controller.basicValidator.getController('completed_work')?.text ?? '') ??
0,
checklist: [],
reportedDate: DateTime.now(),
images: controller.selectedImages,
);
if (success && widget.onReportSuccess != null) {
widget.onReportSuccess!();
}
}
},
elevation: 0,
padding: MySpacing.xy(20, 16),
backgroundColor: Colors.blueAccent,
borderRadiusAll: AppStyle.buttonRadius.medium,
child: isLoading
? const SizedBox(
height: 16,
width: 16,
child: CircularProgressIndicator(
strokeWidth: 2,
valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
),
)
: MyText.bodySmall(
'Report',
color: contentTheme.onPrimary,
),
);
}),
Obx(() {
final isLoading = controller.reportStatus.value ==
ApiStatus.loading;
return ElevatedButton.icon(
onPressed: isLoading
? null
: () async {
if (controller.basicValidator
.validateForm()) {
final success =
await controller.reportTask(
projectId: controller.basicValidator
.getController('task_id')
?.text ??
'',
comment: controller.basicValidator
.getController('comment')
?.text ??
'',
completedTask: int.tryParse(
controller.basicValidator
.getController(
'completed_work')
?.text ??
'') ??
0,
checklist: [],
reportedDate: DateTime.now(),
images: controller.selectedImages,
);
if (success &&
widget.onReportSuccess != null) {
widget.onReportSuccess!();
}
}
},
icon: isLoading
? const SizedBox(
height: 16,
width: 16,
child: CircularProgressIndicator(
strokeWidth: 2,
valueColor:
AlwaysStoppedAnimation<Color>(
Colors.white),
),
)
: const Icon(Icons.check_circle_outline,
color: Colors.white, size: 18),
label: isLoading
? const SizedBox.shrink()
: MyText.bodyMedium("Report",
color: Colors.white, fontWeight: 600),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.indigo,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
padding: const EdgeInsets.symmetric(
horizontal: 28, vertical: 14),
),
);
}),
],
),
],

View File

@ -13,7 +13,8 @@ class AddEmployeeBottomSheet extends StatefulWidget {
State<AddEmployeeBottomSheet> createState() => _AddEmployeeBottomSheetState();
}
class _AddEmployeeBottomSheetState extends State<AddEmployeeBottomSheet> with UIMixin {
class _AddEmployeeBottomSheetState extends State<AddEmployeeBottomSheet>
with UIMixin {
final AddEmployeeController _controller = Get.put(AddEmployeeController());
late TextEditingController genderController;
@ -27,7 +28,8 @@ class _AddEmployeeBottomSheetState extends State<AddEmployeeBottomSheet> with UI
}
RelativeRect _popupMenuPosition(BuildContext context) {
final RenderBox overlay = Overlay.of(context).context.findRenderObject() as RenderBox;
final RenderBox overlay =
Overlay.of(context).context.findRenderObject() as RenderBox;
return RelativeRect.fromLTRB(100, 300, overlay.size.width - 100, 0);
}
@ -135,8 +137,14 @@ class _AddEmployeeBottomSheetState extends State<AddEmployeeBottomSheet> with UI
child: Container(
decoration: BoxDecoration(
color: theme.cardColor,
borderRadius: const BorderRadius.vertical(top: Radius.circular(24)),
boxShadow: const [BoxShadow(color: Colors.black12, blurRadius: 12, offset: Offset(0, -2))],
borderRadius:
const BorderRadius.vertical(top: Radius.circular(24)),
boxShadow: const [
BoxShadow(
color: Colors.black12,
blurRadius: 12,
offset: Offset(0, -2))
],
),
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 16, 20, 32),
@ -153,7 +161,8 @@ class _AddEmployeeBottomSheetState extends State<AddEmployeeBottomSheet> with UI
),
),
MySpacing.height(12),
Text("Add Employee", style: MyTextStyle.titleLarge(fontWeight: 700)),
Text("Add Employee",
style: MyTextStyle.titleLarge(fontWeight: 700)),
MySpacing.height(24),
Form(
key: _controller.basicValidator.formKey,
@ -166,16 +175,20 @@ class _AddEmployeeBottomSheetState extends State<AddEmployeeBottomSheet> with UI
label: "First Name",
hint: "e.g., John",
icon: Icons.person,
controller: _controller.basicValidator.getController('first_name')!,
validator: _controller.basicValidator.getValidation('first_name'),
controller: _controller.basicValidator
.getController('first_name')!,
validator: _controller.basicValidator
.getValidation('first_name'),
),
MySpacing.height(16),
_inputWithIcon(
label: "Last Name",
hint: "e.g., Doe",
icon: Icons.person_outline,
controller: _controller.basicValidator.getController('last_name')!,
validator: _controller.basicValidator.getValidation('last_name'),
controller: _controller.basicValidator
.getController('last_name')!,
validator: _controller.basicValidator
.getValidation('last_name'),
),
MySpacing.height(16),
_sectionLabel("Contact Details"),
@ -185,7 +198,8 @@ class _AddEmployeeBottomSheetState extends State<AddEmployeeBottomSheet> with UI
Row(
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
padding: const EdgeInsets.symmetric(
horizontal: 12, vertical: 14),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.shade300),
borderRadius: BorderRadius.circular(12),
@ -193,7 +207,8 @@ class _AddEmployeeBottomSheetState extends State<AddEmployeeBottomSheet> with UI
),
child: PopupMenuButton<Map<String, String>>(
onSelected: (country) {
_controller.selectedCountryCode = country['code']!;
_controller.selectedCountryCode =
country['code']!;
_controller.update();
},
itemBuilder: (context) => [
@ -204,11 +219,14 @@ class _AddEmployeeBottomSheetState extends State<AddEmployeeBottomSheet> with UI
height: 200,
width: 100,
child: ListView(
children: _controller.countries.map((country) {
children: _controller.countries
.map((country) {
return ListTile(
dense: true,
title: Text("${country['name']} (${country['code']})"),
onTap: () => Navigator.pop(context, country),
title: Text(
"${country['name']} (${country['code']})"),
onTap: () =>
Navigator.pop(context, country),
);
}).toList(),
),
@ -226,31 +244,42 @@ class _AddEmployeeBottomSheetState extends State<AddEmployeeBottomSheet> with UI
MySpacing.width(12),
Expanded(
child: TextFormField(
controller: _controller.basicValidator.getController('phone_number'),
controller: _controller.basicValidator
.getController('phone_number'),
validator: (value) {
if (value == null || value.trim().isEmpty) {
return "Phone number is required";
}
final digitsOnly = value.trim();
final minLength = _controller.minDigitsPerCountry[_controller.selectedCountryCode] ?? 7;
final maxLength = _controller.maxDigitsPerCountry[_controller.selectedCountryCode] ?? 15;
final minLength = _controller
.minDigitsPerCountry[
_controller.selectedCountryCode] ??
7;
final maxLength = _controller
.maxDigitsPerCountry[
_controller.selectedCountryCode] ??
15;
if (!RegExp(r'^[0-9]+$').hasMatch(digitsOnly)) {
if (!RegExp(r'^[0-9]+$')
.hasMatch(digitsOnly)) {
return "Only digits allowed";
}
if (digitsOnly.length < minLength || digitsOnly.length > maxLength) {
if (digitsOnly.length < minLength ||
digitsOnly.length > maxLength) {
return "Between $minLength$maxLength digits";
}
return null;
},
keyboardType: TextInputType.phone,
decoration: _inputDecoration("e.g., 9876543210").copyWith(
decoration: _inputDecoration("e.g., 9876543210")
.copyWith(
suffixIcon: IconButton(
icon: const Icon(Icons.contacts),
onPressed: () => _controller.pickContact(context),
onPressed: () =>
_controller.pickContact(context),
),
),
),
@ -268,9 +297,11 @@ class _AddEmployeeBottomSheetState extends State<AddEmployeeBottomSheet> with UI
child: TextFormField(
readOnly: true,
controller: TextEditingController(
text: _controller.selectedGender?.name.capitalizeFirst,
text: _controller
.selectedGender?.name.capitalizeFirst,
),
decoration: _inputDecoration("Select Gender").copyWith(
decoration:
_inputDecoration("Select Gender").copyWith(
suffixIcon: const Icon(Icons.expand_more),
),
),
@ -286,10 +317,14 @@ class _AddEmployeeBottomSheetState extends State<AddEmployeeBottomSheet> with UI
readOnly: true,
controller: TextEditingController(
text: _controller.roles.firstWhereOrNull(
(role) => role['id'] == _controller.selectedRoleId,
)?['name'] ?? "",
(role) =>
role['id'] ==
_controller.selectedRoleId,
)?['name'] ??
"",
),
decoration: _inputDecoration("Select Role").copyWith(
decoration:
_inputDecoration("Select Role").copyWith(
suffixIcon: const Icon(Icons.expand_more),
),
),
@ -301,11 +336,16 @@ class _AddEmployeeBottomSheetState extends State<AddEmployeeBottomSheet> with UI
Expanded(
child: OutlinedButton.icon(
onPressed: () => Navigator.pop(context),
icon: const Icon(Icons.close, size: 18),
label: MyText.bodyMedium("Cancel", fontWeight: 600),
icon:
const Icon(Icons.close, color: Colors.red),
label: MyText.bodyMedium("Cancel",
color: Colors.red, fontWeight: 600),
style: OutlinedButton.styleFrom(
side: const BorderSide(color: Colors.grey),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
side: const BorderSide(color: Colors.red),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12)),
padding: const EdgeInsets.symmetric(
horizontal: 20, vertical: 14),
),
),
),
@ -313,23 +353,36 @@ class _AddEmployeeBottomSheetState extends State<AddEmployeeBottomSheet> with UI
Expanded(
child: ElevatedButton.icon(
onPressed: () async {
if (_controller.basicValidator.validateForm()) {
final success = await _controller.createEmployees();
if (_controller.basicValidator
.validateForm()) {
final success =
await _controller.createEmployees();
if (success) {
final employeeController = Get.find<EmployeesScreenController>();
final projectId = employeeController.selectedProjectId;
final employeeController =
Get.find<EmployeesScreenController>();
final projectId =
employeeController.selectedProjectId;
if (projectId == null) {
await employeeController.fetchAllEmployees();
await employeeController
.fetchAllEmployees();
} else {
await employeeController.fetchEmployeesByProject(projectId);
await employeeController
.fetchEmployeesByProject(projectId);
}
employeeController.update(['employee_screen_controller']);
employeeController.update(
['employee_screen_controller']);
_controller.basicValidator.getController("first_name")?.clear();
_controller.basicValidator.getController("last_name")?.clear();
_controller.basicValidator.getController("phone_number")?.clear();
_controller.basicValidator
.getController("first_name")
?.clear();
_controller.basicValidator
.getController("last_name")
?.clear();
_controller.basicValidator
.getController("phone_number")
?.clear();
_controller.selectedGender = null;
_controller.selectedRoleId = null;
_controller.update();
@ -338,11 +391,16 @@ class _AddEmployeeBottomSheetState extends State<AddEmployeeBottomSheet> with UI
}
}
},
icon: const Icon(Icons.check, size: 18),
label: MyText.bodyMedium("Save", color: Colors.white, fontWeight: 600),
icon: const Icon(Icons.check_circle_outline,
color: Colors.white),
label: MyText.bodyMedium("Save",
color: Colors.white, fontWeight: 600),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blueAccent,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
backgroundColor: Colors.indigo,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12)),
padding: const EdgeInsets.symmetric(
horizontal: 28, vertical: 14),
),
),
),

View File

@ -187,28 +187,48 @@ class _OrganizationFormState extends State<_OrganizationForm> with UIMixin {
],
),
const SizedBox(height: 20),
SizedBox(
width: double.infinity,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: contentTheme.brandRed,
padding: const EdgeInsets.symmetric(vertical: 16),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
OutlinedButton.icon(
onPressed: () => Navigator.pop(context),
icon: const Icon(Icons.arrow_back, color: Colors.red),
label: MyText.bodyMedium("Back", color: Colors.red),
style: OutlinedButton.styleFrom(
side: const BorderSide(color: Colors.red),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
padding: const EdgeInsets.symmetric(
horizontal: 20, vertical: 14),
),
),
onPressed: _loading ? null : _submitForm,
child: _loading
? const SizedBox(
width: 22,
height: 22,
child: CircularProgressIndicator(
color: Colors.white,
strokeWidth: 2,
),
)
: MyText.labelLarge('Submit', color: Colors.white),
),
ElevatedButton.icon(
onPressed: _loading ? null : _submitForm,
icon: _loading
? const SizedBox(
width: 18,
height: 18,
child: CircularProgressIndicator(
color: Colors.white,
strokeWidth: 2,
),
)
: const Icon(Icons.check_circle_outline,
color: Colors.white),
label: _loading
? const SizedBox.shrink()
: MyText.bodyMedium("Submit", color: Colors.white),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.indigo,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12),
),
padding: const EdgeInsets.symmetric(
horizontal: 28, vertical: 14),
),
),
],
),
const SizedBox(height: 8),
Center(