How to align text of TextFormField to center, vertical in Flutter? - android

I am new to Flutter Development & tried certain work around but nothing really helped. I want my text to be center vertically in TextFormField in flutter.
textAlign: TextAlign.start brings my text to left but I want them to be center vertically also.
textAlign: TextAlign.center brings my text to center but I want them to be start from left also.
This is what I am getting,
This is what I want,
Snippet of my code:
#override
Widget build(BuildContext context) {
return new Form(
key: _formKey,
child: new SingleChildScrollView(
child: new Theme(
data: new ThemeData(
primaryColor: const Color(0xFF102739),
accentColor: const Color(0xFF102739),
hintColor: const Color(0xFF102739)),
child: new Column(
children: <Widget>[
new TextFormField(
textAlign: TextAlign.center,
maxLines: 1,
autofocus: true,
keyboardType: TextInputType.emailAddress,
style: new TextStyle(
color: const Color(0xFF0f2638),
fontFamily: 'ProximaNova',
fontStyle: FontStyle.italic,
fontSize: 16.0),
decoration: new InputDecoration(
contentPadding: const EdgeInsets.only(
top: 8.0, bottom: 8.0, left: 10.0, right: 10.0),
hintText: "YOUR E-MAIL",
hintStyle: new TextStyle(
color: const Color(0x703D444E),
fontFamily: 'ProximaNova',
fontStyle: FontStyle.italic,
fontSize: 16.0),
border: new UnderlineInputBorder(
borderSide: new BorderSide(
color: const Color(0xFF0f2638), width: 0.2))),
validator: _validateEmail,
),
],
),
)));
}


There is no vertical align option for that. All you need to do is to set contentPadding for positioning:
TextFormField(
decoration: InputDecoration(
contentPadding: EdgeInsets.zero
)
Screenshot


Use the following property:
TextFormField(
textAlignVertical: TextAlignVertical.center,
//Remaining code.
),


The way I did it using "alignment: Alignment.center," for Container with "InputDecoration.collapsed" & ".copyWith(isDense: true)":
Scaffold(
body: Container(
color: Colors.white,
width: double.infinity,
height: double.infinity,
child: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 16.0),
child: Container(
height: 50.0,
alignment: Alignment.center,
color: Colors.greenAccent,
child: TextFormField(
cursorColor: Colors.red,
decoration: InputDecoration.collapsed(
hintText: 'Search',
).copyWith(isDense: true),
),
),
),
),
),
),


So it worked perfecly for me:
TextFormField(
// setting text alignment
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
// decorating and styling your Text
isCollapsed: true,
contentPadding: EdgeInsets.zero,
),
),


TextFormField(
textAlign: TextAlign.center,
)


You can use decoration attribute like this:
decoration: InputDecoration(
isCollapsed: true,
isDense: true,
contentPadding: EdgeInsets.symmetric(horizontal: 5),
),

Related

How to get flutter's textfield trigger?

i want to change my container's border color when the TextField is on focus. Is in Flutter this thing is ilegal? i've tried several way and it color can't be change when TextField is on focus or loss focus.
open it https://i.postimg.cc/767RT4qW/Screenshot-45.png
here's my container and textfield code:
Container(
decoration: BoxDecoration(
border: Border.all(
color: _myFocusNode.hasFocus
? Colors.black38
: Colors.blue,
width: 2,
),
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Padding(
padding: EdgeInsets.symmetric(
horizontal: 10,
),
child: Icon(
Icons.alternate_email_rounded,
color: Colors.black38,
),
),
Flexible(
child: TextField(
focusNode: _myFocusNode,
autofocus: true,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.w500,
),
cursorHeight: 24,
cursorColor: Colors.grey,
decoration: const InputDecoration(
border: InputBorder.none,
suffixIcon: SizedBox(
height: 24,
width: 24,
),
hintText: 'Input your email',
hintStyle: TextStyle(
color: Colors.black38,
),
),
),
),
],
),
),
],
),

Try this:
FocusScope(
child: Focus(
onFocusChange: (focus) => print("focus: $focus"),
child: TextField(
decoration: const InputDecoration(labelText: 'City'),
)
)
)

