universal textField component

button_component.dart

import 'package:bjb_epays_mobile/marketplace/shared/theme.dart';
import 'package:bjb_epays_mobile/shared/shared_colors.dart';
import 'package:flutter/material.dart';

class ButtonComponent extends StatelessWidget {
  final VoidCallback? onTap;
  final String? title;
  final double? fontSize, borderCircular, height, width;
  final Color? color, fontColor;
  final FontWeight? fontWeight;
  final LinearGradient? linearGradient;
  final BoxDecoration? boxDecoration;
  final TextStyle? textStyle;

  const ButtonComponent(
    this.title, {
    Key? key,
    this.onTap,
    this.fontSize,
    this.color,
    this.fontWeight,
    this.borderCircular,
    this.fontColor,
    this.linearGradient,
    this.height,
    this.boxDecoration,
    this.textStyle,
    this.width,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: width ?? MediaQuery.of(context).size.width,
      height: height ?? 54,
      decoration: boxDecoration ??
          BoxDecoration(
              boxShadow: [
                BoxShadow(
                    color: Colors.black26,
                    offset: Offset(0, 4),
                    blurRadius: 5.0)
              ],
              gradient: linearGradient ??
                  LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [HexColor("#427ECF"), HexColor("#2D5994")],
                  ),
              color: color,
              borderRadius: BorderRadius.circular(borderCircular ?? 16)),
      child: ElevatedButton(
        onPressed: onTap,
        style: ButtonStyle(
          shadowColor: MaterialStateProperty.all(Colors.transparent),
          backgroundColor: MaterialStateProperty.all(Colors.transparent),
          elevation: MaterialStateProperty.all<double>(0),
          shape: MaterialStateProperty.all<RoundedRectangleBorder>(
            RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(
                borderCircular ?? 20,
              ),
            ),
          ),
        ),
        child: Text(
          title!,
          style: textStyle ??
              TextStyle(
                  color: fontColor ?? Colors.white,
                  fontSize: fontSize ?? 16,
                  fontWeight: fontWeight ?? semiBold),
        ),
      ),
    );
  }
}

input_component.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class InputComponent extends StatelessWidget {
  final Function(String)? onChanged;
  final TextStyle? placeholderStyle, labelStyle;
  final Color? color;
  final Widget? suffix, prefix;
  final String? label, initialValue, placeholder, labelText;
  final FontWeight? fontWeight;
  final Alignment? suffixAlign, prefixAlign;
  final TextInputType? keyboardType;
  final List<TextInputFormatter>? inputFormatters;
  final double? labelSize,
      fontSize,
      suffixSize,
      prefixSize,
      paddingHorizontal,
      paddingVertical;
  final int? maxLines, minLines;
  final TextInputAction? textInputAction;
  final bool? enabled, readOnly, autofocus, obscureText;
  final TextEditingController? controller;
  final EdgeInsets? contentPadding;
  final Widget? suffixIcon;
  final Widget? prefixIcon;

  const InputComponent(
      {Key? key,
      this.label,
      this.suffix,
      this.prefix,
      this.fontWeight,
      this.labelSize,
      this.controller,
      this.initialValue,
      this.enabled,
      this.suffixSize,
      this.prefixSize,
      this.suffixIcon,
      this.contentPadding,
      this.fontSize,
      this.suffixAlign,
      this.prefixAlign,
      this.readOnly,
      this.paddingHorizontal,
      this.paddingVertical,
      this.placeholder,
      this.labelText,
      this.keyboardType,
      this.inputFormatters,
      this.autofocus,
      this.onChanged,
      this.maxLines,
      this.textInputAction,
      this.minLines,
      this.color,
      this.prefixIcon,
      this.placeholderStyle,
      this.obscureText,
      this.labelStyle})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        (label != null)
            ? Text(label ?? 'label',
                style: textStyle.copyWith(
                    color: Colors.grey,
                    fontWeight: fontWeight ?? FontWeight.bold,
                    fontSize: labelSize ?? 14))
            : const SizedBox(),
        TextFormField(
          cursorColor: Colors.black,
          minLines: minLines ?? 1,
          maxLines: maxLines ?? 1,
          obscureText: obscureText ?? false,
          textInputAction: textInputAction ?? TextInputAction.done,
          onChanged: onChanged,
          autofocus: autofocus ?? false,
          readOnly: readOnly ?? false,
          controller: controller,
          style: TextStyle(
              color: color ?? Colors.black,
              fontWeight: fontWeight ?? FontWeight.w400,
              fontSize: fontSize ?? 20),
          initialValue: initialValue,
          decoration: InputDecoration(
              hintText: placeholder,
              hintStyle: placeholderStyle,
              prefixIconConstraints: const BoxConstraints(),
              enabled: enabled ?? true,
              labelText: labelText,
              labelStyle: labelStyle,
              floatingLabelBehavior: FloatingLabelBehavior.never,
              suffix: suffix ?? SizedBox(width: suffixSize ?? 0),
              prefix: prefix ?? SizedBox(width: prefixSize ?? 0),
              suffixIcon: suffixIcon,
              prefixIcon: prefixIcon,
              disabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.grey.shade300)),
              fillColor: Colors.white,
              enabledBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.grey.shade300)),
              focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.grey.shade400)),
              contentPadding: contentPadding ??
                  const EdgeInsets.symmetric(horizontal: 0, vertical: 12)),
          keyboardType: keyboardType ?? TextInputType.text,
          inputFormatters: inputFormatters ?? [],
        ),
      ],
    );
  }
}

