How can I add validation to not enabled textformfeld? - flutter

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,
),],),

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
),
),
),
],
);
}
),

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

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))),
),
),```

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,
),
),
),
),

Does it gives an hashtag icon in flutter?

Im trying to using an hashtag icon for my flutter app.It there anyway to get this icon ?.Maybe in material design ?
I need it as a prefix icon.
Hope anyone can help
Heres my code
Container(
width: 160,
height: 55,
margin: EdgeInsets.only(left: 8, right: 10),
child: TextField(
controller: hashtagcontroller2,
decoration: InputDecoration(
hintText: ' Hashtag2',
prefixIcon: ,
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(30.0),
),
borderSide: BorderSide(
width: 2, color: Colors.black),
),
focusedBorder: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(40.0),
),
borderSide: BorderSide(
width: 2, color: Colors.black),
Container(
width: 160,
height: 55,
margin: EdgeInsets.only(left: 8, right: 10),
child: TextField(
controller: hashtagcontroller2,
decoration: InputDecoration(
prefixIcon: Padding(
padding: const EdgeInsets.only(top: 16.0, left: 20),
child: Text(
"#",
),
),
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(30.0),
),
borderSide: BorderSide(width: 2, color: Colors.black),
),
focusedBorder: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(40.0),
),
borderSide: BorderSide(width: 2, color: Colors.black),
)))),
There is a hashtag icon in the Icons class (Icons.tag).

Flutter| While keyboard pops up there will be BottomOverFlowed. Need exact design as shown in image

When keyboard pops up, there will be bottom over flowed. I need to add a expanded card as background for login form and submit button.
And also need that expanded card to move up when there is keyboard.
I have checked through many other solution for keyboard popup, but I couldn't get exact solution for mine design.
return new Scaffold(
body: new Column(children: <Widget>[
SizedBox(
height: 70,
),
new Image.asset(
'assets/logo.png',
fit: BoxFit.cover,
),
new Text(
"Login",
style: TextStyle(fontSize: 20, color: Colors.white),
),
new Text(
"It has noon , but also the Type roman, remaining essentially unchanged for the wish i could do.",
textAlign: TextAlign.center,
),
Column(
children: <Widget>[
Expanded(
child: Container(
child: Container(
padding: EdgeInsets.all(24),
decoration: new BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.only(
topLeft: const Radius.circular(25.0),
topRight: const Radius.circular(25.0))),
child: new ListView(
children: <Widget>[
TextField(
style: new TextStyle(
color: Color(0xff651515),
),
autofocus: false,
obscureText: false,
keyboardType: TextInputType.text,
decoration: InputDecoration(
labelText: "email",
hintText: "email",
labelStyle: TextStyle(
color: Color(0xffa4a4a4),
fontSize: 14,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 2,
color: Color(0xff55c882),
style: BorderStyle.solid),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Color(0xffa4a4a4),
),
),
),
),
SizedBox(
height: 20,
),
TextField(
style: new TextStyle(
color: Color(0xff651515),
),
autofocus: false,
obscureText: false,
keyboardType: TextInputType.text,
decoration: InputDecoration(
labelText: "password",
hintText: "password",
labelStyle: TextStyle(
color: Color(0xffa4a4a4),
fontSize: 14,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 2,
color: Color(0xff55c882),
style: BorderStyle.solid),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(4)),
borderSide: BorderSide(
width: 1,
color: Color(0xffa4a4a4),
),
),
),
),
],
),
),
))
],
)
]));
you can just wrap your column with a:
SingleChildScrollView(
child: put your column here
)
hope it helped