How to change the position of the text in the textformfield? - flutter

This is the design I want:
This is my current design:
I am new to using flutter. I want to ask for an opinion on how to make text in the textformfield at what position according to the design I want. I try to use contentPadding: EdgeInsets.symmetric(vertical: 40), and height in textformfield style but still can't solve my problem. Please advise from stack overflow.
This is my code:
Container(
width: double.infinity,
margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
border: Border.all(
color: Colors.transparent,
width: 1.0,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30,
child: Text(
'Important patient note',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16),
),
),
SizedBox(
width: 950,
child: TextFormField(
textAlign: TextAlign.start,
style: const TextStyle(color: Colors.black),
controller: importantNotes,
onSaved: (String? value) {
importantNotes.text = value!;
},
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(70.0),
border: OutlineInputBorder(),
hintText: 'Important patient note',
hintStyle: TextStyle(
color: Colors.black, fontSize: 16,),
),
),
)
],
))

Just remove contentPadding: EdgeInsets.all(70.0),
SizedBox(
width: 950,
child: TextFormField(
textAlign: TextAlign.start,
maxLines : 5, // add this
style: const TextStyle(color: Colors.black),
controller: importantNotes,
onSaved: (String? value) {
importantNotes.text = value!;
},
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(70.0), // remove or set it to 0
border: OutlineInputBorder(),
hintText: 'Important patient note',
hintStyle: TextStyle(
color: Colors.black, fontSize: 16,),
),
)),

try this one
Widget textfield(
String hint, TextEditingController _controller, bool obsecurtext) {
return Container(
width: MediaQuery.of(context).size.width - 70,
height: 60,
child: TextFormField(
obscureText: obsecurtext,
controller: _controller,
decoration: InputDecoration(
labelStyle: TextStyle(fontSize: 15),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(21),
borderSide:
BorderSide(width: 1, color: Color.fromARGB(255, 226, 135, 230)),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(21),
borderSide:
BorderSide(width: 1, color: Color.fromARGB(255, 231, 127, 127)),
),
hintText: hint,
),
),
);
}
usage textfield("Email", _email, false)

Related

Flutter - how to vertically align text input within a container?

I am trying to add a search input control to the app header in my Flutter web app.
See...
Widget _buildSearchControl() {
return Container(
alignment: Alignment.centerLeft,
color: Colors.white,
padding: EdgeInsets.only(right: 20),
margin: EdgeInsets.all(10),
width: 300,
child: TextField(
style: TextStyle(backgroundColor: Colors.white, color: Colors.black),
decoration: InputDecoration(
prefixIcon: const Icon(Icons.search,color: Colors.black,),
suffixIcon: IconButton(
icon: const Icon(Icons.clear,color: Colors.black,),
onPressed: () {
/* Clear the search field */
},
),
hintText: 'Search...',
border: InputBorder.none),
),
);
}
However, when entering the text, the characters are not vertically centre aligned as I wpuld expect
Is there a way I can have the characters input to the TextField control vertically centered so that they line up with the icons?
Have you tried this textAlignVertical property?
TextField(
textAlignVertical: TextAlignVertical.center,
....
),
I wrap the Container with Padding.
And add contentPadding: const EdgeInsets.all(5), to InputDecoration
...
Padding(
padding: const EdgeInsets.all(8.0).copyWith(bottom: 0),
child: Container(
decoration: BoxDecoration(
border: Border.all(color: Theme.of(context).primaryColor, width: 2),
borderRadius: const BorderRadius.all(Radius.circular(10)),
color: Colors.white
),
child: TextFormField(
controller: _controller,
onChanged: (string) {},
style: TextStyle(color: Theme.of(context).primaryColor),
cursorColor: Theme.of(context).primaryColor,
decoration: InputDecoration(
contentPadding: const EdgeInsets.all(5),
enabledBorder: InputBorder.none,
focusedBorder: InputBorder.none,
labelText: 'Enter',
labelStyle: TextStyle(
color: Theme.of(context).primaryColor,
fontSize: 16,
fontWeight: FontWeight.w500),
prefixIcon: Icon(
Icons.document_scanner_sharp,
color: Theme.of(context).primaryColor,
),
suffixIcon: Padding(
padding: const EdgeInsets.only(top: 5.0),
child: IconButton(
alignment: Alignment.topLeft,
icon: const Icon(
Icons.clear,
size: 25,
color: Colors.red,
),
tooltip: 'Clear',
onPressed: () {
FocusScope.of(context).unfocus();
_controller.clear();
}
),
)
)
),
),
),
Use this , maybe it depends on your contentPadding
Container(
width: 300,
height: 56,
margin: EdgeInsets.fromLTRB(0, 0, 0, 20),
child: TextFormField(
key: widget.globalKey,
autocorrect: false,
onTap: widget.onClick,
minLines: widget.minLines,
maxLines: widget.maxLines,
textInputAction: TextInputAction.done,
onChanged: (val) => widget.onChangeValue(val),
style: getInputStyle,
initialValue: widget.initialValue,
textAlign: TextAlign.left,
autovalidateMode: AutovalidateMode.onUserInteraction,
controller: widget.controller,
keyboardAppearance: Brightness.dark,
decoration: InputDecoration(
contentPadding: REdgeInsets.fromLTRB(
14, 16, 0, 16),
labelText: widget.labelText,
hintText: widget.hintText,
floatingLabelBehavior: FloatingLabelBehavior.auto,
labelStyle: getLabelStyle,
hintStyle: getLabelStyle,
fillColor: widget.backGroundColor ,
filled: true,
prefix: widget.prefix,
),
),
)

