Untitled

 avatar
unknown
plain_text
a year ago
20 kB
5
Indexable
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:rooty/routes/app_routes.dart';
import 'package:rooty/theme/app_colors.dart';
import 'package:substring_highlight/substring_highlight.dart';

class CommonWidgets {
  static Widget alreadyHaveAnAccount({Color? textColor}) {
    return RichText(
      text: TextSpan(
        style: TextStyle(
          fontFamily: GoogleFonts.urbanist().fontFamily,
        ),
        children: [
          TextSpan(
            text: "Already have an account? ",
            style: TextStyle(
              color: textColor ?? AppColors.white,
              fontSize: 14,
              fontWeight: FontWeight.w500,
            ),
          ),
          TextSpan(
            text: "Login",
            style: TextStyle(
              color: textColor ?? AppColors.white,
              fontSize: 14,
              fontWeight: FontWeight.bold,
              decoration: TextDecoration.underline,
            ),
            recognizer: TapGestureRecognizer()
              ..onTap = () {
                Get.to(AppRoutes.loginScreen);
              },
          ),
        ],
      ),
    );
  }

  static Widget termsAndConditions({Color? textColor}) {
    return RichText(
      text: TextSpan(
        children: [
          TextSpan(
            text: "I agree with the ",
            style: TextStyle(
              color: textColor ?? AppColors.darkBrown,
              fontSize: 14,
              fontWeight: FontWeight.w500,
              fontFamily: GoogleFonts.urbanist().fontFamily,
            ),
          ),
          TextSpan(
            text: "Terms & Conditions",
            style: TextStyle(
              color: textColor ?? AppColors.primaryColorLight,
              fontSize: 14,
              fontWeight: FontWeight.bold,
              decoration: TextDecoration.underline,
            ),
            recognizer: TapGestureRecognizer()
              ..onTap = () {
                Get.to(AppRoutes.loginScreen);
              },
          ),
        ],
      ),
    );
  }

