I tried create TextField with shadow effect using Container like this:
Code:
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: new BorderRadius.circular(5.0),
boxShadow: [
BoxShadow(
color: Colors.black12,
spreadRadius: 1,
blurRadius: 3,
),
],
),
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Product title required';
}
return null;
},
decoration: InputDecoration(
isDense: true,
hintText: 'Product title',
contentPadding: EdgeInsets.all(18.0),
filled: true,
fillColor: Colors.white,
border: OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide.none,
),
),
textAlign: TextAlign.start,
maxLines: 1,
),
)
But when validation has error then error message shows inside Container which is incorrect in my case:
How I can create TextField like this shadow with correctly displaying error message and error border colors like this but with shadow:
Try to wrap it with "Material" widget
Material(
elevation: 5,
child: TextFormField(
validator: (value) {
if (value.isEmpty) {
return 'Product title required';
}
return null;
},
decoration: InputDecoration(
isDense: true,
hintText: 'Product title',
contentPadding: EdgeInsets.all(18.0),
filled: true,
fillColor: Colors.white,
border: OutlineInputBorder(
borderRadius: new BorderRadius.circular(10.0),
borderSide: BorderSide.none,
),
),
textAlign: TextAlign.start,
maxLines: 1,
),
),
Related
How do I properly align the prefix icon, the hintText, the actual value that the user has typed in and the suffix icon? I am using textformfield for this one.
Widget yourNameWidget(yourNameCtrlr) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 0.0),
child: TextFormField(
style: const TextStyle(fontFamily: 'Poppins', fontSize: 12),
controller: yourNameCtrlr,
keyboardType: TextInputType.text,
decoration: InputDecoration(
contentPadding: EdgeInsets.all(18),
isDense: true,
prefixIcon: const Icon(Icons.person),
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Color(0xFFCECECE)),
borderRadius: BorderRadius.circular(12),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(12),
borderSide: const BorderSide(color: Color(0xFFCECECE)),
),
// this does not align with the prefix and the hint text
suffix: GestureDetector(
onTap: () {
yourNameCtrlr.clear();
},
child: const Icon(
Icons.clear,
size: 16,
),
),
hintText: 'Your Name',
fillColor: const Color(0xFFFEFEFE),
filled: true,
),
validator: (value) {
if (value!.isEmpty || !RegExp(r'^[a-z A-Z]+$').hasMatch(value)) {
return "Please enter a valid name.";
} else {
return null;
}
},
onChanged: (value) {},
),
);
}
I want the three of it (prefix,hint text, suffix) should be aligned.
Here is the image for the preview of the textformfield
https://prnt.sc/BxYxnZx1G5od
I was used this type of textformfield please see the reference below:
TextFormField(
controller: textEditingController,
cursorColor: AppTheme.secondaryColor,
autofocus: true,
onChanged: (txt) {
},
style: const TextStyle(
fontSize: 16.0, color:
Color.fromARGB(255,4,4,4)),
decoration: InputDecoration(
border: InputBorder.none,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: AppTheme.secondaryColor_30,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
borderSide: const BorderSide(
color: AppTheme.secondaryColor_30,
),
),
hintText:
StringConstants.searchForAGroupOrFriend,
hintStyle: Theme.of(context)
.textTheme
.caption!
.copyWith(color: AppTheme.grey2),
fillColor: AppTheme.secondaryColor_10,
contentPadding: const EdgeInsets.only(top: 10),
filled: true,
prefixIcon: GestureDetector(
onTap: () {
},
child: Image.asset(
Assets.icBackRound,
scale: 3.5,
color: AppTheme.backDarkGrey,
),
),
suffixIcon: GestureDetector(
child: Image.asset(
Assets.searchIcon,
color: AppTheme.secondaryColor,
scale: 3.5,
),
onTap: () {
},
),
),
),
I have wrapped a container and a sizedbox around the textform field to fit the error message in the container but its keeps resizing the widget.
Container(
decoration: BoxDecoration(
color: Color(0xffFAFAFA),
borderRadius: BorderRadius.circular(10.0),
),
height: 73,
width: 396,
child: Center(
child: TextFormField(
keyboardType: TextInputType.number,
onSaved: (Value) => print(phonenumber),
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(10.0, 50.0, 0.0, 00.0),
isDense: true,
hintStyle: TextStyle(
fontFamily: "Proxima Nova",
fontWeight: FontWeight.w300,
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(
//color: Colors.amber,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(5),
borderSide: BorderSide(width: 1, color: Colors.transparent),
),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.transparent),
),
// labelText: '',
),
inputFormatters: [
FilteringTextInputFormatter.deny(
RegExp(
r'^\s*(?:\+?(\d{1,3}))?[-. (]*(\d{3})[-. )]*(\d{3})[-. ]*(\d{5})(?: *x(\d+))?\s*$'),
)
],
controller: phonenumber,
validator: (value) {
if (value != null && value.isEmpty) {
return 'Kindly register with another number or Log In';
} else
return null;
},
),
),
),
i wrapped a container around the textformfield and a sizedbox around the textformfield but,the error message keeps resizing the container.
Please remove container height , this is causing shrink.
I want to achieve this
Here is my code so far,
Padding(
padding: EdgeInsets.fromLTRB(5, 10, 5, 10),
child: Container(
decoration: BoxDecoration(
boxShadow: [
const BoxShadow(
blurRadius: 1,
),
],
borderRadius: BorderRadius.circular(5.0),
),
child: TextFormField(
keyboardType: TextInputType.text,
validator: (value) {
if (value.isEmpty) {
return MessageForm.required_message;
}
return null;
},
controller: _fullnameInput,
decoration: InputDecoration(
fillColor: Colors.white,
filled: true,
// enabledBorder: OutlineInputBorder(
// borderRadius: BorderRadius.circular(10.0),
// borderSide: BorderSide(
// color: AppColors.primary,
// width: 1.0,
// ),
// ),
border: OutlineInputBorder(),
labelText: 'Full Name',
labelStyle: TextStyle(fontSize: 15),
),
),
),
),
there result is not like i expect, here is the result
So how can i achieve it ? fyi, i'm not using nullsafety
You gotta play with the values like offset and blurRadius but here is an example:
BoxShadow(
color: Colors.black,
blurRadius: 15,
offset: Offset(-5, 5),
),
Wrap your TextFormField in a Card. Example:
runApp(MaterialApp(
color: Colors.grey[50],
home: Center(
child: SizedBox(
width: 100,
child: Card(
elevation: 5,
child: TextFormField(
decoration: InputDecoration(
fillColor: Colors.white,
filled: true,
border: InputBorder.none,
labelText: 'Full Name',
labelStyle: TextStyle(fontSize: 15),
),
),
),
),
)));
Output:
Play with the elevation property to increase or decrease the amount of shadow
I have a TextFormField like so:
TextFormField(
cursorColor: Colors.black,
decoration: InputDecoration(
prefixIcon: Icon(Icons.email),
errorMaxLines: 2,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2,
),
),
),
autocorrect: false,
onChanged: (_) {},
validator: (_) {},
),
This TextFormField will fetch an email from an api whenever onChanged() is called, so I decided I want to put a progress/loading indicator inside to indicate that it is fetching data, but I am having a hard time figuring out implementing it.
So is there a way I can insert a CircularProgressIndicator() or a simple progress/loading indicator inside a TextFormField?
Something like this:
TextFormEdit doesn't have the right attribute, that is Suffix widget.
Still, InputDecoration has the Suffix attribute where you can append whatever progress widget you want.
Once here, you can keep it visible or not (and a bunch of other settings) directly in the widget.
TextFormField(
cursorColor: Colors.black,
decoration: InputDecoration(
prefixIcon: Icon(Icons.email),
suffix: isLoading?CircularProgressIndicator():null
errorMaxLines: 2,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2,
),
),
),
autocorrect: false,
onChanged: (_) {},
validator: (_) {},
),
Props to #stefanodecillis, I was also able to achieve it using Stack
Stack(
children: <Widget>[
TextFormField(
cursorColor: Colors.black,
decoration: InputDecoration(
prefixIcon: Icon(Icons.email),
errorMaxLines: 2,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2,
),
),
),
autocorrect: false,
onChanged: (_) {},
validator: (_) {},
),
(state.isSubmitting)
? Positioned(
top: 5,
right: 5,
child: Container(
child: CircularProgressIndicator(),
),
)
: Container(),
],
),
Before loading add this variable to class statefull widget
bool _isLoading = true;
so when your email loaded
setState(){
_isLoading = false;
}
and for add this text field code
TextFormField(
cursorColor: Colors.black,
decoration: InputDecoration(
prefixIcon: Icon(Icons.email),
suffix: isLoading?CircularProgressIndicator():null,
errorMaxLines: 2,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2,
),
),
),
autocorrect: false,
onChanged: (_) {},
validator: (_) {},
),
I put some simple styles around my text field widget but when the validation kicks in, it disturbs the decoration. How do I show the error message after the field
Code:
Padding(
padding: const EdgeInsets.fromLTRB(0.0, 10.0, 0.0, 0.0),
child: Material(
elevation: 2,
borderRadius: BorderRadius.all(Radius.circular(8.0)),
child: new TextFormField(
maxLines: 1,
keyboardType: TextInputType.text,
autofocus: false,
decoration: constFieldDecoration.copyWith(
hintText: 'Title',
),
validator: (value) => value.isEmpty ? 'Title can\'t be empty' : null,
onSaved: (value) => _addTitle = value.trim(),
),
),
);
const constFieldDecoration = InputDecoration(
hintText: 'Enter a value',
contentPadding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(8.0))),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.transparent, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(8.0))),
);