So I have a textfield that is positionned in the center of a Container. My problem is the more I decrease the height of my screen the more the text of the textfiled goes out of the boundaries. I wrapped the textfiled with a container and gave it a color and it seems that the textfield is correctly adapting to the changes to fit the container but the Text or the input of the textfiled behaves on its own and goes out of the boundaries the more i adjust the height. Any solution ?
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: height * 0.076823398741207,
width: width * 0.414674703803783,
decoration: BoxDecoration(
color: Color.fromARGB(212, 17, 19, 57),
borderRadius: BorderRadius.circular(20),
),
child: Center(
child: Row(
children: [
Expanded(
child: TextField(
style: TextStyle(
color: Colors.white,
fontSize: width *
0.0103928497193931,
),
decoration: InputDecoration(
filled: true,
fillColor: Colors.red,
constraints: BoxConstraints(
minHeight: 120),
contentPadding:
EdgeInsets.only(
left: width *
0.0166285595510289,
),
border: InputBorder.none,
),
),
),
],
),
),
),
)
I tried a lot of solutions such as wrapping it with a SingleChildScrollView, setting maxlines and minlines but nothing. The only thing that seems to change a little bit the behaviour of the text is setting maxHeight and minheight in the constraints of the InputDecorator of the textfield.
Instead of giving fontSize: width * 0.01...
, try doing like so in your build
(or the context won't be accessible)
final cellHeight = MediaQuery.of(context).size.height / 100;
final cellWidht = MediaQuery.of(context).size.width / 100;
By doing so you create 2 variables that represent 1/100 of your screen width or height (responsive).
You can then multiply your cellHeight
or cellWidth
with the fontSize
you prefer, grating the fontSize
will be responsive.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: cellHeight * 8, <-- EXAMPLE
width: cellWidth * 20, <-- EXAMPLE
decoration: BoxDecoration(
color: Color.fromARGB(212, 17, 19, 57),
borderRadius: BorderRadius.circular(20),
),
....
child: TextField(
style: TextStyle(
color: Colors.white,
fontSize: cellWidth * 7, <-- EXAMPLE
),
decoration: InputDecoration(
filled: true,
....
contentPadding:EdgeInsets.only(
left: 5 * cellWidth, <-- EXAMPLE
),
border: InputBorder.none,
),
),
),
],
),
),
),
)
Let me know if this solve your problem, if not, update your question with more details about what's wrong, happy coding!