  static PreferredSizeWidget commonAppBar({required String title, required int pageCount}) {
    return AppBar(
      elevation: 0.0,
      backgroundColor: AppColors.white,
      surfaceTintColor: AppColors.white,
      title: Padding(
        padding: EdgeInsets.only(top: 10.h),
        child: Text(
          title,
          style: TextStyle(
            color: AppColors.darkBrown,
            fontSize: 20.sp,
            fontWeight: FontWeight.w800,
          ),
        ),
      ),
      leading: GestureDetector(
        onTap: () {
          Get.back();
        },
        child: Padding(
          padding: EdgeInsets.only(left: 20.w, top: 10.h),
          child: Container(
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: AppColors.white,
                border: Border.all(color: AppColors.black, width: 2.w)),
            child: Center(
              child: Image.asset('assets/AppBar_back_button.png'),
            ),
          ),
        ),
      ),
      // ..
      actions: [
        Padding(
          padding: EdgeInsets.fromLTRB(0.0, 20.h, 20.w, 0.h),
          child: Container(
            width: 70.w,
            decoration: BoxDecoration(
              color: AppColors.buttonColorGreen,
              borderRadius: BorderRadius.circular(100.r),
            ),
            child: Center(
              child: Text(
                "$pageCount OF 5",
                style: TextStyle(
                  color: AppColors.primaryColorLight,
                  fontSize: 12.sp,
                  fontWeight: FontWeight.w800,
                ),
              ),
            ),
          ),
        )
      ],
    );
  }

  static Widget emailField({String? errorText, required FocusNode focusNode, required Function(String) onChanged, required String? Function(String?)? validator}) {
    return Container(
      margin: EdgeInsets.all(20.w),
      height: 108.h,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.only(left: 2.w, bottom: 10.h),
            child: Text(
              'Email Address',
              style: TextStyle(
                color: AppColors.darkBrown,
                fontSize: 14.sp,
                fontWeight: FontWeight.w800,
              ),
            ),
          ),
          Expanded(
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 4.w),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(100.r)),
                boxShadow: focusNode.hasFocus
                    ? [
                  const BoxShadow(
                    color: AppColors.buttonColorGreen,
                    offset: Offset(0, 0),
                    blurRadius: 0,
                  )
                ]
                    : [
                  const BoxShadow(
                    color:
                    Color.fromRGBO(75, 52, 37, 0.05),
                    offset: Offset(0, 8),
                    blurRadius: 16,
                  ),
                ],
              ),
              child: TextFormField(
                autofocus: false,
                keyboardType: TextInputType.emailAddress,
                onChanged: onChanged,
                validator: validator,
                style: TextStyle(
                  color: AppColors.darkGrey,
                  fontSize: 16.sp,
                  fontWeight: FontWeight.w700,
                ),
                decoration: InputDecoration(
                  hintText: 'Enter your email...',
                  hintStyle: TextStyle(
                    fontSize: 16.sp,
                    fontWeight: FontWeight.w700,
                  ),
                  errorText: errorText,
                  fillColor: AppColors.white,
                  filled: true,
                  contentPadding: EdgeInsets.all(20.w),
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(100.r),
                    borderSide: const BorderSide(
                        color: AppColors.buttonColorGreen, width: 3),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(100.r),
                    borderSide: const BorderSide(
                      color: AppColors.white,
                    ),
                  ),
                  errorBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(100.r),
                    borderSide: const BorderSide(
                        color: AppColors.buttonColorGreen, width: 3),
                  ),
                  focusedErrorBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(100.r),
                    borderSide: const BorderSide(
                      color: AppColors.white,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  static Widget passwordField({required bool isObscureText, required FocusNode focusNode, required Function onPressed, String? errorText, required Function(String) onChanged, required String? Function(String?)? validator}) {
    return Container(
      margin: EdgeInsets.fromLTRB(20.w, 0.h, 20.w, 20.h),
      height: 108.h,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.only(left: 2.w, bottom: 10.h),
            child: Text(
              'Password',
              style: TextStyle(
                color: AppColors.darkBrown,
                fontSize: 14.sp,
                fontWeight: FontWeight.w800,
              ),
            ),
          ),
          Expanded(
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 4.w),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(100.r)),
                boxShadow: focusNode.hasFocus
                    ? [
                  const BoxShadow(
                    color: AppColors.buttonColorGreen,
                    offset: Offset(0, 0),
                    blurRadius: 0,
                  )
                ]
                    : [
                  const BoxShadow(
                    color:
                    Color.fromRGBO(75, 52, 37, 0.05),
                    offset: Offset(0, 8),
                    blurRadius: 16,
                  ),
                ],
              ),
              child: TextFormField(
                obscureText: isObscureText,
                autofocus: false,
                onChanged: onChanged,
                validator: validator,
                style: TextStyle(
                  color: AppColors.darkGrey,
                  fontSize: 16.sp,
                  fontWeight: FontWeight.w700,
                ),
                decoration: InputDecoration(
                  suffixIcon: IconButton(
                    icon: Icon(isObscureText
                        ? Icons.visibility
                        : Icons.visibility_off),
                    color: AppColors.grey,
                    onPressed: () => onPressed(),
                  ),
                  hintText: 'Enter your password...',
                  hintStyle: TextStyle(
                    fontSize: 16.sp,
                    fontWeight: FontWeight.w700,
                  ),
                  errorText: errorText,
                  fillColor: AppColors.white,
                  filled: true,
                  contentPadding: EdgeInsets.all(20.w),
                  enabledBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(100.r),
                    borderSide: const BorderSide(
                        color: AppColors.buttonColorGreen, width: 3),
                  ),
                  focusedBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(100.r),
                    borderSide: const BorderSide(
                      color: AppColors.white,
                    ),
                  ),
                  errorBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(100.r),
                    borderSide: const BorderSide(
                        color: AppColors.buttonColorGreen, width: 3),
                  ),
                  focusedErrorBorder: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(100.r),
                    borderSide: const BorderSide(
                      color: AppColors.white,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  static Widget userInfoField({required String? title, required String? hintText, required FocusNode focusNode, required Function(String) onChanged}) {
    return Container(
      margin: EdgeInsets.fromLTRB(20.w, 10.h, 20.w, 0),
      height: 108.h,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.only(left: 2.w, bottom: 10.h),
            child: Text("$title",
                style: TextStyle(
                  color: AppColors.darkBrown,
                  fontSize: 14.sp,
                  fontWeight: FontWeight.w800,
                )),
          ),
          Expanded(
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 4.w),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(100.r)),
                boxShadow: focusNode.hasFocus
                    ? [
                        const BoxShadow(
                          color: AppColors.buttonColorGreen,
                          offset: Offset(0, 0),
                          blurRadius: 0,
                        )
                      ]
                    : [
                        const BoxShadow(
                            color:
                                Color.fromRGBO(75, 52, 37, 0.05),
                            offset: Offset(0, 8),
                            blurRadius: 16,
                        ),
                      ],
              ),
              child: Center(
                child: TextFormField(
                  focusNode: focusNode,
                  onChanged: onChanged,
                  style: TextStyle(
                    color: AppColors.darkGrey,
                    fontSize: 16.sp,
                    fontWeight: FontWeight.w700,
                  ),
                  decoration: InputDecoration(
                    hintText: hintText,
                    hintStyle: TextStyle(
                      fontSize: 16.sp,
                      fontWeight: FontWeight.w700,
                    ),
                    fillColor: AppColors.white,
                    filled: true,
                    contentPadding: EdgeInsets.all(20.w),
                    enabledBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(100.r),
                      borderSide: const BorderSide(
                          color: AppColors.white,
                      ),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(100.r),
                      borderSide: const BorderSide(
                          color: AppColors.primaryColorLight,
                        width: 1,
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }

  static Widget dropDownTextField({
    required String? title,
    required String? hintText,
    required TextEditingController textController,
    required List<String> itemList,
  }) {
    return Container(
      margin: EdgeInsets.fromLTRB(20.w, 10.h, 20.w, 0),
      height: 108.h,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: EdgeInsets.only(left: 2.w, bottom: 10.h),
            child: Text(
              "$title",
              style: TextStyle(
                color: AppColors.darkBrown,
                fontSize: 14.sp,
                fontWeight: FontWeight.w800,
              ),
            ),
          ),
          Expanded(
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 4.w),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.all(Radius.circular(100.r)),
                boxShadow: textController.isBlank!
                    ? [
                  const BoxShadow(
                    color: AppColors.buttonColorGreen,
                    offset: Offset(0, 0),
                    blurRadius: 0,
                  )
                ]
                    : [
                  const BoxShadow(
                    color:
                    Color.fromRGBO(75, 52, 37, 0.05),
                    offset: Offset(0, 8),
                    blurRadius: 16,
                  ),
                ],
              ),
              child: Autocomplete(
                optionsBuilder: (TextEditingValue textEditingValue) {
                  if (textEditingValue.text.isEmpty) {
                    return const Iterable<String>.empty();
                  } else {
                    return itemList.where((word) => word
                        .toLowerCase()
                        .contains(textEditingValue.text.toLowerCase()));
                  }
                },
                optionsViewBuilder:
                    (context, Function(String) onSelected, options) {
                  return Material(
                    elevation: 4,
                    child: ListView.separated(
                      padding: EdgeInsets.zero,
                      itemBuilder: (context, index) {
                        final option = options.elementAt(index);
                        return ListTile(
                          title: SubstringHighlight(
                            text: option.toString(),
                            term: textController.text,
                            textStyleHighlight:
                                const TextStyle(fontWeight: FontWeight.w700),
                          ),
                          onTap: () {
                            onSelected(option.toString());
                          },
                        );
                      },
                      separatorBuilder: (context, index) => const Divider(),
                      itemCount: options.length,
                    ),
                  );
                },
                onSelected: (selectedString) {
                  if (kDebugMode) {
                    print(selectedString);
                  }
                },
                fieldViewBuilder:
                    (context, controller, focusNode, onEditingComplete) {
                  textController = controller;
                  return TextField(
                    controller: controller,
                    focusNode: focusNode,
                    onEditingComplete: onEditingComplete,
                    decoration: InputDecoration(
                      hintText: hintText,
                      hintStyle: TextStyle(
                        fontSize: 16.sp,
                        fontWeight: FontWeight.w700,
                      ),
                      fillColor: AppColors.white,
                      filled: true,
                      contentPadding: EdgeInsets.all(20.w),
                      suffixIcon: Image.asset('assets/dropdown_icon.png',
                          height: 24.h, width: 24.w),
                      enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(100.r),
                        borderSide: const BorderSide(
                          color: AppColors.white,
                        ),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(100.r),
                        borderSide: const BorderSide(
                            color: AppColors.buttonColorGreen, width: 3),
                      ),
                      errorBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(100.r),
                        borderSide: const BorderSide(
                          color: AppColors.white,
                        ),
                      ),
                      focusedErrorBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(100.r),
                        borderSide: const BorderSide(
                            color: AppColors.buttonColorGreen, width: 3),
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}
Editor is loading...
Leave a Comment