how to create separate box for each category in flutter

I am creating a employee bio data page, for this i have 4 to 5 categories e.g. Personal data, family info, skills, employee history.
my output should be like this
for all categories, how i can create it in flutter.
i have done this
and want to convert it to like above design.
---------------EDITED QUESTION--------------------------------
I did the below code but it is not meeting my requirement.
Padding(padding: EdgeInsets.fromLTRB(15, 5,50, 0),
child:Container(decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent,width: 100)
),
child:Padding(padding: EdgeInsets.fromLTRB(15, 5,50, 0),
child: TextField(
decoration: InputDecoration(border: InputBorder.none),
),
))
here is its output
please help if anyone know the name of widget or how to create it.
You can get this layout by using Stack, Containers and Column
Stack(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(
vertical: 20, horizontal: 20),
decoration: BoxDecoration(
border: Border.all(color: Colors.black, width: 2),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
TextFormField(
controller: _addressController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
hintText: "Enter Address",
prefixIcon: Icon(
Icons.home,
color: Colors.grey,
),
hintStyle: TextStyle(
fontStyle: FontStyle.normal,
fontSize: 13,
color: Colors.grey),
enabledBorder: new OutlineInputBorder(
borderSide: new BorderSide(
color: Colors.black, width: 3),
),
focusedBorder: new OutlineInputBorder(
borderSide: new BorderSide(
color: Colors.black, width: 3),
),
),
),
SizedBox(
height: 10,
),
TextFormField(
controller: _addressController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
hintText: "Enter Address",
prefixIcon: Icon(
Icons.home,
color: Colors.grey,
),
hintStyle: TextStyle(
fontStyle: FontStyle.normal,
fontSize: 13,
color: Colors.grey),
enabledBorder: new OutlineInputBorder(
borderSide: new BorderSide(
color: Colors.black, width: 3),
),
focusedBorder: new OutlineInputBorder(
borderSide: new BorderSide(
color: Colors.black, width: 3),
),
),
),
SizedBox(
height: 10,
),
TextFormField(
controller: _addressController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
hintText: "Enter Address",
prefixIcon: Icon(
Icons.home,
color: Colors.grey,
),
hintStyle: TextStyle(
fontStyle: FontStyle.normal,
fontSize: 13,
color: Colors.grey),
enabledBorder: new OutlineInputBorder(
borderSide: new BorderSide(
color: Colors.black, width: 3),
),
focusedBorder: new OutlineInputBorder(
borderSide: new BorderSide(
color: Colors.black, width: 3),
),
),
),
SizedBox(
height: 10,
),
TextFormField(
controller: _addressController,
keyboardType: TextInputType.text,
decoration: InputDecoration(
hintText: "Enter Address",
prefixIcon: Icon(
Icons.home,
color: Colors.grey,
),
hintStyle: TextStyle(
fontStyle: FontStyle.normal,
fontSize: 13,
color: Colors.grey),
enabledBorder: new OutlineInputBorder(
borderSide: new BorderSide(
color: Colors.black, width: 3),
),
focusedBorder: new OutlineInputBorder(
borderSide: new BorderSide(
color: Colors.black, width: 3),
),
),
),
SizedBox(
height: 10,
),
TextButton(
onPressed: () {},
child: Text(
'Submit',
style: TextStyle(
fontSize: 13,
),
),
style: ButtonStyle(
side: MaterialStateProperty.all(
BorderSide(
width: 2, color: Colors.black),
),
foregroundColor:
MaterialStateProperty.all(
Colors.black),
padding: MaterialStateProperty.all(
EdgeInsets.symmetric(
vertical: 2, horizontal: 30)),
textStyle: MaterialStateProperty.all(
TextStyle(fontSize: 30),
),
),
),
],
),
),
),
Positioned(
left: 30,
top: 10,
child: Container(
padding: EdgeInsets.symmetric(
horizontal: 3,
vertical: 2,
),
color: Colors.white,
child: Text(
'Personal Data',
style: TextStyle(
color: Colors.black, fontSize: 12),
),
),
),
],
),
bro take a container giver border to container like this
decoration: BoxDecoration(
border: Border.all(color: Colors.blueAccent)
),
after that take inputfield and make this field border none like this
borde:InputBorder.none
so you can easily do that by this way

