create loading state for custom button

Author: devsadeq

lib/app/modules/JobDetails/views/widgets/submit_bottom_sheet.dart

@@ -42,7 +42,7 @@ class SubmitBottomSheet extends StatelessWidget {
  SizedBox(height: 50.h),
  CustomButton(
  title: "Back To Home",
- onTap: () => Get.close(2),
+ onTap: () async => Get.close(2),
  ),
  ],
  );

lib/app/modules/auth/controllers/auth_controller.dart

@@ -126,18 +126,19 @@ class AuthController extends GetxController {
  _rxCountry.value = "+${country.dialCode}";
  }
 
- void onLoginSubmit() {
+ Future<void> onLoginSubmit() async {
  if (loginFormKey.currentState!.validate()) {
- _login();
+ await _login();
  }
  }
 
- void onRegisterSubmit() {
+ Future<void> onRegisterSubmit() async {
  if (registerType == RegisterType.CUSTOMER &&
  customerFormKey.currentState!.validate()) {
- _registerCustomer();
- } else if (companyFormKey.currentState!.validate()) {
- _registerCompany();
+ await _registerCustomer();
+ } else if (registerType == RegisterType.COMPANY &&
+ companyFormKey.currentState!.validate()) {
+ await _registerCompany();
  }
  }
 
@@ -146,7 +147,7 @@ class AuthController extends GetxController {
  result.whenOrNull(success: (data) => Get.offAllNamed(Routes.LOGIN));
  }
 
- void _login() async {
+ Future<void> _login() async {
  _rxLoginState.value = await _authRepository.login(
  dto: LoginInDto(
  emailOrPhone: loginEmailController.text,
@@ -171,7 +172,7 @@ class AuthController extends GetxController {
  );
  }
 
- void _registerCustomer() async {
+ Future<void> _registerCustomer() async {
  _rxRegisterCustomerState.value = await _authRepository.registerCustomer(
  dto: RegisterCustomerDto(
  name: customerFullNameController.text,
@@ -198,7 +199,7 @@ class AuthController extends GetxController {
  );
  }
 
- void _registerCompany() async {
+ Future<void> _registerCompany() async {
  _rxRegisterCompanyState.value = await _authRepository.registerCompany(
  dto: RegisterCompanyDto(
  name: companyNameController.text,

lib/app/modules/auth/views/login/widgets/body.dart

@@ -28,7 +28,7 @@ class Body extends GetView<AuthController> {
  btnLabel: AppStrings.loginBtn,
  firstTextSpan: AppStrings.youDoNotHaveAnAccountYet,
  secondTextSpan: AppStrings.signup,
- onTap: () => controller.onLoginSubmit(),
+ onTap: controller.onLoginSubmit,
  onTextTap: controller.onSignUp,
  ),
  ],

lib/app/modules/auth/views/register/widgets/body.dart

@@ -33,7 +33,7 @@ class Body extends GetView<AuthController> {
  btnLabel: AppStrings.signup.toUpperCase(),
  firstTextSpan: AppStrings.alreadyHaveAnAccount,
  secondTextSpan: AppStrings.signIn,
- onTap:  controller.onRegisterSubmit,
+ onTap: controller.onRegisterSubmit,
  onTextTap: () => Get.offNamed(Routes.LOGIN),
  ),
  SizedBox(height: 50.h),

lib/app/modules/auth/views/widgets/button_with_text.dart

@@ -17,7 +17,7 @@ class ButtonWithText extends StatelessWidget {
  final String btnLabel;
  final String firstTextSpan;
  final String secondTextSpan;
- final void Function() onTap;
+ final Future<void> Function() onTap;
  final void Function() onTextTap;
 
  @override

lib/app/widgets/custom_button.dart

@@ -1,23 +1,42 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:get/get.dart';
 
 class CustomButton extends StatelessWidget {
- const CustomButton({
+ CustomButton({
  Key? key,
  required this.title,
  required this.onTap,
  }) : super(key: key);
  final String title;
- final void Function() onTap;
+ final Future<void> Function() onTap;
+
+ final RxBool _isLoading = false.obs;
 
  @override
  Widget build(BuildContext context) {
- return SizedBox(
- width: double.infinity,
- child: ElevatedButton(
- onPressed: onTap,
- style: Get.theme.elevatedButtonTheme.style,
- child: FittedBox(child: Text(title)),
+ return Obx(
+ () => SizedBox(
+ width: double.infinity,
+ child: ElevatedButton(
+ onPressed: _isLoading.value
+ ? null
+ : () async {
+ _isLoading.value = true;
+ await onTap();
+ _isLoading.value = false;
+ },
+ style: Get.theme.elevatedButtonTheme.style,
+ child: FittedBox(
+ child: _isLoading.value
+ ? SizedBox(
+ height: 20.h,
+ width: 20.h,
+ child: const CircularProgressIndicator(color: Colors.white),
+ )
+ : Text(title),
+ ),
+ ),
  ),
  );
  }