442 lines
13 KiB
Dart
442 lines
13 KiB
Dart
import 'package:flutter/material.dart';
|
|
|
|
import '../../app/constant.dart';
|
|
|
|
// define condition START
|
|
// ketika textfield terisi
|
|
InputBorder enabledBorderFillTextField = OutlineInputBorder(
|
|
borderRadius: const BorderRadius.all(Radius.circular(8)),
|
|
borderSide: BorderSide(
|
|
color: Constant.primaryMain,
|
|
width: 2,
|
|
),
|
|
);
|
|
|
|
// ketika focus
|
|
InputBorder enabledBorderFocusTextField = OutlineInputBorder(
|
|
borderRadius: const BorderRadius.all(Radius.circular(8)),
|
|
borderSide: BorderSide(
|
|
color: Constant.primaryMain,
|
|
width: 2,
|
|
),
|
|
);
|
|
|
|
// ketika no action
|
|
InputBorder enabledBorderNoAction = OutlineInputBorder(
|
|
borderRadius: const BorderRadius.all(Radius.circular(8)),
|
|
borderSide: BorderSide(
|
|
color: Constant.textGrey,
|
|
width: 2,
|
|
),
|
|
);
|
|
|
|
// color ketika focus
|
|
Color colorFocus = Constant.primaryMain;
|
|
|
|
// define condition END
|
|
|
|
// color no action
|
|
Color colorNoAction = Constant.textGrey;
|
|
|
|
// Textfield biasa atau common (widget biasa tanpa prefix dan suffix icon)
|
|
class SasTextField extends StatelessWidget {
|
|
final String hintText;
|
|
final String labelText;
|
|
final String errorText;
|
|
final void Function()? onToggle;
|
|
final TextEditingController? controller;
|
|
final void Function(String)? onChange;
|
|
final void Function(String)? onSubmitted;
|
|
final void Function()? onTap;
|
|
final void Function()? onEditingComplete;
|
|
final FocusNode? focusNode;
|
|
|
|
final bool isError;
|
|
final bool isReadOnly;
|
|
|
|
final bool hasFocus;
|
|
final TextStyle? style;
|
|
|
|
const SasTextField(
|
|
{Key? key,
|
|
required this.hintText,
|
|
required this.labelText,
|
|
this.onToggle,
|
|
required this.controller,
|
|
this.onChange,
|
|
this.onSubmitted,
|
|
this.focusNode,
|
|
this.isError = false,
|
|
this.isReadOnly = false,
|
|
this.hasFocus = false,
|
|
this.onTap,
|
|
this.onEditingComplete,
|
|
this.style,
|
|
this.errorText = ""})
|
|
: super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return TextField(
|
|
autofocus: false,
|
|
showCursor: (hasFocus && isReadOnly == false) ? true : false,
|
|
readOnly: isReadOnly,
|
|
controller: controller,
|
|
enableInteractiveSelection: false,
|
|
style: style,
|
|
onChanged: onChange,
|
|
onSubmitted: onSubmitted,
|
|
onTap: onTap,
|
|
onEditingComplete: onEditingComplete,
|
|
focusNode: focusNode,
|
|
maxLines: 1,
|
|
cursorColor: Constant.primaryBlue,
|
|
decoration: InputDecoration(
|
|
errorText: (isError) ? errorText : null,
|
|
// filled: true,
|
|
fillColor: (hasFocus && isReadOnly == false)
|
|
? colorFocus
|
|
: ((controller?.text != "") && isReadOnly == false)
|
|
? colorFocus
|
|
: colorNoAction,
|
|
// filled: true,
|
|
focusedBorder:
|
|
(hasFocus && isReadOnly == false) ? enabledBorderFocusTextField : enabledBorderNoAction,
|
|
enabledBorder: (controller?.text != "" && isReadOnly == false)
|
|
? enabledBorderFillTextField
|
|
: (hasFocus && isReadOnly == false)
|
|
? enabledBorderFocusTextField
|
|
: enabledBorderNoAction,
|
|
hintStyle: Constant.body1(context: context).copyWith(
|
|
color: (hasFocus && isReadOnly == false)
|
|
? colorFocus
|
|
: ((controller?.text != "") && isReadOnly == false)
|
|
? colorFocus
|
|
: colorNoAction,
|
|
),
|
|
// mainkan focus
|
|
labelStyle: Constant.body1(context: context).copyWith(
|
|
color: (hasFocus && isReadOnly == false)
|
|
? colorFocus
|
|
: ((controller?.text != "") && isReadOnly == false)
|
|
? colorFocus
|
|
: colorNoAction,
|
|
),
|
|
labelText: labelText,
|
|
hintText: hintText,
|
|
alignLabelWithHint: true,
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
// Textfield password (widget dengan suffix icon eye)
|
|
class SasTextFieldPassword extends StatelessWidget {
|
|
final String hintText;
|
|
final String labelText;
|
|
final String errorText;
|
|
final bool obscureText;
|
|
final bool isMaxLine;
|
|
final void Function()? onToggle;
|
|
final TextEditingController? controller;
|
|
final void Function(String)? onChange;
|
|
final void Function(String)? onSubmitted;
|
|
final void Function()? onTap;
|
|
final void Function()? onEditingComplete;
|
|
final FocusNode? focusNode;
|
|
|
|
final bool isError;
|
|
final bool isReadOnly;
|
|
|
|
final bool hasFocus;
|
|
final TextStyle? style;
|
|
|
|
const SasTextFieldPassword(
|
|
{Key? key,
|
|
required this.hintText,
|
|
required this.labelText,
|
|
this.isMaxLine = false,
|
|
this.onToggle,
|
|
this.obscureText = false,
|
|
required this.controller,
|
|
this.onChange,
|
|
this.onSubmitted,
|
|
this.focusNode,
|
|
this.isError = false,
|
|
this.isReadOnly = false,
|
|
this.hasFocus = false,
|
|
this.onTap,
|
|
this.onEditingComplete,
|
|
this.style,
|
|
this.errorText = ""})
|
|
: super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return TextField(
|
|
autofocus: false,
|
|
showCursor: (hasFocus) ? true : false,
|
|
readOnly: isReadOnly,
|
|
controller: controller,
|
|
// enableInteractiveSelection: false,
|
|
style: style,
|
|
obscureText: obscureText,
|
|
onChanged: onChange,
|
|
onSubmitted: onSubmitted,
|
|
onTap: onTap,
|
|
onEditingComplete: onEditingComplete,
|
|
focusNode: focusNode,
|
|
maxLines: 1,
|
|
cursorColor: Constant.primaryBlue,
|
|
decoration: InputDecoration(
|
|
// fillColor: (hasFocus) ? Constant.primaryMain : Constant.textGrey,
|
|
errorText: (isError) ? errorText : null,
|
|
// filled: true,
|
|
fillColor: (hasFocus)
|
|
? colorFocus
|
|
: ((controller?.text != ""))
|
|
? colorFocus
|
|
: colorNoAction,
|
|
// filled: true,
|
|
focusedBorder:
|
|
(hasFocus) ? enabledBorderFocusTextField : enabledBorderNoAction,
|
|
enabledBorder: (controller?.text != "")
|
|
? enabledBorderFillTextField
|
|
: (hasFocus)
|
|
? enabledBorderFocusTextField
|
|
: enabledBorderNoAction,
|
|
hintStyle: Constant.body1(context: context).copyWith(
|
|
color: (hasFocus)
|
|
? colorFocus
|
|
: ((controller?.text != ""))
|
|
? colorFocus
|
|
: colorNoAction,
|
|
),
|
|
// mainkan focus
|
|
labelStyle: Constant.body1(context: context).copyWith(
|
|
color: (hasFocus)
|
|
? colorFocus
|
|
: ((controller?.text != ""))
|
|
? colorFocus
|
|
: colorNoAction,
|
|
),
|
|
labelText: labelText,
|
|
hintText: hintText,
|
|
alignLabelWithHint: true,
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
suffixIcon: IconButton(
|
|
alignment: Alignment.centerRight,
|
|
onPressed: onToggle,
|
|
icon: Icon(
|
|
Icons.remove_red_eye,
|
|
color: (hasFocus) ? Constant.primaryMain : Constant.textGrey,
|
|
),
|
|
iconSize: Constant.getActualY(context: context, y: 24),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
// Textfield area (widget seperti text area di html)
|
|
class SasTextFieldArea extends StatelessWidget {
|
|
final String hintText;
|
|
final String labelText;
|
|
final void Function()? onToggle;
|
|
final TextEditingController? controller;
|
|
final void Function(String)? onChange;
|
|
final void Function(String)? onSubmitted;
|
|
final void Function()? onTap;
|
|
final void Function()? onEditingComplete;
|
|
final FocusNode? focusNode;
|
|
|
|
final bool isError;
|
|
final bool isReadOnly;
|
|
|
|
final bool hasFocus;
|
|
final TextStyle? style;
|
|
|
|
const SasTextFieldArea(
|
|
{Key? key,
|
|
required this.hintText,
|
|
required this.labelText,
|
|
this.onToggle,
|
|
required this.controller,
|
|
this.onChange,
|
|
this.onSubmitted,
|
|
this.focusNode,
|
|
this.isError = false,
|
|
this.isReadOnly = false,
|
|
this.hasFocus = false,
|
|
this.onTap,
|
|
this.onEditingComplete,
|
|
this.style})
|
|
: super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return TextField(
|
|
autofocus: false,
|
|
showCursor: (hasFocus && isReadOnly == false) ? true : false,
|
|
readOnly: isReadOnly,
|
|
controller: controller,
|
|
enableInteractiveSelection: false,
|
|
style: style,
|
|
onChanged: onChange,
|
|
onSubmitted: onSubmitted,
|
|
onTap: onTap,
|
|
onEditingComplete: onEditingComplete,
|
|
focusNode: focusNode,
|
|
maxLines: 4,
|
|
cursorColor: Constant.primaryBlue,
|
|
decoration: InputDecoration(
|
|
fillColor: (hasFocus && isReadOnly == false)
|
|
? colorFocus
|
|
: ((controller?.text != "") && isReadOnly == false)
|
|
? colorFocus
|
|
: colorNoAction,
|
|
// filled: true,
|
|
focusedBorder:
|
|
(hasFocus && isReadOnly == false) ? enabledBorderFocusTextField : enabledBorderNoAction,
|
|
enabledBorder: (controller?.text != "" && isReadOnly == false)
|
|
? enabledBorderFillTextField
|
|
: (hasFocus && isReadOnly == false)
|
|
? enabledBorderFocusTextField
|
|
: enabledBorderNoAction,
|
|
hintStyle: Constant.body1(context: context).copyWith(
|
|
color: (hasFocus && isReadOnly == false)
|
|
? colorFocus
|
|
: ((controller?.text != "") && isReadOnly == false)
|
|
? colorFocus
|
|
: colorNoAction,
|
|
),
|
|
// mainkan focus
|
|
labelStyle: Constant.body1(context: context).copyWith(
|
|
color: (hasFocus && isReadOnly == false)
|
|
? colorFocus
|
|
: ((controller?.text != "") && isReadOnly == false)
|
|
? colorFocus
|
|
: colorNoAction,
|
|
),
|
|
labelText: labelText,
|
|
hintText: hintText,
|
|
alignLabelWithHint: true,
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
// Textfield search (widget dengan suffix icon search)
|
|
class SasTextFieldSearch extends StatelessWidget {
|
|
final String hintText;
|
|
final String labelText;
|
|
final String errorText;
|
|
final bool obscureText;
|
|
final bool isMaxLine;
|
|
final void Function()? onPressed;
|
|
final TextEditingController? controller;
|
|
final void Function(String)? onChange;
|
|
final void Function(String)? onSubmitted;
|
|
final void Function()? onTap;
|
|
final void Function()? onEditingComplete;
|
|
final FocusNode? focusNode;
|
|
|
|
final bool isError;
|
|
final bool isReadOnly;
|
|
|
|
final bool hasFocus;
|
|
final TextStyle? style;
|
|
|
|
const SasTextFieldSearch(
|
|
{Key? key,
|
|
required this.hintText,
|
|
required this.labelText,
|
|
this.isMaxLine = false,
|
|
this.onPressed,
|
|
this.obscureText = false,
|
|
required this.controller,
|
|
this.onChange,
|
|
this.onSubmitted,
|
|
this.focusNode,
|
|
this.isError = false,
|
|
this.isReadOnly = false,
|
|
this.hasFocus = false,
|
|
this.onTap,
|
|
this.onEditingComplete,
|
|
this.style,
|
|
this.errorText = ""})
|
|
: super(key: key);
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return TextField(
|
|
autofocus: false,
|
|
showCursor: (hasFocus) ? true : false,
|
|
readOnly: isReadOnly,
|
|
controller: controller,
|
|
// enableInteractiveSelection: false,
|
|
style: style,
|
|
// obscureText: obscureText,
|
|
onChanged: onChange,
|
|
onSubmitted: onSubmitted,
|
|
onTap: onTap,
|
|
onEditingComplete: onEditingComplete,
|
|
focusNode: focusNode,
|
|
maxLines: 1,
|
|
cursorColor: Constant.primaryBlue,
|
|
decoration: InputDecoration(
|
|
// fillColor: (hasFocus) ? Constant.primaryMain : Constant.textGrey,
|
|
errorText: (isError) ? errorText : null,
|
|
// filled: true,
|
|
fillColor: (hasFocus)
|
|
? colorFocus
|
|
: ((controller?.text != ""))
|
|
? colorFocus
|
|
: colorNoAction,
|
|
// filled: true,
|
|
focusedBorder:
|
|
(hasFocus) ? enabledBorderFocusTextField : enabledBorderNoAction,
|
|
enabledBorder: (controller?.text != "")
|
|
? enabledBorderFillTextField
|
|
: (hasFocus)
|
|
? enabledBorderFocusTextField
|
|
: enabledBorderNoAction,
|
|
hintStyle: Constant.body1(context: context).copyWith(
|
|
color: (hasFocus)
|
|
? colorFocus
|
|
: ((controller?.text != ""))
|
|
? colorFocus
|
|
: colorNoAction,
|
|
),
|
|
// mainkan focus
|
|
labelStyle: Constant.body1(context: context).copyWith(
|
|
color: (hasFocus)
|
|
? colorFocus
|
|
: ((controller?.text != ""))
|
|
? colorFocus
|
|
: colorNoAction,
|
|
),
|
|
labelText: labelText,
|
|
hintText: hintText,
|
|
alignLabelWithHint: true,
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
suffixIcon: IconButton(
|
|
alignment: Alignment.centerRight,
|
|
onPressed: onPressed,
|
|
icon: Icon(
|
|
Icons.search_rounded,
|
|
color: (hasFocus) ? Constant.primaryMain : Constant.textGrey,
|
|
),
|
|
iconSize: Constant.getActualY(context: context, y: 24),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
} |