try this
TextFormField(
decoration: InputDecoration(
labelText: "Name",
fillColor: Colors.white,
focusedBorder:OutlineInputBorder(
borderSide: const BorderSide(color: Colors.red, width: 2.0),
borderRadius: BorderRadius.circular(25.0),
),
),
)

Change text color of CountryCodePicker widget text in Flutter

From this code, I want to display the country code in white color. The color of the code is set as black as default in its dependencies. Can you tell me how to fix this issue?
ClipRect(
child: BackdropFilter(
filter: ui.ImageFilter.blur(sigmaX: 15.0, sigmaY: 15.0),
child: Container(
padding: const EdgeInsets.only(left: 20.0),
child: Form(
key: _formKey,
child: TextFormField(
controller: _controller,
style: const TextStyle(
color: Colors.white,
fontSize: 12,
fontFamily: 'Open Sans',
),
decoration: const InputDecoration(
border: InputBorder.none,
hintText: 'Enter Your phone number',
hintStyle: TextStyle(
fontFamily: 'Open Sans',
fontSize: 12,
color: Color(0x80ffffff),
fontWeight: FontWeight.w700,
),
),
validator: (value) {
if (value!.isEmpty ||
!RegExp(r'^[0-9]{12}').hasMatch(value)) {
return " Enter valid Number";
} else {
return null;
}
}),
),
decoration: BoxDecoration(
color: const Color(0x731d192c),
borderRadius: BorderRadius.circular(3.0),
),
),
),
),
),
Pinned.fromPins(
Pin(size: 55.0, start: 42.0),
Pin(size: 48.0, middle: 0.2349),
child:
// Adobe XD layer: 'Rectangle' (shape)
ClipRect(
child: BackdropFilter(
filter: ui.ImageFilter.blur(sigmaX: 15.0, sigmaY: 15.0),
child: Container(
decoration: BoxDecoration(
color: Color.fromARGB(115, 255, 255, 255),
borderRadius: BorderRadius.circular(3.0),
),
child: CountryCodePicker(
initialSelection: 'US',
showCountryOnly: false,
showOnlyCountryWhenClosed: false,
favorite: ['+1', 'US'],
enabled: true,
hideMainText: false,
showFlagMain: false,
showFlagDialog: true,
padding: EdgeInsets.all(0.5),
),
),
),
),
),
Here's a screenshot of the text of the country code picker form that I made. I want to change the text color of the number at the left side of the picture where it is generating the country code based on the phone number provided at the right side.

According to the Github repo Customization section of the read me documentation of the CountryCodePicker widget package, you have to add textStyle property to change the color. So, do the following:
textStyle: TextStyle(color: Colors.black),
After updating your CountryCodePicker widget will look like this:
child: CountryCodePicker(
textStyle: TextStyle(color: Colors.black), //After update
initialSelection: 'US',
showCountryOnly: false,
showOnlyCountryWhenClosed: false,
favorite: ['+1', 'US'],
enabled: true,
hideMainText: false,
showFlagMain: false,
showFlagDialog: true,
padding: EdgeInsets.all(0.5),
),

You Just need to set the color property of text which is easy
container(
child: Text(
"+376",
style:TextStyle(
color:Colors.white, /// the color property
color:Color(0xff963258), ///if you want to use HEX color
),
),
),
Note:- You can not use both at the same time

how to resolve BOTTOM OVERFLOWED BY 84 PIXLES in Flutter Activity?

