'Flutter - TextFormField expand not working properly
I'm trying to create my own TextFieldForm to use in my app by specific design and I have some troubles in order to expand it if it's the case.
Currently, it looks like this:
But this is how it actually should look like:
So far as I understood, in order to do this, I should set the expands parameter to TRUE and maxLines with minLines to NULL.
which should looks something like this:
expands: this.expand,
minLines: this.expand ? null : 1,
maxLines: this.expand ? null : 1,
The problem is that I'm getting an interesting error:
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during performLayout():
BoxConstraints forces an infinite height.
These invalid constraints were provided to RenderCustomPaint's layout() function by the following
function, which probably computed the invalid constraints in question:
_RenderDecoration.performLayout (package:flutter/src/material/input_decorator.dart:1298:17)
The offending constraints were:
BoxConstraints(w=289.8, h=Infinity)
My CODE for custom text form filed:
class CustomTextField extends StatelessWidget {
final String text;
final String helperText;
final double primaryFontSize;
final double secondaryFontSize;
final bool isPassword;
final String Function(String) validator;
final TextInputType keyboardType;
final bool expand;
String capitalize(String s) => s[0].toUpperCase() + s.substring(1);
const CustomTextField({
@required this.text,
this.primaryFontSize = 20,
this.secondaryFontSize = 16,
this.isPassword = false,
this.validator,
this.keyboardType = TextInputType.text,
this.helperText,
this.expand = false,
});
@override
Widget build(BuildContext context) {
String _helperText = this.helperText ?? this.text;
return Column(children: [
TextFormField(
expands: this.expand,
minLines: this.expand ? null : 1,
maxLines: this.expand ? null : 1,
keyboardType: keyboardType,
validator: validator,
obscureText: isPassword,
decoration: InputDecoration(
errorStyle: TextStyle(
fontSize: secondaryFontSize, fontWeight: FontWeight.bold),
border: InputBorder.none,
hintText: capitalize(text),
hintStyle: TextStyle(color: AppColor.fontColor),
),
style: new TextStyle(
fontSize: primaryFontSize,
color: AppColor.fontColor,
fontWeight: FontWeight.bold),
),
Row(
children: [
Expanded(
flex: 1,
child: Divider(
color: AppColor.grayOutFontColor,
thickness: 2,
)),
SizedBox(width: 10),
Text(
_helperText,
style: new TextStyle(
fontSize: secondaryFontSize,
color: AppColor.grayOutFontColor,
fontWeight: FontWeight.bold),
),
SizedBox(width: 10),
Expanded(
flex: 9,
child: Divider(color: AppColor.grayOutFontColor, thickness: 2)),
],
mainAxisAlignment: MainAxisAlignment.start,
)
]);
}
}
The USED of custom text form field:
CustomTextField(
expand: true,
text:
"British chef, restaurateur, write, television, personality, food city, and former footballer."
"Born in Johnston, Scotland.",
primaryFontSize: correctPrimaryFontSize * 0.8,
secondaryFontSize: correctSecondaryFontSize,
helperText: "about you",
keyboardType: TextInputType.multiline,
),
Can any of you explain to my what I did wrong? Or I didn't understand what expands it's doing?
Solution 1:[1]
Add the line inside TextField:
maxLines: null,
Solution 2:[2]
Set maxLines property to null.
import 'package:flutter/material.dart';
class CustomTextField extends StatelessWidget {
final String text;
final String helperText;
final double primaryFontSize;
final double secondaryFontSize;
final bool isPassword;
final String Function(String) validator;
final TextInputType keyboardType;
String capitalize(String s) => s[0].toUpperCase() + s.substring(1);
const CustomTextField({
@required this.text,
this.primaryFontSize = 20,
this.secondaryFontSize = 16,
this.isPassword = false,
this.validator,
this.keyboardType = TextInputType.text,
this.helperText
});
@override
Widget build(BuildContext context) {
String _helperText = this.helperText ?? this.text;
return Column(children: [
TextFormField(
minLines: null,
maxLines: null,
keyboardType: keyboardType,
validator: validator,
obscureText: isPassword,
decoration: InputDecoration(
errorStyle: TextStyle(
fontSize: secondaryFontSize, fontWeight: FontWeight.bold),
border: InputBorder.none,
hintText: capitalize(text),
hintStyle: TextStyle(color: Colors.green),
),
style: new TextStyle(
fontSize: primaryFontSize,
color: Colors.green,
fontWeight: FontWeight.bold),
),
Row(
children: [
Expanded(
flex: 1,
child: Divider(
color: Colors.grey,
thickness: 2,
)),
SizedBox(width: 10),
Text(
_helperText,
style: new TextStyle(
fontSize: secondaryFontSize,
color: Colors.grey,
fontWeight: FontWeight.bold),
),
SizedBox(width: 10),
Expanded(
flex: 9,
child: Divider(color: Colors.grey, thickness: 2)),
],
mainAxisAlignment: MainAxisAlignment.start,
)
]);
}
}
Use the custom text field like this:
CustomTextField(
text: "",
helperText: "about you",
keyboardType: TextInputType.multiline,
),
Solution 3:[3]
I found the answer to my question by adding a parameter called "expand" and I'm checking if that parameter is going to be true or not I will do
minLines: null,
maxLines: !this.expand ? 1 : null,
maxLength: !this.expand ? null : 200,
the full code been:
import 'package:flutter/material.dart';
import 'package:FlutterApp_V2/apps_color/apps_color.dart';
class CustomTextField extends StatelessWidget {
final String text;
final String helperText;
final double primaryFontSize;
final double secondaryFontSize;
final bool isPassword;
final String Function(String) validator;
final TextInputType keyboardType;
final bool expand;
String capitalize(String s) => s[0].toUpperCase() + s.substring(1);
const CustomTextField({
@required this.text,
this.primaryFontSize = 20,
this.secondaryFontSize = 16,
this.isPassword = false,
this.validator,
this.keyboardType = TextInputType.text,
this.helperText,
this.expand = false,
});
@override
Widget build(BuildContext context) {
String _helperText = this.helperText ?? this.text;
return Column(children: [
TextFormField(
minLines: null,
maxLines: !this.expand ? 1 : null,
maxLength: !this.expand ? null : 200,
keyboardType: keyboardType,
validator: validator,
obscureText: isPassword,
decoration: InputDecoration(
errorStyle: TextStyle(
fontSize: secondaryFontSize, fontWeight: FontWeight.bold),
border: InputBorder.none,
hintText: capitalize(text),
hintStyle: TextStyle(color: AppColor.fontColor),
),
style: new TextStyle(
fontSize: primaryFontSize,
color: AppColor.fontColor,
fontWeight: FontWeight.bold),
),
Row(
children: [
Expanded(
flex: 1,
child: Divider(
color: AppColor.grayOutFontColor,
thickness: 2,
)),
SizedBox(width: 10),
Text(
_helperText,
style: new TextStyle(
fontSize: secondaryFontSize,
color: AppColor.grayOutFontColor,
fontWeight: FontWeight.bold),
),
SizedBox(width: 10),
Expanded(
flex: 9,
child: Divider(color: AppColor.grayOutFontColor, thickness: 2)),
],
mainAxisAlignment: MainAxisAlignment.start,
)
]);
}
}
Solution 4:[4]
just assign
maxLines:null,
expands:true
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | |
| Solution 3 | Mircea |
| Solution 4 |