syncrow-web/lib/pages/common/text_field/custom_text_field.dart

import 'package:flutter/material.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';
import 'package:syncrow_web/utils/style.dart';

class StatefulTextField extends StatefulWidget {
  const StatefulTextField({
    super.key,
    required this.title,
    this.hintText = 'Please enter',
    required this.width,
    this.elevation,
    required this.controller,
    this.onSubmitted,
    this.boxDecoration,
    this.borderRadius,
    this.height,
    this.padding,
    this.icon,
    this.hintColor,
    required this.onChanged,
    this.isRequired,
  });

  final String title;
  final String hintText;
  final double width;
  final double? elevation;
  final TextEditingController controller;
  final Function? onSubmitted;
  final BoxDecoration? boxDecoration;
  final double? borderRadius;
  final double? height;
  final double? padding;
  final IconData? icon;
  final Color? hintColor;
  final Function(String)? onChanged;
  final bool? isRequired;

  @override
  State<StatefulTextField> createState() => _StatefulTextFieldState();
}

class _StatefulTextFieldState extends State<StatefulTextField> {
  @override
  void dispose() {
    widget.controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return CustomTextField(
      title: widget.title,
      controller: widget.controller,
      hintText: widget.hintText,
      width: widget.width,
      elevation: widget.elevation,
      onSubmittedFun: widget.onSubmitted,
      boxDecoration: widget.boxDecoration,
      borderRadius: widget.borderRadius,
      height: widget.height,
      padding: widget.padding,
      icon: widget.icon,
      hintColor: widget.hintColor,
      onChanged: widget.onChanged,
      isRequired: widget.isRequired,
    );
  }
}

class CustomTextField extends StatelessWidget {
  const CustomTextField({
    super.key,
    required this.title,
    required this.controller,
    this.hintText = 'Please enter',
    required this.width,
    this.elevation,
    this.onSubmittedFun,
    this.boxDecoration,
    this.borderRadius,
    this.height,
    this.padding,
    this.icon,
    this.hintColor,
    required this.onChanged,
    this.isRequired,
  });

  final String title;
  final TextEditingController controller;
  final String hintText;
  final double width;
  final double? elevation;
  final Function? onSubmittedFun;
  final BoxDecoration? boxDecoration;
  final double? borderRadius;
  final double? height;
  final double? padding;
  final IconData? icon;
  final Color? hintColor;
  final Function(String)? onChanged;
  final bool? isRequired;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.start,
      children: [
        Row(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Visibility(
              visible: isRequired == true,
              child: Text('* ',
                  style: context.textTheme.bodyMedium!
                      .copyWith(color: Colors.red, fontSize: 13)),
            ),
            Text(
              title,
              style: context.textTheme.bodyMedium!.copyWith(
                fontSize: 13,
                fontWeight: FontWeight.w600,
                color: const Color(0xff000000),
              ),
            ),
          ],
        ),
        const SizedBox(height: 8),
        Material(
          elevation: elevation ?? 0,
          borderRadius: BorderRadius.circular(borderRadius ?? 8),
          child: Container(
            width: width,
            height: height ?? 45,
            decoration: boxDecoration ?? containerDecoration,
            child: TextFormField(
              controller: controller,
              style: const TextStyle(color: Colors.black),

              decoration: InputDecoration(
                hintText: hintText,
                hintStyle: TextStyle(
                    fontSize: 12, color: hintColor ?? ColorsManager.blackColor),
                contentPadding: EdgeInsets.symmetric(
                    horizontal: 12, vertical: padding ?? 10),
                border: InputBorder.none,
                suffixIcon: icon != null
                    ? Icon(icon, color: ColorsManager.greyColor)
                    : null,
              ),
              onFieldSubmitted: (_) {
                onSubmittedFun!();
              },
              onChanged: (value) {
                onChanged!(value);
              },

              /// required validator
              validator: (value) {
                if (isRequired == true) {
                  if (value == null || value.isEmpty) {
                    return 'This field is required';
                  }
                }
                return null;
              },
            ),
          ),
        ),
      ],
    );
  }
}