error borders not fit into the container- flutter - flutter

I'm new to flutter now I'm creating a login page for my app. when I submit empty fields, I'm getting this issue. it's not fit into the container. struggling to solve this problem. how to overcome this issue. appreciate your help on this. below I have provided my email field code with the picture of the issue I'm facing.
GlassmorphicContainer(
borderRadius: 30,
blur: 40,
padding: EdgeInsets.all(40),
alignment: Alignment.bottomCenter,
border: 2,
linearGradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFFffffff).withOpacity(0.1),
Color(0xFFFFFFFF).withOpacity(0.05),
],
stops: [
0.1,
1,
]),
borderGradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFFffffff).withOpacity(0.2),
Color((0xFFFFFFFF)).withOpacity(0.2),
],
),
height: 50,
width: 300,
child: TextFormField(
controller: emailEditingController,
enabled: true,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
// borderSide: const BorderSide(
// color: textWhite,
// ),
borderSide: BorderSide.none),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(color: textWhite),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(color: Colors.red),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(color: Colors.red),
),
//isDense: true,
contentPadding: EdgeInsets.fromLTRB(10, 30, 10, 0),
hintText: "Email/ Username",
hintStyle: TextStyle(
color: textWhite, fontFamily: "Roboto", fontSize: 14),
),
style: TextStyle(color: buttontext),
validator: (String? UserName) {
if (UserName != null && UserName.isEmpty) {
return "Email can't be empty";
}
return null;
},
onChanged: (String? text) {
email = text!;
// print(email);
},
onSaved: (value) {
loginUserData['email'] = value!;
},
),
),

give some padding for container
Container(
padding: EdgeInsets.all(10),
child:TextFormField()
)

Increase the height and width of the container or add padding into the Container
Container(
height: 100.0, // height
width: 400.0, // Width
padding: EdgeInsets.all(10), // Padding
child: TextFormField(),
),

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 UI Config widget row with 2 dropdown

I have problem with UI in flutter. Anyone have experienced in widget please help me.
Firstly, here's the target from figma :
both date and time is using dropdown.
This is what it become after my code :
This is my code :
Container(
alignment: Alignment.centerLeft,
child: Text('Schedule',
style: TextStyle(
color: Color.fromRGBO(78, 125, 150, 1),
fontSize: 12,
fontWeight: FontWeight.w600
))),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: 40,
width: MediaQuery.of(context).size.shortestSide * 0.5,
color: Colors.white,
child: DropdownButtonFormField(
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: MediaQuery.of(context).size.shortestSide * 0.3,
color: Colors.white,
child: DropdownButtonFormField(
onChanged: (value) {},
items: _dropdownTime.map((value) =>
DropdownMenuItem(
child: Text(value),
value: value,
)).toList(),
elevation: 4,
dropdownColor: Colors.white,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.watch_later_outlined, size: 16),
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 want to make the size in the row like this :
50% dropdown Date,
20% space,
30% dropdown Time
and the problem are :
I don't know how to configure it as a percentage of row space, not with MediaQuery.of(context).size.width because I already use margin.
How to made the percentage is auto fit no matter device the user will used.
Hope to solved this here, thank you before~
Update, after using layout builder :
You should use the LayoutBuilder for that instead of MediaQuery. It's going to give you the available space inside the wrapped widget.
The code changes are below. This is the result:
child: LayoutBuilder(
builder: (context, constraints) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
// height: 40,
width: constraints.maxWidth * 0.5,
color: Colors.white,
child: DropdownButtonFormField(
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.3,
color: Colors.white,
child: DropdownButtonFormField(
onChanged: (value) {},
items: _dropdownTime
.map((value) => DropdownMenuItem(
child: Text(value),
value: value,
))
.toList(),
elevation: 4,
dropdownColor: Colors.white,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.watch_later_outlined, size: 16),
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),
),
),
],
);
}
),

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

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