I am new to Flutter I have the following activity, when I click in Text Field Keyboard appears and then the warning e.g. BOTTOM OVERFLOWED BY 84 PIXLES also appears how can i be able to resolve this issue? when I tried SingleChildScrollView then empty area("where there is no Widgets") of activity gone white. Is there any Widget that is missing or i made a mistake in my code?
My Activity
here is my code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:marshal/Payment.dart';
import 'bottomnavigationbar.dart';
class Payment2 extends StatefulWidget {
#override
_Payment2State createState() => _Payment2State();
}
class _Payment2State extends State<Payment2> {
#override
Widget build(BuildContext context) {
final PaymentButton = Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(30.0),
color: Colors.red,
child: MaterialButton(
minWidth: MediaQuery.of(context).size.width,
padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
onPressed: () {
Route route = MaterialPageRoute(builder: (context) => Paymentdone());
Navigator.pushReplacement(context, route);
},
child: Text("Payment",
textAlign: TextAlign.center,
style: style.copyWith(
color: Colors.white, fontWeight: FontWeight.w800)),
),
);
return Scaffold(
appBar: AppBar(
title: Text("Payment"),
centerTitle: true,
),
body: Container(
padding: EdgeInsets.all(16),
color: Colors.black,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(25),
),
Text(
"ENTER YOUR CARD DETAILS",
style: TextStyle(
fontWeight: FontWeight.w400,
color: Colors.white,
fontSize: 16),
),
Padding(
padding: EdgeInsets.all(5),
),
Card(
color: Color(0xFF1E1E1E),
child: ListTile(
leading: CircleAvatar(),
title: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"MasterCard",
style: TextStyle(fontSize: 16, color: Colors.white),
),
Text(
'90 \u0024',
style: TextStyle(fontSize: 16, color: Colors.white),
),
],
),
),
),
),
Padding(
padding: EdgeInsets.all(12),
),
Card(
color: Color(0xFF1E1E1E),
child: cardnumber(),
),
Row(
children: [
Container(
//height: 60,
width: MediaQuery.of(context).size.width * 0.45,
color: Color(0xFF1E1E1E),
child: TextField(
style: style,
maxLength: 5,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'MM/YY',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
),
),
Padding(
padding: EdgeInsets.all(1),
),
Container(
// height: 50,
width: MediaQuery.of(context).size.width * 0.44,
color: Color(0xFF1E1E1E),
child: TextField(
style: style,
maxLength: 3,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'CVV',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
),
),
],
),
Container(
height: 100,
),
PaymentButton,
],
),
),
bottomNavigationBar: BottomNavigation(),
);
}
Widget cardnumber() {
return TextField(
style: style,
maxLength: 16,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'XXXX XXXX XXXX 1234',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
);
}
TextStyle style =
TextStyle(fontFamily: 'Montserrat', color: Colors.white, fontSize: 16.0);
}

using a SingleChildScrollView is the right way to go.
in order to fix the issue you talked about, delete the color attribute from the container, and move it to the scaffold background color attribute:
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
title: Text("Payment"),
centerTitle: true,
),
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(16),
child: Column(
// the rest of the widgets...
),
),
);

Simply add resizeToAvoidBottomInset: false to your Scaffold

Also you can wrap the child inside SingleChildScrollView

Use SingleChildScrollView in body. To avoid white portion problem wrap it inside a Stack.
Stack(
children: <Widget>[
Container(
padding: EdgeInsets.all(16),
color: Colors.black,
),
SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Container(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Padding(
padding: EdgeInsets.all(25),
),
Text(
"ENTER YOUR CARD DETAILS",
style: TextStyle(
fontWeight: FontWeight.w400,
color: Colors.white,
fontSize: 16),
),
Padding(
padding: EdgeInsets.all(5),
),
Card(
color: Color(0xFF1E1E1E),
child: ListTile(
leading: CircleAvatar(),
title: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"MasterCard",
style: TextStyle(fontSize: 16, color: Colors.white),
),
Text(
'90 \u0024',
style: TextStyle(fontSize: 16, color: Colors.white),
),
],
),
),
),
),
Padding(
padding: EdgeInsets.all(12),
),
Card(
color: Color(0xFF1E1E1E),
child: cardnumber(),
),
Row(
children: [
Container(
//height: 60,
width: MediaQuery.of(context).size.width * 0.45,
color: Color(0xFF1E1E1E),
child: TextField(
style: style,
maxLength: 5,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'MM/YY',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
),
),
Padding(
padding: EdgeInsets.all(1),
),
Container(
// height: 50,
width: MediaQuery.of(context).size.width * 0.44,
color: Color(0xFF1E1E1E),
child: TextField(
style: style,
maxLength: 3,
cursorColor: Colors.red,
textAlign: TextAlign.left,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'CVV',
hintStyle: TextStyle(fontSize: 16, color: Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8),
borderSide: BorderSide(
width: 0,
style: BorderStyle.none,
),
),
filled: true,
contentPadding: EdgeInsets.all(16),
),
),
),
],
),
Container(
height: 100,
),
PaymentButton,
],
),
),
)
],
)

