Flutter, How can set height TextFromFiled with Container (counter text)? - flutter

I want to set height TextFormFeild with Container
There are some bottom padding? between Container and TextFormField
So focusedBorder can't cover all Container edge.
There are no paddings in parent Container.
How can I solve it.
TextFormField With Container Image
This is my code
height: 130,
margin: const EdgeInsets.only(top: 12.0, bottom: 40.0),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: const Color(0xffDDDDDD),
width: 0.5,
),
borderRadius: BorderRadius.circular(10.0),
boxShadow: const [
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.16),
offset: Offset(0, 1),
blurRadius: 2,
)
]),
child: TextFormField(
maxLength: 200,
buildCounter: (context,
{required currentLength,
required isFocused,
maxLength}) {
return Container(
transform: Matrix4.translationValues(0, -35, 0),
child: Text("$currentLength / $maxLength"),
);
},
maxLines: 5,
keyboardType: TextInputType.multiline,
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
focusedBorder: const OutlineInputBorder(
borderRadius:
BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(
width: 2, color: Color(0xffFa7E66))),
border: OutlineInputBorder(
borderSide: const BorderSide(
width: 0.0, style: BorderStyle.none),
borderRadius: BorderRadius.circular(8.0),
),
hintText: 'hint text',
hintStyle: const TextStyle(
fontSize: 14.0, color: Color(0xff444444))),
),
),```

Related

Flutter DropdownButtonFormField selected item didn't showed up

I have some problem with my dropdown in flutter.
Here's the UI with hint :
And the when we select item from dropdown, the item selected not showed up or only show half of it.
Here's the UI after select data from dropdown :
The selected item didn't showed up normally like in the attachment above.
Here's my code :
LayoutBuilder(
builder: (context, constraints) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 40,
width: constraints.maxWidth * 0.55,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
child: DropdownButtonFormField(
isExpanded: true,
onChanged: (value) {},
items: _dropdownDate.map((value) =>
DropdownMenuItem(
child: Text(value),
value: value,
)).toList(),
elevation: 4,
dropdownColor: Colors.white,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.calendar_month, size: 16),
hintText: 'Select Date',
hintStyle: TextStyle(fontSize: 12),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
width: 0.8,
color: Colors.grey,
)),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
width: 0.8,
color: Colors.grey,
)),
contentPadding: const EdgeInsets.all(16),
fillColor: Colors.white
),
),
),
Container(
height: 40,
width: constraints.maxWidth * 0.40,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
child: DropdownButtonFormField(
isExpanded: true,
onChanged: (value) {},
items: _dropdownTime.map((value) =>
DropdownMenuItem(
child: Text(value),
value: value,
)).toList(),
elevation: 4,
dropdownColor: Colors.white,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.calendar_month, size: 16),
hintText: 'Select Time',
hintStyle: TextStyle(fontSize: 12),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
width: 0.8,
color: Colors.grey,
)),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
width: 0.8,
color: Colors.grey,
)),
contentPadding: const EdgeInsets.all(16),
fillColor: Colors.white
),
),
),
],
);
}
),
I can't find a way to configure the size of font after selected.
Thank you before

Increment your container height or reduce content padding. it will help you
contentPadding: const EdgeInsets.all(3)

Decrease the contentPadding will work. in your case, you can change contentPadding.
contentPadding: const EdgeInsets.all(2),
fillColor: Colors.white

Increase the size of the container and reduces content padding. it will work
LayoutBuilder(
builder: (context, constraints) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 50,
width: constraints.maxWidth * 0.55,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
child: DropdownButtonFormField(
isExpanded: true,
onChanged: (value) {},
items: _dropdownDate.map((value) =>
DropdownMenuItem(
child: Text(value),
value: value,
)).toList(),
elevation: 4,
dropdownColor: Colors.white,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.calendar_month, size: 16),
hintText: 'Select Date',
hintStyle: TextStyle(fontSize: 12),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
width: 0.8,
color: Colors.grey,
)),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
width: 0.8,
color: Colors.grey,
)),
contentPadding: const EdgeInsets.all(10),
fillColor: Colors.white
),
),
),
Container(
height: 50,
width: constraints.maxWidth * 0.40,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(10),
),
child: DropdownButtonFormField(
isExpanded: true,
onChanged: (value) {},
items: _dropdownTime.map((value) =>
DropdownMenuItem(
child: Text(value),
value: value,
)).toList(),
elevation: 4,
dropdownColor: Colors.white,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.calendar_month, size: 16),
hintText: 'Select Time',
hintStyle: TextStyle(fontSize: 12),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
width: 0.8,
color: Colors.grey,
)),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
width: 0.8,
color: Colors.grey,
)),
contentPadding: const EdgeInsets.all(10),
fillColor: Colors.white
),
),
),
],
);
}
),

onPress not working inside of Postioned widget in flutter

Im trying to put some buttons and ListView inside of Stack with Postioined parameters.
All looks fine until i try to click on right arrow icon button to go close the page.
Its height and width are 48px (which has to be more than enought to click on it) but for some reason onPressed is working like its size is 2px.
How i could fix this issue?
Here is the code:
import 'package:flutter/material.dart';
class MobilePortraitProfile extends StatefulWidget {
#override
State<MobilePortraitProfile> createState() => _MobilePortraitProfileState();
}
class _MobilePortraitProfileState extends State<MobilePortraitProfile> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Positioned(
left: 10,
top: 40,
right: 50,
bottom: 670,
child: Text(
'Account Info',
style: TextStyle(color: Colors.white, fontSize: 28),
),
),
Positioned(
left: 295,
right: 3,
top: 27,
bottom: 660,
child: Container(
margin: EdgeInsets.all(6.5),
height: 48,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(100)),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color.fromRGBO(10, 196, 186, 1),
Color.fromRGBO(33, 211, 155, 1)
]),
),
),
),
Positioned(
right: 10,
height: 48,
width: 48,
bottom: 670,
child: IconButton(
icon: Icon(
Icons.keyboard_arrow_right,
size: 38,
),
onPressed: () => Navigator.pop(context)),
),
Positioned(
top: 5,
right: 20,
left: 20,
bottom: 15,
child: Container(
child: GestureDetector(
onTap: () {
FocusScope.of(context).unfocus();
},
child: ListView(
shrinkWrap: true,
reverse: true,
children: [
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
spreadRadius: 1,
blurRadius: 2,
offset:
Offset(3, 4), // changes position of shadow
),
],
border: Border.all(color: Colors.grey, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: TextField(
style: TextStyle(
fontSize: 20,
),
cursorColor: Colors.black87,
keyboardType: TextInputType.text,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(12, 0, 0, 0),
border: InputBorder.none,
labelText: "Name/Surname",
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
floatingLabelBehavior:
FloatingLabelBehavior.always,
),
),
),
SizedBox(
height: 30,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
spreadRadius: 1,
blurRadius: 2,
offset:
Offset(3, 4), // changes position of shadow
),
],
border: Border.all(color: Colors.grey, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: TextField(
style: TextStyle(
fontSize: 20,
),
cursorColor: Colors.black87,
keyboardType: TextInputType.text,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(12, 0, 0, 0),
border: InputBorder.none,
labelText: "Position",
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
floatingLabelBehavior:
FloatingLabelBehavior.always,
),
),
),
SizedBox(
height: 30,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
spreadRadius: 1,
blurRadius: 2,
offset:
Offset(3, 4), // changes position of shadow
),
],
border: Border.all(color: Colors.grey, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: TextField(
style: TextStyle(
fontSize: 20,
),
cursorColor: Colors.black87,
keyboardType: TextInputType.text,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(12, 0, 0, 0),
border: InputBorder.none,
labelText: "Company",
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
floatingLabelBehavior:
FloatingLabelBehavior.always,
),
),
),
SizedBox(
height: 30,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
spreadRadius: 1,
blurRadius: 2,
offset:
Offset(3, 4), // changes position of shadow
),
],
border: Border.all(color: Colors.grey, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: TextFormField(
validator: validateEmail,
style: TextStyle(
fontSize: 20,
),
cursorColor: Colors.black87,
keyboardType: TextInputType.text,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(12, 0, 0, 0),
border: InputBorder.none,
labelText: "e-mail",
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
floatingLabelBehavior:
FloatingLabelBehavior.always,
),
),
),
SizedBox(
height: 30,
),
Container(
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.grey,
spreadRadius: 1,
blurRadius: 2,
offset:
Offset(3, 4), // changes position of shadow
),
],
border: Border.all(color: Colors.grey, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: TextField(
style: TextStyle(
fontSize: 20,
),
cursorColor: Colors.black87,
keyboardType: TextInputType.number,
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(12, 0, 0, 0),
border: InputBorder.none,
labelText: "Phone Number",
focusedBorder: InputBorder.none,
enabledBorder: InputBorder.none,
errorBorder: InputBorder.none,
disabledBorder: InputBorder.none,
floatingLabelBehavior:
FloatingLabelBehavior.always,
),
),
),
].reversed.toList(),
),
),
),
),
],
),
);
}
}
String validateEmail(String formEmail) {
String pattern = r'\w+#\w+\.\w+';
RegExp regex = RegExp(pattern);
if (!regex.hasMatch(formEmail)) return 'Invalid e-mail adress format';
return null;
}

try this way, and put in at the bottom of stack tree,
Positioned(
right: 10,
height: 48,
width: 48,
bottom: 670,
child: InkWell(
onTap: () => Navigator.pop(context),
child: Container(
/// container is just to check the press area
color: Colors.yellow,
child: Icon(
Icons.keyboard_arrow_right,
size: 38,
),
),
),
),

How can I add validation to not enabled textformfeld?

im trying to displaying error text when textformfield is empty and this is working fine but only when user tapping on the textfield he is seeing the error . What I want is if user tap upload video and the textfomrfield for the hashtag is empty then showing error text so also when its not enabled .
Hope anyone can help
Here is my code
Container(
width: 170,
height: 65,
margin: EdgeInsets.only(left: 12, right: 10),
child: TextFormField(
controller: hashtagcontroller2,
decoration: InputDecoration(
hintText: 'Hashtag',
prefixText: '#',
contentPadding: EdgeInsets.fromLTRB(12, 8, 8, 8),
errorText: _validatehashtag2 ? 'Hashtag Can\'t Be Empty' : null,
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
borderSide: BorderSide(
width: 2, color: Colors.black),
),
focusedBorder: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(20.0),
),
borderSide: BorderSide(
width: 2, color: Colors.black),
),//prefixIcon: Icon(Icons.h)
),
),
),
``

First you bind the container with column and try out
Column(
children: [
Container(
width: 170,
height: 65,
margin: EdgeInsets.only(left: 12, right: 10),
child: TextFormField(
controller: hashtagcontroller2,
decoration: InputDecoration(
hintText: 'Hashtag',
prefixText: '#',
contentPadding: EdgeInsets.fromLTRB(12, 8, 8, 8),
errorText: _validatehashtag2 ? 'Hashtag Can\'t Be Empty' : null,
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(10.0),
),
borderSide: BorderSide(
width: 2, color: Colors.black),
),
focusedBorder: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(20.0),
),
borderSide: BorderSide(
width: 2, color: Colors.black),
),//prefixIcon: Icon(Icons.h)
),
),
),
RaisedButton(
onPressed: () {
setState(() {
hashtagcontroller2.text.isEmpty ? _validatehashtag2 = true : _validatehashtag2 = false;
});
},
child: Text('Submit'),
textColor: Colors.white,
color: Colors.blueAccent,
),],),

flutter (ui design) my text field adjust badly to its parent container

Hi im trying to make a responsive ui, so I adjust my width & height thoroughly with mediaquery.of(context).size. Now, the problem I've been currently dealing with is that my textfield does not exactly adjust wisely with its parent container leaving the text raised.
my code:
import 'package:flutter/material.dart';
class LoginUI {
LoginUI(this.myClipper, this.myBGClipperColor, this.myColorLightOrange);
final Color myColorLightOrange;
final Color myBGClipperColor;
final CustomClipper myClipper;
Widget getLoginUIWidget() {
return Builder(builder: (BuildContext context) {
Size mediaSize = MediaQuery.of(context).size;
return Container(
width: mediaSize.width,
height: mediaSize.height,
color: Colors.white,
child: Stack(
children: <Widget>[
ClipPath(
child: Container(
color: myBGClipperColor,
),
clipper: myClipper,
),
Text("\n Login",
style: TextStyle(
color: Colors.white,
fontSize: 23,
fontWeight: FontWeight.bold)),
Container(
width: mediaSize.width * .8,
height: mediaSize.height * .8,
margin: EdgeInsets.fromLTRB(
mediaSize.width * .1,
mediaSize.height * .23,
mediaSize.width * .1,
mediaSize.height * .1),
color: Colors.transparent,
child: Column(
children: <Widget>[
Container(
height: mediaSize.height * .25,
width: mediaSize.width * .8,
child: Image.asset(
'assets/images/image_pushing_cart.png',
fit: BoxFit.fill,
)),
**Container(
constraints:
BoxConstraints(maxHeight: mediaSize.height * .070),
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54.withOpacity(0.45),
spreadRadius: 1,
blurRadius: 4,
offset: Offset(3.5, 4))
]),
child: TextFormField(
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius:
BorderRadius.all(Radius.circular(20))),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent),
borderRadius:
BorderRadius.all(Radius.circular(20))),
hintText: "Email",
hintStyle: TextStyle(color: Colors.black87),
border: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.teal,
),
),
prefixIcon: Icon(
Icons.person,
color: Colors.black54,
),
filled: true,
fillColor: myColorLightOrange),
style: TextStyle(color: Colors.black),
),
),**
Text("\n"),
**Container(
constraints:
BoxConstraints(maxHeight: mediaSize.height * .070),
decoration: BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(Radius.circular(20)),
boxShadow: <BoxShadow>[
BoxShadow(
color: Colors.black54.withOpacity(0.45),
spreadRadius: 1,
blurRadius: 4,
offset: Offset(3.5, 4))
]),
child: TextFormField(
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent),
borderRadius:
BorderRadius.all(Radius.circular(20))),
enabledBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.transparent),
borderRadius:
BorderRadius.all(Radius.circular(20))),
prefixIcon: Icon(
Icons.enhanced_encryption,
color: Colors.black54,
),
hintText: "********",
filled: true,
fillColor: myColorLightOrange),
style: TextStyle(color: Colors.black),
))**
],
),
)
],
),
);
});
}
}
Here is an image example
Is there a possibility that textfield would adjust accordingly whichever I gave its parent's (Container) width and height.

Try removing this line.
textAlignVertical: TextAlignVertical.center,

To apply the padding to the content of the TextField. You can apply this code contentPadding property ,TextAlign property and also add
isDense can be use for precise padding
new TextField(
textAlign: TextAlign.left,
decoration: new InputDecoration(isDense: true,,hintText: "Email", contentPadding:
const EdgeInsets.all(20.0))
)

Set TextField height

I've created a custom rounded TextField widget with shadow. Only thing I can't set is the height of the widget. I followed this SO answer to set a height, but unfortunately it doesn't set the children's height properly (it shrinks the input, but doesn't the container where the shadow is):
My widget:
class Input extends StatelessWidget {
final String hintText;
Input(this.hintText);
#override
Widget build(BuildContext context) {
return Container(
height: 50,
child: SizedBox(
height: double.infinity,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(0, 0, 0, 0.05),
blurRadius: 15,
offset: Offset(0, 10),
spreadRadius: 10)
]),
child: TextField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 1),
borderRadius: BorderRadius.circular(30)),
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 1),
borderRadius: BorderRadius.circular(30)),
filled: true,
hintStyle: TextStyle(color: Color.fromRGBO(184, 184, 184, 1)),
contentPadding: EdgeInsets.all(20),
hintText: hintText,
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 1),
borderRadius: BorderRadius.circular(30)),
fillColor: Colors.white),
))),
);
}
}