import 'package:bjb_epays_mobile/shared/environment.dart';
import 'package:flutter/material.dart';

class Helpers {
  static log(value, {prefix = "logPrint"}) {
    if (Environment().config.name == "DEV") {
      // ignore: avoid_print
      return print("$prefix=> ${value!}");
    } else {
      return;
    }
  }

  static percentWidth(BuildContext context, double width) {
    return ((MediaQuery.of(context).size.width) * width) / 100;
  }

  static percentHeight(BuildContext context, double height) {
    return ((MediaQuery.of(context).size.height) * height) / 100;
  }

  static height(BuildContext context) {
    return (MediaQuery.of(context).size.height);
  }

  static width(BuildContext context) {
    return (MediaQuery.of(context).size.width);
  }

  static sp(BuildContext context, double val) {
    return val * (MediaQuery.of(context).size.width / 3) / 100;
  }
}

import 'package:bjb_epays_mobile/marketplace/shared/theme.dart';
import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';

class AppbarTemplate extends StatelessWidget {
  const AppbarTemplate(
      {Key? key,
      this.weight,
      required this.title,
      this.isCenter = true,
      this.body,
      this.onBack,
      this.shadowColor = Colors.white30})
      : super(key: key);

  final String title;
  final double? weight;
  final bool? isCenter;
  final Widget? body;
  final VoidCallback? onBack;
  final Color? shadowColor;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          systemOverlayStyle: defaultStatusBar,
          title: Text(
            title,
            style: textStyle.copyWith(
              fontSize: defaultAppbarTitle,
              fontWeight: bold,
              color: Colors.black,
            ),
          ),
          centerTitle: isCenter,
          elevation: 8,
          shadowColor: shadowColor,
          leading: IconButton(
              color: Colors.black,
              onPressed: onBack ?? () => Modular.to.pop(),
              icon: const Icon(Icons.arrow_back_ios_new_rounded,
                  color: Colors.black)),
          backgroundColor: Colors.white,
        ),
        body: body,
      ),
    );
  }
}

// LOADING WRAPPER isLoading

// ignore_for_file: library_private_types_in_public_api

import 'package:bjb_epays_mobile/marketplace/shared/helpers/helper.dart';
import 'package:flutter/material.dart';
import '../theme.dart';

class LoadingApp extends StatefulWidget {
  final bool isLoading;
  final double opacity;
  final Color? backroundColor;
  final Widget? progressIndicator;
  final Widget child;

  const LoadingApp({
    super.key,
    required this.isLoading,
    required this.child,
    this.opacity = 0.5,
    this.progressIndicator,
    this.backroundColor = Colors.black87,
  });

  @override
  _LoadingAppState createState() => _LoadingAppState();
}

class _LoadingAppState extends State<LoadingApp>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;
  bool? _overlayVisible;

  _LoadingAppState();

  @override
  void initState() {
    super.initState();
    _overlayVisible = false;
    _controller = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 300));
    _animation = Tween(begin: 0.0, end: 1.0).animate(_controller);
    _animation.addStatusListener((status) {
      // ignore: unnecessary_statements
      status == AnimationStatus.forward
          ? setState(() => {_overlayVisible = true})
          : null;
      // ignore: unnecessary_statements
      status == AnimationStatus.dismissed
          ? setState(() => {_overlayVisible = false})
          : null;
    });
    if (widget.isLoading) {
      _controller.forward();
    }
  }

  @override
  void didUpdateWidget(LoadingApp oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (!oldWidget.isLoading && widget.isLoading) {
      _controller.forward();
    }

    if (oldWidget.isLoading && !widget.isLoading) {
      _controller.reverse();
    }
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    var sizeContainer = ((MediaQuery.of(context).size.width) * 30) / 100;
    var widgets = <Widget>[];
    widgets.add(widget.child);
    if (_overlayVisible == true) {
      final modal = FadeTransition(
        opacity: _animation,
        child: Stack(
          children: <Widget>[
            Opacity(
              opacity: widget.opacity,
              child: ModalBarrier(
                dismissible: false,
                color: widget.backroundColor ??
                    Theme.of(context).colorScheme.background,
              ),
            ),
            Center(
              child: Container(
                width: sizeContainer,
                height: sizeContainer,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(
                    Radius.circular(Helpers.percentWidth(context, 6)),
                  ),
                ),
                child: CircleLoading(
                  progressIndicator: widget.progressIndicator,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                ),
              ),
            )
          ],
        ),
      );
      widgets.add(modal);
    }

    return Stack(children: widgets);
  }
}

class CircleLoading extends StatelessWidget {
  final double sizeHeight, strokeWidth;
  final Color? color, backroundColor;
  final MainAxisAlignment mainAxisAlignment;
  final CrossAxisAlignment crossAxisAlignment;
  final Widget? progressIndicator;

  const CircleLoading(
      {super.key,
      this.sizeHeight = 60,
      this.mainAxisAlignment = MainAxisAlignment.center,
      this.crossAxisAlignment = CrossAxisAlignment.center,
      this.progressIndicator,
      this.color,
      this.strokeWidth = 1.2,
      this.backroundColor});

  @override
  Widget build(BuildContext context) {
    final width = (MediaQuery.of(context).size.width);
    return SizedBox(
      width: width,
      height: sizeHeight,
      child: Center(
          child: progressIndicator ??
              CircularProgressIndicator(
                  color: kBlueColor, strokeWidth: width * 1 / 100)),
    );
  }
}