How I do the TextFormField in flutter? Like this

Don't worry about the icon, but the important is the label inside outline border when the TextFormField is focused.
I didn't want it like that:

If I understood your question, you want something like this:
In that case you achieve this by using Container with decoration and a Column that has Text and of course TextFromField, like so:
Container(
padding: EdgeInsets.all(8),
decoration: new BoxDecoration(
border: new Border.all(
color: Colors.black,
width: 1.0,
style: BorderStyle.solid
),
borderRadius: BorderRadius.circular(8.0),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text("Label", style: TextStyle(color: Colors.black54),),
TextFormField(
decoration: const InputDecoration(
suffixIcon: Icon(Icons.remove_red_eye),
hintText: "Input text",
// if you want to remove bottom border that changes color when field gains focus
// then uncomment the line bellow
// border: InputBorder.none,
)
)
]
)
)
Not the shortest solution... but it gets the job done.

You can use like this:
Form(
key: _formKey,
child: ListView(
//physics: const NeverScrollableScrollPhysics(),
children: <Widget>[
Center(
child: Text(
'Token',
style: TextStyle(fontSize: 36, fontWeight: FontWeight.w300),
),
),
Container(
height: 40,
),
TextFormField(
style: textStyle,
controller: authControllername,
// ignore: missing_return
validator: (String value) {
if (value.isEmpty) {
return 'Please enter name';
}
},
decoration: InputDecoration(
labelText: 'Name',
hintText: 'Enter name',
labelStyle: textStyle,
errorStyle: TextStyle(color: Colors.red, fontSize: 14.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0))),
),
Container(
height: 20,
),
TextFormField(
style: textStyle,
controller: authController,
validator: (String value) {
if (value.isEmpty) {
return 'Please enter OAuth token';
}
},
decoration: InputDecoration(
labelText: 'OAuth token',
hintText: 'Enter OAuth token',
labelStyle: textStyle,
errorStyle: TextStyle(color: Colors.red, fontSize: 14.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5.0))),
),
],
),
),

Flutter increase height of TextFormField

I am creating a Flutter app. i made the design like this.
My TextFormField form field for email and password heights are small. I want it to be the same size of the button.
final email = TextFormField(
keyboardType: TextInputType.emailAddress,
autofocus: false,
initialValue: 'sathyabaman#gmail.com',
style: new TextStyle(fontWeight: FontWeight.normal, color: Colors.white),
decoration: InputDecoration(
hintText: 'Email',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0)
),
),
);
Whats the syntax for the height in text form field.

Just adjust the contentPadding in InputDecoration.
final email = TextFormField(
keyboardType: TextInputType.emailAddress,
autofocus: false,
initialValue: 'sathyabaman#gmail.com',
style: new TextStyle(fontWeight: FontWeight.normal, color: Colors.white),
decoration: InputDecoration(
hintText: 'Email',
contentPadding: const EdgeInsets.symmetric(vertical: 25.0, horizontal: 10.0),
border: OutlineInputBorder(borderRadius: BorderRadius.circular(32.0)),
),
);

You can change the height by changing the minLines value just try this
TextFormField(
keyboardType: TextInputType.multiline,
controller: _opTextController,
decoration: InputDecoration(
isDense: true,
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black)
)
),
maxLines: 5,
minLines: 3,
// controller: cpfcontroller,
)

Use these two lines to control TextFormField Height inside InputDecoration .
isDense: true,
contentPadding: EdgeInsets.fromLTRB(10, 10, 10, 0),
Full example
Material(
elevation: 4,
shadowColor: Colors.blue,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
child: Padding(
padding: const EdgeInsets.only(left: 12),
child: TextFormField(
controller: searchProvider.searchController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
hintText: 'hintText',
isDense: true, // important line
contentPadding: EdgeInsets.fromLTRB(10, 10, 10, 0),// control your hints text size
hintStyle: TextStyle(letterSpacing: 2, color: Colors.black54, fontWeight: FontWeight.bold),
fillColor: Colors.white30 ,
filled: true,
border: OutlineInputBorder(borderRadius: BorderRadius.circular(30), borderSide: BorderSide.none)),
),
),
),