Flutter Sign Up Page Where First and Last Name are Next To Each Other

I currently am creating a sign up page for an app and want my layout to be different. I currently have fields for First Name, Last Name, Email address, Password, and Confirm Password. I need to add another field below the Name fields so I want to move Last Name up next to First Name.
I want to lay out my app similar to this:
Desired sign up layout
But my App is currently looking like this:
current signup layout
The code below shows how I sloppily ended up with my current layout.
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: EdgeInsets.all(30),
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomCenter,
colors: [Color(0xFF6cc5de), Colors.white]),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
//mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 200.0,
child: Image.asset('assets/carebloomlogo.png'),
),
Container(
height: 50,
child: Text(
'C A R E • B L O O M',
style: GoogleFonts.raleway(
fontWeight: FontWeight.bold,
fontSize: 35,
textStyle: TextStyle(
color: Color(0xFF3E8094),
)),
textAlign: TextAlign.center,
),
),
Container(
height: 85,
child: TextFormField(
obscureText: true,
focusNode: FNMFocusNode,
cursorColor: Color(0xFF3E8094),
decoration: InputDecoration(
labelText: "First Name",
labelStyle: TextStyle(
color: FNMFocusNode.hasFocus
? Colors.black
: Color(0xFF3E8094)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xFF3E8094)))),
onChanged: (input) => _firstname = input,
),
),
Container(
height: 85,
child: TextFormField(
obscureText: true,
focusNode: LNMFocusNode,
cursorColor: Color(0xFF3E8094),
decoration: InputDecoration(
labelText: "Last Name",
labelStyle: TextStyle(
color: LNMFocusNode.hasFocus
? Colors.black
: Color(0xFF3E8094)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xFF3E8094)))),
onChanged: (input) => _lastname = input,
),
),
Container(
height: 85,
child: TextFormField(
obscureText: true,
focusNode: EmailFocusNode,
cursorColor: Color(0xFF3E8094),
decoration: InputDecoration(
labelText: "Email",
labelStyle: TextStyle(
color: EmailFocusNode.hasFocus
? Colors.black
: Color(0xFF3E8094)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xFF3E8094)))),
onChanged: (input) => _email = input,
),
),
Container(
height: 85,
child: TextFormField(
obscureText: true,
focusNode: PassFocusNode,
cursorColor: Color(0xFF3E8094),
decoration: InputDecoration(
labelText: "Enter Password",
labelStyle: TextStyle(
color: PassFocusNode.hasFocus
? Colors.black
: Color(0xFF3E8094)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xFF3E8094)))),
onChanged: (input) => _email = input,
),
),
Container(
height: 85,
child: TextFormField(
obscureText: true,
focusNode: RePassFocusNode,
cursorColor: Color(0xFF3E8094),
decoration: InputDecoration(
labelText: "Re-Enter Password",
labelStyle: TextStyle(
color: RePassFocusNode.hasFocus
? Colors.black
: Color(0xFF3E8094)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xFF3E8094)))),
onChanged: (input) => _email = input,
),
),
Container(
width: 300,
height: 60,
child: new ElevatedButton(
child: Text('New User? Sign Up!'),
style: ElevatedButton.styleFrom(
primary: Color(0xFF3E8094),
onPrimary: Colors.white,
shadowColor: Color(0xFF6cc5de),
elevation: 5,
padding: EdgeInsets.fromLTRB(5, 5, 5, 5),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
side: BorderSide(color: Color(0xFF6CC5DE))),
),
onPressed: () {},
),
),
// ElevatedButton(
// onPressed: _launchURL,
// child: Text('No Account? Sign Up!'),
// style: ElevatedButton.styleFrom(primary: Color(0xFF3E8094)),
// ),
//loginMethod: auth.anonLogin)
],
),
),
);
}
}
I have tried switching between, rows and columns, throwing rows in columns, trying a grid (probably incorrectly), but nothing is getting me where I want to be.
Needs to be a column with 4 elements: a row that has two fields (first and last), then a field for email, then a field for password, then a field for confirm. I think the only thing you're missing is starting with Row() as the first of the children: of the outer Column().

