This is what I'm trying to make:
In the Flutter docs for Text Fields (https://flutter.io/text-input/) it says you can remove the underline by passing null to the decoration. However, that also gets rid of the hint text.
I do not want any underline whether the text field is focused or not.
UPDATE: updated accepted answer to reflect changes in Flutter SDK as of April 2020.
Do it like this:
TextField(
decoration: new InputDecoration.collapsed(
hintText: 'Username'
),
),
or if you need other stuff like icon, set the border with InputBorder.none
InputDecoration(
border: InputBorder.none,
hintText: 'Username',
),
),
New Flutter SDK since after integration of web and desktop support you need to specify individually like this:
TextFormField(
cursorColor: Colors.black,
keyboardType: inputType,
decoration: InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
contentPadding:
EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
hintText: "Hint here"),
)
Here is a supplemental answer that shows some fuller code:
Container(
decoration: BoxDecoration(
color: Colors.tealAccent,
borderRadius: BorderRadius.circular(32),
),
child: TextField(
decoration: InputDecoration(
hintStyle: TextStyle(fontSize: 17),
hintText: 'Search your trips',
suffixIcon: Icon(Icons.search),
border: InputBorder.none,
contentPadding: EdgeInsets.all(20),
),
),
),
Notes:
The dark background (code not shown) is Colors.teal.
InputDecoration also has a filled and fillColor property, but I couldn't get them to have a corner radius, so I used a container instead.
I found no other answer gives a border radius, you can simply do it like this, no nested Container
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(20),
),
),
);
change the focused border to none
TextField(
decoration: new InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
contentPadding: EdgeInsets.only(left: 15, bottom: 11, top: 11, right: 15),
hintText: 'Subject'
),
),
To make a Borderless TextFormField i found below solution:
It is without using container.
TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(15.0),
borderSide: BorderSide.none,
),
labelText: "Student email/id",
floatingLabelStyle: const TextStyle(
height: 4,
color: Color.fromARGB(255, 160, 26, 179)),
filled: true,
fillColor: Colors.grey[200],
prefixIcon: const Icon(Icons.person),
),
),
Sample Normally:
While having input error:
While user input:
TextField(style: TextStyle(color: Colors.black45,fontSize: 18,decorationThickness: 0.0)). It's showing without underline with decorationThickness:0.0.
Container(
height: 50,
// margin: EdgeInsets.only(top: 20),
decoration: BoxDecoration(
color: Colors.tealAccent,
borderRadius: BorderRadius.circular(32)),
child: TextFormField(
cursorColor: Colors.black,
// keyboardType: TextInputType.,
decoration: InputDecoration(
hintStyle: TextStyle(fontSize: 17),
hintText: 'Search your trips',
suffixIcon: Icon(Icons.search),
border: InputBorder.none,
contentPadding: EdgeInsets.all(18),
),
),
),
Default
Container(
padding: const EdgeInsets.all(20),
child: const TextField(
decoration: InputDecoration(
border: UnderlineInputBorder(), hintText: "Search Your tips"),
),
),
Outline Border
Container(
padding: const EdgeInsets.all(20),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(40),
),
hintText: "Search Your tips",
),
),
),
No Border
Container(
padding: const EdgeInsets.all(20),
child: const TextField(
decoration: InputDecoration(
border: InputBorder.none, hintText: "Search Your tips"),
),
),
Try the following code:
TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(borderSide: BorderSide.none, borderRadius: BorderRadius.circular(30.0)),
hintText: "Search your trips",
hintStyle: const TextStyle(color: Colors.white, fontWeight: FontWeight.w300),
filled: true,
fillColor: Colors.cyan[200],
suffixIcon: IconButton(
onPressed: () {},
icon: const Icon(Icons.search, color: Colors.white),
),
),
),
decoration: InputDecoration(
border:OutLineInputBorder(
borderSide:BorderSide.none
bordeRadius: BordeRadius.circular(20.0)
)
)
To remove underline border: InputBorder.none,
For hint use hintText: 'Hint Text'
TextFormField(
InputDecoration(
border: InputBorder.none,
hintText: 'Hint Text',
),
),
To remove TextField underline in Flutter, you can simply use InputBorder.none.
TextField(
decoration: InputDecoration(
hintText: 'Hint Text',
border: InputBorder.none,
),
)
Related
I have the following issue.
I have a TextFormField where the user has to put some data (for example his email).
I am using a validator , but when the error raises from the TextFormField's validator, the error message and my TextFormField's values are not show properly.
Here is the code:
Container(
height: 60,
margin: EdgeInsets.only(right: 10, left: 10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(10),
),
border: Border.all(
color: const Color(0xFF59C48C),
width: 2.0,
style: BorderStyle.solid),
),
child: Container(
child: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Center(
child: Container(
child: Image.asset("images/email.png",
width: 30, height: 30))),
const SizedBox(
width: 10,
),
Expanded(
child: Center(
child: TextFormField(
validator: (mail) =>
bloc.mailValidator(mail ?? "")
? null
: "Invalid Email",
obscureText: false,
controller: _emailController,
keyboardType:
TextInputType.emailAddress,
style: const TextStyle(
color: Colors.black),
decoration: const InputDecoration(
hintText: "Email",
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
hintStyle: TextStyle(
color: Colors.grey,
fontSize: 20,
),
labelStyle: TextStyle(
color: Colors.black,
fontSize: 20,
),
),
),
),
),
]),
),
),
),
),
I would like to show the error beside the expanded TextFormField or on the border of it like the image below.
Thank you in advance!
Use OutlineInputBorder with label or labelText
decoration: const InputDecoration(
hintText: "Email",
labelText: "Email",
focusedBorder: OutlineInputBorder(),
enabledBorder: OutlineInputBorder(),
errorBorder: OutlineInputBorder(),
disabledBorder: OutlineInputBorder(),
TextFormField(
autovalidateMode: AutovalidateMode.always,
validator: (mail) {
return "Enter dasdasd"; //handle the error text
},
obscureText: false,
keyboardType: TextInputType.emailAddress,
style: const TextStyle(color: Colors.black),
decoration: const InputDecoration(
hintText: "Email",
labelText: "Email",
border: OutlineInputBorder(),
focusedBorder: OutlineInputBorder(),
enabledBorder: OutlineInputBorder(),
errorBorder: OutlineInputBorder(),
disabledBorder: OutlineInputBorder(),
hintStyle: TextStyle(
color: Colors.grey,
fontSize: 20,
),
),
),
I want to change the Color of an textfield in flutter.
Means the area within the InputBorder.
I tried to wrap the textfield in container, and change the color of the container, but this seems a fool's step to solve the problem.
I tried the fillColor option, but nothing changed.
Here is my Code -->
Container(
padding: EdgeInsets.fromLTRB(
10,
screenHeight * 0.016415869,
10,
0,
),
height: screenHeight * 0.082079343,
child: TextField(
cursorColor: Color(0xFF7675E0),
textAlign: TextAlign.left,
decoration: InputDecoration(
fillColor: Colors.black, //Nothing Worked
contentPadding: EdgeInsets.fromLTRB(
15,
screenHeight * 0.002735978,
2,
screenHeight * 0.002735978,
),
hintText: "Search",
hintStyle: GoogleFonts.sniglet(
fontSize: screenHeight * 0.020519836,
color: Color(0xFFC6C8CA),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0),
borderSide: BorderSide(
color: Colors.grey[200].withOpacity(0.2),
),
),
prefixIcon: Icon(Icons.search),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey[200].withOpacity(1),
),
),
),
),
),
Thanks in Advance :)
Try out this:-
decoration: InputDecoration(
filled: true,
fillColor: Colors.grey,
If you want to set the color to your text field then there is one boolean variable which you need to set true so your color will be added to your text field
Container(
child: TextField(
cursorColor: Color(0xFF7675E0),
textAlign: TextAlign.left,
decoration: InputDecoration(
fillColor: Colors.black, // you can change color of textfield
filled: true, // this should be true if you want to set color to textfield
hintText: "Search",
prefixIcon: Icon(Icons.search),
),
),
),
Basically you can leave your code as you provided us. The important missing value is
filled: true
With this value applied you can style the background color easy.
Reference to the doc: https://api.flutter.dev/flutter/material/TextField-class.html
don't use Container for TextField decoration, there are more property into TextField
TextField use
decoration: InputDecoration(
filled: true,
fillColor: Colors.white10,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.all(
new Radius.circular(14.0),
),
),
TextField(
controller: usernameController,
keyboardType: TextInputType.emailAddress,
style: TextStyle(color: Colors.white),
decoration: InputDecoration(
filled: true,
fillColor: Colors.white10,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.all(
new Radius.circular(14.0),
),
),
hintText: 'Username',
hintStyle: TextStyle(color: Colors.white),
contentPadding: const EdgeInsets.all(24),
prefixIcon: Icon(Icons.person, color: Colors.white),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white10),
borderRadius: BorderRadius.circular(14),
),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white10),
borderRadius: BorderRadius.circular(14),
),
),
),
I have a multiline TextField with a prefixIcon, so now the Icon is in the center vertically and hint text is at top left. I want both of them to be aligned, either at the top or in the center vertically.
The code used is
Padding(
padding: const EdgeInsets.symmetric(horizontal: 10.0),
child: TextField(
maxLines: 3,
decoration: InputDecoration(
hintText: 'Bio',
prefixIcon: Icon(Icons.chrome_reader_mode),
fillColor: Colors.grey[200],
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide(),
),
),
),
),
Although in your particular case problem can be solved by adding a newline character (hintText: '\nBio'), a better solution is to use labelText property instead of a hintText. By default label is aligned with the center of the TextField.
TextField(
maxLines: 3,
decoration: InputDecoration(
labelText: 'Bio',
prefixIcon: Icon(Icons.chrome_reader_mode),
fillColor: Colors.grey[200],
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide(),
),
),
),
This is an ugly solution, but it works. Other solutions (e.g., setting the textAlignVertical to TextAlignVertical.center) don't work since the maxLines is not null.
Add a TextStyle to the hintText and set the height of the TextStyle to 2.8. You need to reduce this when the fontSize is bigger because the height will be multiplied by the fontSize to make the line height. I added a contentPadding to make sure the text doesn't overflow(because now the text begins from the center of the TextField).
TextField(
maxLines: 3,
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 30),
hintText: 'Bio',
hintStyle: TextStyle(
height: 2.8,
),
prefixIcon: Icon(Icons.chrome_reader_mode),
fillColor: Colors.grey[200],
filled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide(),
),
),
),
Result:
Widget customTextView(String hint, Icon iconName) {
return Container(
decoration: BoxDecoration(
color: _DarkWhiteColor.withOpacity(0.5),
borderRadius: BorderRadius.circular(5),
),
child: Padding(
padding: const EdgeInsets.only(left: 0, right: 0),
child: TextField(
style: TextStyle(color: Colors.grey),
cursorColor: Colors.grey,
decoration: InputDecoration(
border: InputBorder.none,
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
fillColor: _DarkWhiteColor.withOpacity(0),
filled: true,
hintText: "Enter Your Message",
labelStyle: TextStyle(color: Colors.white),
// suffixIcon: iconName,
prefixIcon: Container(
transform: Matrix4.translationValues(0, -45, 0),
child: iconName,
),
),
maxLines: 6,
),
),
);
}
I am developing a mobile application using Flutter. I am having an issue with aligning the text field's placeholder text and its value vertically centered.
This is my code for TextField.
return Container(
color: Colors.black,
child: Padding(
padding: EdgeInsets.all(10),
child: TextField(
onChanged: (text) {
this.filter = text.toLowerCase();
this._refreshListItems();
},
style: TextStyle(
height: 0.5
),
cursorColor: Colors.black12,
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
prefixIcon: Icon(Icons.search, color: Colors.black26,),
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
hintText: "Search",
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white),
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
),
),
),
)
);
However, when it is rendered, the placeholder and its value are getting a little bit to the top vertically as in the screenshots below.
What's wrong with my code and how can I fix it?
Using text style height to 0.5 is causing the text span to be half of the size of the font size. Remove it as don't think that will help you.
style: TextStyle(
height: 0.5
),
In order to handle content size you can play with contentPadding
decoration: InputDecoration(
contentPadding: EdgeInsets.all(1),
....
),
I used the following code and it is working
contentPadding: EdgeInsets.fromLTRB(0, 8, 0, 0),
if you set a custom height, try this.
Container(
height: 36,
child: TextField(
maxLines: 1,
style: TextStyle(fontSize: 17),
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
filled: true,
prefixIcon:
Icon(Icons.search, color: Theme.of(context).iconTheme.color),
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.all(Radius.circular(30))),
fillColor: Theme.of(context).inputDecorationTheme.fillColor,
contentPadding: EdgeInsets.zero,
hintText: 'Search',
),
),
)
According to my design I have a TextField with 30pt of height.
Here's how I am trying to do that:
Container(
height: 30,
child: new TextField(
textAlign: TextAlign.start,
decoration: new InputDecoration(
prefixIcon: Icon(Icons.search),
border: new OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(30.0),
),
),
filled: true,
hintStyle: new TextStyle(color: Colors.grey[800]),
hintText: "Search",
fillColor: Colors.lightGreen),
)),
And here's the result:
How can I align hint and text vertically?
Set contentPadding to EdgeInsets.symmetric(horizontal: 0) in InputDecoration. This will remove the default horizontal padding for the Text:
Container(
height: 35,
child: TextField(
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(horizontal: 0),
prefixIcon: Icon(Icons.search),
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(5.0),
),
),
filled: true,
hintStyle: TextStyle(color: Colors.grey[800]),
hintText: "Search",
fillColor: Colors.lightGreen),
),
),