Set the expands attribute on TextFormField to be true then put TextFormField into a SizedBox with a height
SizedBox(
height: 40.0,
child: TextFormField(
keyboardType: TextInputType.emailAddress,
autofocus: false,
expands: true, // Setting this attribute to true does the trick
initialValue: 'sathyabaman#gmail.com',
style: TextStyle(fontWeight: FontWeight.normal, color: Colors.white),
decoration: InputDecoration(
hintText: 'Email',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(32.0)
),
),
),
)

You can user this code to customized your TextFormField
new SizedBox(
width: 200.0,
height: 300.0,
child: const Card(child: const Text('Hello World!')),
)

There's another alternative to adding extra, permanent padding to cover the errorText — which would probably mess up many designer's original project.
You could create a modified version of the source's TextFormField.
To achieve just that, you can:
Copy-paste all of the content in the source's TextFormField.
Rename your custom TextFormField just so you avoid naming conflicts with the original.
You should probably also rename the internal state class.
In VS Code, you can use Ctrl + H to replace TextFormField for, say, TextFormFieldWithErrorTextOption.
Add another parameter to the TextFormField's constructor (below this line), say, errorTextPresent:
// `true` is the current implicit default, i.e., showing the `errorText`
bool errorTextPresent = true
Change the decoration's initialization for the internal TextField:
From:
decoration: effectiveDecoration.copyWith(field.errorText)
To:
decoration: effectiveDecoration.copyWith(
errorText: errorTextPresent ? field.errorText : null)
Then, you can use your new TextFormField similarly to how you use any TextFormField:
TextFormFieldWithErrorTextOption(
errorTextPresent: false, // `false` will disable the `errorText`
...
),

Screenshot:
Code:
You need to use a SizedBox and TextField.maxLines property.
#override
Widget build(BuildContext context) {
final height = 100.0;
return Scaffold(
body: SizedBox( // <--- SizedBox
height: height,
child: TextField(
cursorColor: Colors.red,
maxLines: height ~/ 20, // <--- maxLines
decoration: InputDecoration(
filled: true,
hintText: 'Hint text',
fillColor: Colors.grey,
),
),
),
);
}

just add a Container. Adjust the height of the Container as per Your requirement and make textformfield the child of the container.

If anyone's searching for a different solution to change its height, besides changing the Theme. You can use the decoration's constraints parameter:
decoration: const InputDecoration(
constraints: BoxConstraints(maxHeight: 50, minHeight: 50),
labelText: "Your Label")

Use a TextField or a TextFormField, add this parameters, maxLines. See code below:
final inputBorder =
OutlineInputBorder(borderSide: Divider.createBorderSide(context));
TextFormField(
controller: _myController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
constraints: const BoxConstraints.expand(
height: 300, width: 400
),
hintText: 'What is Your Question?',
border: inputBorder,
focusedBorder: inputBorder,
enabledBorder: inputBorder,
filled: true,
contentPadding: const EdgeInsets.all(8),
),
maxLength: 250,
maxLines: 50,
),

Expanded(
child: TextFormField(
controller: emailAddressController,
obscureText: false,
decoration: InputDecoration(
labelText: 'Email Address',
labelStyle: TextStyle(
fontFamily: 'Lexend Deca',
color: Color(0xFF95A1AC),
fontSize: 14,
fontWeight: FontWeight.normal,
),
hintText: ' Enter your email here ...',
hintStyle: TextStyle(
fontFamily: 'Lexend Deca ',
color: Color(0xFF95A1AC),
fontSize: 14,
fontWeight: FontWeight.normal,
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFDBE2E7),
width: 2,
),
borderRadius: BorderRadius.circular(8),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Color(0xFFDBE2E7),
width: 2,
),
borderRadius: BorderRadius.circular(8),
),
filled: true,
fillColor: Colors.white,
contentPadding:
EdgeInsetsDirectional.fromSTEB(
10, 10, 0, 10),
),
style: TextStyle(
fontFamily: ' Lexend Deca',
color: Color(0xFF2B343A),
fontSize: 14,
fontWeight: FontWeight.normal,
),
),
)

Categories

Resources