Add Dropdown menu to TextField Flutter

I have form where I collect data from client in flutter.
At the last 3 fields I want add dropdown menu with different choice to be done by the customers.
But I cant find how to add dropdown menu choice to the form flutter.
this is the screen shot:
enter image description here
the part of the code interested is:
padding: const EdgeInsets.all(10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 193,
child: TextField(
keyboardType: TextInputType.number,
style: TextStyle(color: Colors.black,fontSize: 14),
decoration: InputDecoration(
labelText: '',
prefixIcon: Icon(Icons.arrow_drop_down,color: Color(0xFF1f2032),size: 17,),
hintStyle: TextStyle(color: Colors.grey),
hintText: '',
contentPadding:
EdgeInsets.symmetric(vertical: 5, horizontal: 35.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey, width: 0.3),
borderRadius: BorderRadius.circular(5),
),
),
),
),
SizedBox(width: 10,),
Container(
width: 193,
child: TextField(
keyboardType: TextInputType.number,
style: TextStyle(color: Colors.black,fontSize: 14),
decoration: InputDecoration(
labelText: '',
prefixIcon: Icon(Icons.arrow_drop_down,color: Color(0xFF1f2032),size: 17,),
hintStyle: TextStyle(color: Colors.grey),
hintText: '',
contentPadding:
EdgeInsets.symmetric(vertical: 5, horizontal: 35.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey, width: 0.3),
borderRadius: BorderRadius.circular(5),
),
),
),
),
SizedBox(width: 10,),
Container(
width: 193,
child: TextField(
keyboardType: TextInputType.number,
style: TextStyle(color: Colors.black,fontSize: 14),
decoration: InputDecoration(
labelText: '',
prefixIcon: Icon(Icons.arrow_drop_down,color: Color(0xFF1f2032),size: 17,),
hintStyle: TextStyle(color: Colors.grey),
hintText: '',
contentPadding:
EdgeInsets.symmetric(vertical: 5, horizontal: 35.0),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey, width: 0.3),
borderRadius: BorderRadius.circular(5),
),
),
),
),
],
),
), ```

A RenderFlex overflowed by 147 pixels on the bottom

Here is the screenshot of the app I am trying to build.
The Date of birth field should show a calendar on click of it. Suppose I am in the email textformfield and the keyboard is open and now the user moves to date of birth field. As soon as user taps on date of birth field, I am removing the keyboard and showing the calendar, at that time I am getting exception saying A RenderFlex overflowed by 147 pixels on the bottom.
I have already gone through a bunch of stack questions on this and it mentioned to use a ListView, which I am using. Here is a snippet of my code.
return Scaffold(
body: Column(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.fromLTRB(20.0, 8.0, 40.0, 8.0),
child: InkWell(
onTap: () {
FocusScope.of(context).requestFocus(FocusNode());
},
child: ListView(
children: <Widget>[
Image.asset(
"images/alphaurbanelogo.png",
width: 150.0,
height: 150.0,
),
Text("Sign Up",
style: TextStyle(
color: Colors.black,
fontFamily: "aktivgroteskBold",
fontSize: 25.0)),
SizedBox(
height: 5.0,
),
Text("Create an account to access\n TAUP system",
style: TextStyle(
color: Colors.black,
fontFamily: "aktivgroteskLight",
fontSize: 15.0)),
SizedBox(
height: 10.0,
),
TextFormField(
style: TextStyle(color: Color(0xFF5c2a7c)),
decoration: InputDecoration(
hintText: "First Name",
hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
),
SizedBox(
height: 10.0,
),
TextFormField(
style: TextStyle(color: Color(0xFF5c2a7c)),
decoration: InputDecoration(
hintText: "Last Name",
hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
),
SizedBox(
height: 10.0,
),
TextFormField(
style: TextStyle(color: Color(0xFF5c2a7c)),
decoration: InputDecoration(
hintText: "Email",
hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
),
SizedBox(
height: 10.0,
),
InkWell(
onTap: () {
FocusScope.of(context).requestFocus(FocusNode());
_selectDate(context);
},
child: Row(
children: <Widget>[
Flexible(
child: TextFormField(
style: TextStyle(
color: Color(0xFF5c2a7c), height: 2.0),
enabled: false,
controller: dobController,
decoration: InputDecoration.collapsed(
hintText: "Date of Birth",
hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
)),
),
Icon(
Icons.email,
color: Color(0xFF5c2a7c),
),
],
),
),
Divider(
color: Color(0xFF5c2a7c),
height: 5.0,
),
SizedBox(
height: 10.0,
),
TextFormField(
style: TextStyle(color: Color(0xFF5c2a7c)),
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: "Contact Number",
hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
),
SizedBox(
height: 10.0,
),
TextFormField(
style: TextStyle(color: Color(0xFF5c2a7c)),
decoration: InputDecoration(
hintText: "Parent Email",
hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
),
SizedBox(
height: 10.0,
),
TextFormField(
style: TextStyle(color: Color(0xFF5c2a7c)),
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: "Parent Contact Number",
hintStyle: TextStyle(color: Color(0xFF5c2a7c)),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Color(0xFF5c2a7c)))),
),
SizedBox(
height: 10.0,
),
DropdownButton<String>(
items: _schools.map((String dropDownStringItem) {
return DropdownMenuItem<String>(
value: dropDownStringItem,
child: Text(dropDownStringItem),
);
}).toList(),
hint: Text("School/Institution"),
onChanged: (String newValueSelected) {
setState(() {
this._currentItemSelected = newValueSelected;
});
},
value: _currentItemSelected,
style: TextStyle(color: Color(0xFF5c2a7c), fontSize: 16.0),
),
SizedBox(
height: 1.0,
),
Divider(
color: Color(0xFF5c2a7c),
height: 5.0,
),
SizedBox(
height: 10.0,
),
Row(
children: <Widget>[
Spacer(),
InkWell(
child: Image.asset(
"images/next.png",
width: 40.0,
height: 40.0,
),
onTap: () {},
)
],
)
],
),
),
)),
BottomBar()
],
),
);
Future<Null> _selectDate(BuildContext context) async {
final DateTime picked = await showDatePicker(
context: context,
initialDate: DateTime.now(),
firstDate: new DateTime(1900),
lastDate: new DateTime(2100));
if (picked != null) {
var formatter = new DateFormat('yyyy-MM-dd');
choosenDate = formatter.format(picked);
dobController.text = choosenDate;
}
}
I am using a Form widget and its bottom was overflown, so similar problem. My solution was to apply a SingleChildScrollView widget. It was very convenient, as I was using a padding widget and this one has a padding property too. Just replaced it and perfect.
return Form(
key: _formKey,
autovalidate: _autoValidate,
child: SingleChildScrollView(
padding: const EdgeInsets.all(10.0),
child: Column(
(...)
Source
If you're using a scaffold, type ResizetToAvoidBottomPadding: false.