Newb question.
For performance, there's much difference between the class below (widget to build TextField),
or a const that doesn't rebuild anything? I heard in Flutter as everything are widgets, when building for example func vs class, always build a class to replace whatever you are building on your code. I thought this could be the same.
class RoundedBox extends StatelessWidget {
const RoundedBox({
this.text,
this.onChanged,
});
final String text;
final Function onChanged;
#override
Widget build(BuildContext context) {
return TextField(
onChanged: onChanged,
decoration: InputDecoration(
hintText: text,
hintStyle: TextStyle(
color: Colors.grey,
),
contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.lightBlueAccent, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.lightBlueAccent, width: 2.0),
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
),
);
}
}
Or just a simple const var?:
const kTextFieldDecoration = InputDecoration(
hintText: 'Enter a value',
hintStyle: TextStyle(
color: Colors.grey,
),
contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.lightBlueAccent, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.lightBlueAccent, width: 2.0),
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
);
In this case you will get better performance if you reuse the InputDecoration defined as const.
But this is equivalent(notice the const before InputDecoration). It's a good practice to use const for Widgets that does not change.
#override
Widget build(BuildContext context) {
return TextField(
onChanged: onChanged,
decoration: const InputDecoration(
hintText: text,
hintStyle: TextStyle(
color: Colors.grey,
),
contentPadding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.lightBlueAccent, width: 1.0),
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.lightBlueAccent, width: 2.0),
borderRadius: BorderRadius.all(Radius.circular(32.0)),
),
),
);
}
}
Related
I tried to create an addImage page but getting "constraintsError" every time.
I tried to solve this with "Flexible", "Expanded", "Container" etc. widgets. But I dont get the solution.
Here is the my current page.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Soru Ekleyin'),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: SingleChildScrollView(
child: Column(
children: [
TextFormField(
controller: _nameController,
decoration: InputDecoration(
labelText: '_nameController',
hintText: '_nameController',
filled: true,
fillColor: Color.fromARGB(255, 249, 249, 249),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(color: Colors.green),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
// style: BorderStyle.none,
color: Colors.blue,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
style: BorderStyle.none, color: Colors.green),
),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
// style: BorderStyle.none,
color: Colors.green),
),
// border: OutlineInputBorder(
// borderRadius: BorderRadius.circular(20.0)
// ),
),
),
TextFormField(
controller: _categoryController,
decoration: InputDecoration(
labelText: '_categoryController',
hintText: '_categoryController',
filled: true,
fillColor: Color.fromARGB(255, 249, 249, 249),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(color: Colors.green),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
// style: BorderStyle.none,
color: Colors.blue,
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
style: BorderStyle.none, color: Colors.green),
),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: BorderSide(
// style: BorderStyle.none,
color: Colors.green),
),
// border: OutlineInputBorder(
// borderRadius: BorderRadius.circular(20.0)
// ),
),
),
ElevatedButton(
onPressed: () {
question = Question(
_nameController.text.trim(),
false,
_categoryController.text.trim(),
);
_snackbarGoster(context, 'Soru eklendi.');
//Created the question variable.
// addQuestion(question!);
},
child: Text('Ekle')),
Spacer(),
image != null ? Image.file(image!) : FlutterLogo(),
ElevatedButton(
child: Text('Görsel Ekle'),
onPressed: () {
addImage();
_snackbarGoster(context, 'Görsel eklendi.');
}),
TextField(
decoration: InputDecoration(
labelText: 'Soru ve Açıklama',
hintText: 'Soru ve Açıklama'),
),
ElevatedButton(
onPressed: () async {
await uploadQuestion(question!);
},
child: Text('Yükle'))
],
),
),
),
);
}
Can someone help me with this. How can I solve this. The error is coming from "flex.dart".
I think you need to place your SingleChildScrollView inside sized widget.
As the image is shown below, the first image displays my text field before I click on it. the second image displays how it displays when after start typing and clicking on it. I want to remove that label text display while typing. how can I do that?
TextFormField(
controller: usernameEditingController,
decoration: InputDecoration(
fillColor: textWhite,
filled: true,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(
color: textdarkBlue,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(
color: textdarkBlue,
),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(color: Colors.red),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(color: Colors.red),
),
isDense: true,
contentPadding: EdgeInsets.fromLTRB(10, 30, 10, 0),
labelText: "User Name",
labelStyle: TextStyle(
fontSize: 15,
color: textdarkBlue,
),
hintText: "ex: James",
hintStyle: TextStyle(
color: textdarkBlue,
fontFamily: "Paralucent",
fontSize: 14)),
style: TextStyle(
color: textdarkBlue,
),
validator: (text) {
if (text!.isEmpty) {
return "Username can't be empty";
} else {
return null;
}
},
onChanged: (String? text) {
userName = text!;
//print(userName);
},
),
It is displaying as OutlineInputBorder's behavior.
There are few different ways, One is using FocusNode, goal is to provide labelText:null on focus change.
String userName = "";
late FocusNode focusNode = FocusNode()
..addListener(() {
setState(() {});
});
.....
TextFormField(
// controller: usernameEditingController,
focusNode: focusNode,
decoration: InputDecoration(
labelText: focusNode.hasFocus ? null : "User Name",
That is the behaviour of labelText property if you don't want it , simply remove it and use hintText instead
TextFormField(
controller: usernameEditingController,
decoration: InputDecoration(
fillColor: textWhite,
filled: true,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(
color: textdarkBlue,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(
color: textdarkBlue,
),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(color: Colors.red),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(color: Colors.red),
),
isDense: true,
contentPadding: EdgeInsets.fromLTRB(10, 30, 10, 0),
hintText: "ex: James",
hintStyle: TextStyle(
color: textdarkBlue,
fontFamily: "Paralucent",
fontSize: 14)),
style: TextStyle(
color: textdarkBlue,
),
validator: (text) {
if (text!.isEmpty) {
return "Username can't be empty";
} else {
return null;
}
},
onChanged: (String? text) {
userName = text!;
//print(userName);
},
),
I want to remove this underline.
This is my input field
TextField(
decoration: InputDecoration(
contentPadding:
const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
hintText: label,
hintStyle: TextStyle(color: Colors.grey[400]),
fillColor: Colors.white,
filled: true,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide:
const BorderSide(color: AppColors.textGrey2, width: 0.5),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide:
const BorderSide(color: AppColors.textGrey2, width: 0.5),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide:
const BorderSide(color: AppColors.textGrey2, width: 0.5)),
),
obscureText: obscureText,
),
I need this output
try to remove the styling from the text, add this line to your TextField
style: TextStyle(decoration:TextDecoration.none),
Do you see the underline in the hint text of your TextField?
If you put a Material widget above in your widget tree this should go by default.
Otherwise you can set it in the TextStyle of your hintText
hintStyle: TextStyle(decoration: TextDecoration.none)
I am new to flutter.
I want to convert Text Field widget in
class as like below syntax.
class MyTextField extends StatelessWidget {
for below code.
Thanks in advance
TextField(
style: TextStyle(fontSize: 40),
decoration: InputDecoration(
hintText: "enter email",
fillColor: Colors.white24,
filled: true,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.blue,
style: BorderStyle.solid,
width: 4)),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
style: BorderStyle.solid,
width: 4)),
)),
I'm not exactly sure what you want to do but if I've understood your question you want to put the default Material TextField into your own custom widget called MyTextField. You can do this by putting your existing code inside the build method of MyTextField like below:
class MyTextField extends StatelessWidget {
#override
Widget build(BuildContext context) {
return TextField(
style: TextStyle(fontSize: 40),
decoration: InputDecoration(
hintText: "enter email",
fillColor: Colors.white24,
filled: true,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.blue, style: BorderStyle.solid, width: 4)),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white, style: BorderStyle.solid, width: 4)),
),
);
}
}
If you want to add parameters like a changable value for the hint text you can do so like below:
class MyTextField extends StatelessWidget {
final String hint;
final InputBorder enabledBorder;
MyTextField({this.hint, this.enabledBorder});
#override
Widget build(BuildContext context) {
return TextField(
style: TextStyle(fontSize: 40),
decoration: InputDecoration(
hintText: hint,
fillColor: Colors.white24,
filled: true,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.blue, style: BorderStyle.solid, width: 4)),
enabledBorder: enabledBorder,
);
}
}
and then you can use the widget like:
MyTextField(
hint: "enter email",
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
borderSide: BorderSide(
color: Colors.white,
style: BorderStyle.solid,
width: 4,
),
),
);
I need to add shadow on my textfield
My code
TextField(
style: TextStyle(
fontSize: 25.0,
color: Colors.blueAccent,
),
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
prefixIcon: Image.asset('assets/searchIcon#2x.png'),
hintText: "Search services",
border: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.white, width: 32.0),
borderRadius: BorderRadius.circular(25.0),
),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.white, width: 32.0),
borderRadius: BorderRadius.circular(25.0))))
Also i want to change the inside color of textfied in white
Want to achieve something like this
You can try something like this below or you can wrap your TextField with Container and use BoxDecoration --> BoxShadow to add drop down shadow to it:
Material(
elevation: 20.0,
shadowColor: Colors.blue,
child: TextField(
obscureText: true,
autofocus: false,
decoration: InputDecoration(
icon: new Icon(Icons.lock, color: Color(0xff224597)),
hintText: 'Password',
fillColor: Colors.white,
filled: true,
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
enabledBorder: OutlineInputBorder(borderRadius:BorderRadius.circular(5.0),
borderSide: BorderSide(color: Colors.white, width: 3.0))
),
),
)
You can wrap your TextField widget with Material. Material has property about the shadow. You can use it like this:
Material(
elevation: 3.0, // Set here what you wish!
shadowColor: Colors.grey,
child: TextField(
style: TextStyle(
fontSize: 25.0,
color: Colors.blueAccent,
),
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
prefixIcon: Image.asset('assets/searchIcon#2x.png'),
hintText: "Search services",
border: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.white, width: 32.0),
borderRadius: BorderRadius.circular(25.0),
),
focusedBorder: OutlineInputBorder(
borderSide:
BorderSide(color: Colors.white, width: 32.0),
borderRadius: BorderRadius.circular(25.0))))
I could give you an idea. Try something like this,
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
boxShadow: [
BoxShadow(
offset: Offset(0,5),
blurRadius: 10.0,
color: Colors.black.withOpacity(0.5),
),
],
),
child: TextField(
style: TextStyle(
fontSize: 25.0,
color: Colors.blueAccent,
),
decoration: InputDecoration(
contentPadding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
prefixIcon: Image.asset('assets/searchIcon#2x.png'),
hintText: "Search services",
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 32.0),
borderRadius: BorderRadius.circular(25.0),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.white, width: 32.0),
borderRadius: BorderRadius.circular(25.0),
),
),
),
),
Play around with the color and offset value, you will get the desired output!
Hope that suits your case!
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(6),
boxShadow: const [
BoxShadow(
color: Colors.grey,
blurRadius: 10.0, // soften the shadow
spreadRadius: 1.0, //extend the shadow
offset: Offset(
1.0, // Move to right 5 horizontally
1.0, // Move to bottom 5 Vertically
),
)
]),
child: Row(
children: [
Expanded(
child: TextField(
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: const BorderSide(
color: Colors.transparent,
)),
disabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: const BorderSide(
color: Colors.transparent,
)),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(6),
borderSide: const BorderSide(
color: Colors.transparent,
)),
fillColor: Colors.white,
filled: true,
hintText: "Search by Jewelers Name",
border: InputBorder.none,
hintStyle:
const TextStyle(color: Colors.grey))),
),
],
),
),