How to decrease the height of Input Text Field in Flutter? - flutter

Question

Well, I am designing something that needs a compact layout. The design that I had made in Figma is what I want but the result I am getting while doing so, that's a bit different. I am not able to attain that level of compactness that I need.
What I designed in Figma:
What I coded in Flutter:
You see, there's an extra amount of space present above the text. I want to remove that text any how. So could anyone please help me in cutting out the extra padding that I don't need.
Here's my code:
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class CardHolderTextField extends StatelessWidget {
const CardHolderTextField({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
width: 175,
height: 55,
child: TextField(
keyboardType: TextInputType.name,
maxLength: 30,
minLines: 1,
textCapitalization: TextCapitalization.characters,
style: GoogleFonts.mavenPro(
fontSize: 10,
color: Colors.white,
textBaseline: TextBaseline.alphabetic,
),
decoration: InputDecoration(
contentPadding: EdgeInsets.all(0),
counter: Text(""),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white,
),
),
disabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white,
),
),
border: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white,
),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white,
),
),
fillColor: Colors.white,
focusColor: Colors.white,
),
),
);
}
}
I tried a lot, playing with the size of the container, but that doesn't work, instead pops out a -ve error.
This happened when I tried to decrease the size of the container to 40:
TextAlignVertical.top() also fails to solve the problem when container size is reduced to 40.
What I guess is it's not the problem of container, it's the problem of Text Field.
Anyways, thanks in advance!

Answer 1

TextField size depends on parent size. In this case, you can tweak the value according to your UI and providing contentPadding from TextFiled>decoration:. How-ever, there could be space-problem depending on fontSize+ etc. I prefer using stack.
I removed Container from your CardHolderTextField
class CardHolderTextField extends StatelessWidget {
const CardHolderTextField({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return TextField(
keyboardType: TextInputType.name,
maxLength: 30,
minLines: 1,
textCapitalization: TextCapitalization.characters,
style: GoogleFonts.mavenPro(
color: Colors.white,
fontSize: 12,
textBaseline: TextBaseline.alphabetic,
),
decoration: InputDecoration(
contentPadding: EdgeInsets.all(0),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white,
),
),
disabledBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white,
),
),
border: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white,
),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.white,
),
),
fillColor: Colors.white,
// filled: true,
focusColor: Colors.white,
),
);
}
}
And use with Stack
SizedBox(
height: 80,
width: 175,
child: Stack(
children: [
Positioned(
top: 0,
left: 0,
child: Text(
"card holder".toUpperCase(),
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: CardHolderTextField(),
),
],
),
)
In this case, the result will be
If you consider removing bottom line border: InputBorder.none and use Divider on Stack, you will get more control over UI.

Answer 2

Container(
width: 100.0,
child: TextField(
style: TextStyle(
fontSize: 40.0,
height: 2.0,
color: Colors.black
)
)
)