Skip to content

Commit 0ccb359

Browse files
Merge pull request #147 from webreinvent/feature/Task-7971-update-Input-text-textalign-color
Feature -> Develop | Task 7971 update input text text align color
2 parents 59be586 + a6a1c1e commit 0ccb359

File tree

1 file changed

+77
-33
lines changed
  • content/vaahflutter/5.directory_structure/3.vaahextendflutter/6.widgets/1.atoms

1 file changed

+77
-33
lines changed

content/vaahflutter/5.directory_structure/3.vaahextendflutter/6.widgets/1.atoms/8.input-text.md

Lines changed: 77 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,54 @@ InputText(
187187
),
188188
```
189189

190+
Use inputTextAlign to align the text in center.
191+
```dart{3}
192+
InputText(
193+
label: 'Text Alignment',
194+
inputTextAlign: TextAlign.center,
195+
),
196+
```
197+
198+
Use borderWidth for changing border thickness.
199+
```dart{3}
200+
InputText(
201+
label: 'Border width',
202+
borderWidth: 2,
203+
),
204+
```
205+
206+
Use focusedEnabledColor to change color of InputText when it's focused.
207+
```dart{3}
208+
InputText(
209+
label: 'Highlight Border Color on focus',
210+
focusedBorderColor: Colors.blue,
211+
),
212+
```
213+
214+
Use enabledBorderColor to change border color when InputText is enabled.
215+
```dart{3}
216+
InputText(
217+
label: 'Border Color',
218+
enabledBorderColor: Colors.amber,
219+
),
220+
```
221+
222+
Use inputColor for changing user input text color.
223+
```dart{3}
224+
InputText(
225+
label: 'Change user input color',
226+
inputColor: Colors.blue,
227+
),
228+
```
229+
230+
Use labelColor to change label color.
231+
```dart{3}
232+
InputText(
233+
label: 'Label color',
234+
labelColor: Colors.blue,
235+
),
236+
```
237+
190238
## Source Code
191239

192240
```dart
@@ -217,7 +265,12 @@ class InputText extends StatelessWidget {
217265
final Function()? suffixOnTap;
218266
final int? minLines;
219267
final int? maxLines;
220-
final FocusNode? focusNode;
268+
final TextAlign inputTextAlign;
269+
final double borderWidth;
270+
final Color? focusedBorderColor;
271+
final Color? inputColor;
272+
final Color? labelColor;
273+
final Color? enabledBorderColor;
221274
222275
const InputText({
223276
super.key,
@@ -240,26 +293,32 @@ class InputText extends StatelessWidget {
240293
this.suffixOnTap,
241294
this.minLines,
242295
this.maxLines,
243-
this.focusNode,
296+
this.inputTextAlign = TextAlign.start,
297+
this.borderWidth = 1,
298+
this.focusedBorderColor,
299+
this.inputColor,
300+
this.labelColor,
301+
this.enabledBorderColor,
244302
});
245303
246304
@override
247305
Widget build(BuildContext context) {
248306
return TextFormField(
307+
textAlign: inputTextAlign,
249308
decoration: InputDecoration(
250309
contentPadding: padding,
251-
border: getInputBorder(inputBorder, AppTheme.colors['black']!.shade400),
252-
enabledBorder: getInputBorder(inputBorder, AppTheme.colors['black']!.shade400),
253-
disabledBorder: getInputBorder(inputBorder, AppTheme.colors['black']!.shade300),
254-
focusedBorder: getInputBorder(inputBorder, AppTheme.colors['black']!.shade400),
255-
errorBorder: getInputBorder(inputBorder, AppTheme.colors['danger']!.shade400),
256-
focusedErrorBorder: getInputBorder(inputBorder, AppTheme.colors['danger']!.shade400),
310+
border: border(AppTheme.colors['black']!.shade400),
311+
enabledBorder: border(enabledBorderColor ?? AppTheme.colors['black']!.shade400),
312+
disabledBorder: border(AppTheme.colors['black']!.shade300),
313+
focusedBorder: border(focusedBorderColor ?? AppTheme.colors['black']!.shade400),
314+
errorBorder: border(AppTheme.colors['danger']!.shade400),
315+
focusedErrorBorder: border(AppTheme.colors['danger']!.shade400),
257316
errorStyle: TextStyle(color: AppTheme.colors['danger']!.shade400),
258317
hintText: label,
259318
hintStyle: TextStyle(
260319
fontSize: getFontSize(),
261320
color:
262-
isEnabled ? AppTheme.colors['black']!.shade400 : AppTheme.colors['black']!.shade300,
321+
isEnabled ? labelColor : AppTheme.colors['black']!.shade400 : AppTheme.colors['black']!.shade300,
263322
),
264323
prefixIcon: prefixIcon != null
265324
? InkWell(
@@ -307,7 +366,7 @@ class InputText extends StatelessWidget {
307366
onChanged: onChanged,
308367
style: TextStyle(
309368
fontSize: getFontSize(),
310-
color: AppTheme.colors['black']!.shade400,
369+
color: isEnabled ? inputColor : AppTheme.colors['black']!.shade400,
311370
),
312371
enabled: isEnabled,
313372
autovalidateMode: autoValidateMode,
@@ -317,29 +376,14 @@ class InputText extends StatelessWidget {
317376
);
318377
}
319378
320-
InputBorder getInputBorder(InputBorderType inputBorderType, Color color) {
321-
switch (inputBorderType) {
322-
case InputBorderType.none:
323-
return InputBorder.none;
324-
325-
case InputBorderType.underline:
326-
return UnderlineInputBorder(
327-
borderRadius: BorderRadius.circular(borderRadius),
328-
borderSide: BorderSide(
329-
width: 1,
330-
color: color,
331-
),
332-
);
333-
334-
case InputBorderType.outline:
335-
return OutlineInputBorder(
336-
borderRadius: BorderRadius.circular(borderRadius),
337-
borderSide: BorderSide(
338-
width: 1,
339-
color: color,
340-
),
341-
);
342-
}
379+
OutlineInputBorder border(Color color) {
380+
return OutlineInputBorder(
381+
borderRadius: BorderRadius.circular(borderRadius),
382+
borderSide: BorderSide(
383+
width: borderWidth,
384+
color: color,
385+
),
386+
);
343387
}
344388
345389
double getFontSize() {

0 commit comments

Comments
 (0)