enter image description herei want make padding betwenn this
Container(
child: Column(
children: \<Widget\>\[
// Radio(value: 1, groupValue: 'Null', onChanged: (index) {}),
// Expanded(
// child: Text('A domicile'),
// ),
// Radio(value: 1, groupValue: 'Null', onChanged: (index) {}),
// Expanded(
// child: Text('En consigne'),
// ),
TextField(
decoration: InputDecoration(
labelText: ' Ref Expedéteur',
labelStyle: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontFamily: 'Segoe UI',
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 136, 136, 136)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3, color: const Color(0xffff4848)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 66, 125, 145)),
),
),
),
TextField(
decoration: InputDecoration(
labelText: ' Nombre de colis',
labelStyle: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontFamily: 'Segoe UI',
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 136, 136, 136)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3, color: const Color(0xffff4848)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 66, 125, 145)),
),
),
),
TextField(
decoration: InputDecoration(
labelText: ' Poids',
labelStyle: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontFamily: 'Segoe UI',
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 136, 136, 136)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: const Color(0xffff4848),
),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 66, 125, 145)),
),
),
),
TextField(
decoration: InputDecoration(
labelText: ' Taille de colis',
labelStyle: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontFamily: 'Segoe UI',
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2,
color: Color.fromARGB(255, 136, 136, 136)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2, color: const Color(0xffff4848)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 2,
color: Color.fromARGB(255, 66, 125, 145)),
),
),
),
// Padding(padding: const EdgeInsets.all(2.0),
// child:Column(
// children: \[
// Radio(value: 1, groupValue: 'Null', onChanged: (index) {}),
// Expanded(
// child: Text('Paye'),
// ),
// \],
// ),
// ),
TextField(
decoration: InputDecoration(
labelText: ' Ref Expedéteur',
labelStyle: TextStyle(
color: Color.fromARGB(255, 5, 5, 5),
fontFamily: 'Segoe UI',
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 136, 136, 136)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3, color: const Color(0xffff4848)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 66, 125, 145)),
),
),
),
TextField(
decoration: InputDecoration(
labelText: ' Nombre de colis',
labelStyle: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontFamily: 'Segoe UI',
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 136, 136, 136)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3, color: const Color(0xffff4848)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 66, 125, 145)),
),
),
),
TextField(
decoration: InputDecoration(
labelText: ' Poids',
labelStyle: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontFamily: 'Segoe UI',
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 136, 136, 136)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3, color: const Color(0xffff4848)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 66, 125, 145)),
),
),
),
TextField(
decoration: InputDecoration(
labelText: ' Taille de colis',
labelStyle: TextStyle(
color: Color.fromARGB(255, 0, 0, 0),
fontFamily: 'Segoe UI',
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 136, 136, 136)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3, color: const Color(0xffff4848)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),
),
errorBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 66, 125, 145)),
),
),
),
this is my code its work in side padding but i want padding inside text field
im begginner in flutter
this is my code its work in side padding but i want padding inside text field im begginner in flutter
this is my code its work in side padding but i want padding inside text field im begginner in flutter
\],
),
),
What do you mean by padding inside TextField? The padding inside the TextFields looks right to me, maybe you were trying to say that you want to add some kind of spacing between the TextFields? If that's the case, you have multiple options, I find this one the simplest one:
TextField(...)
SizedBox(height: 12)
TextField(...)
SizedBox(height: 12)
...
You get the idea...
I would also recommend you to extract those TextField widgets into a private widget that receives X number of parameters, this way you avoid repeating so much code and everything would look cleaner and more readable.
Something like:
class _CustomTextField extends StatelessWidget {
const _CustomTextField({
Key? key,
required this.label,
}) : super(key: key);
final String label;
#override
Widget build(BuildContext context) {
return TextField(
decoration: InputDecoration(
labelText: label,
labelStyle: const TextStyle(
color: Color.fromARGB(255, 5, 5, 5),
fontFamily: 'Segoe UI',
),
enabledBorder: const OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 136, 136, 136),
),
borderRadius: BorderRadius.all(Radius.circular(40)),
),
focusedBorder: const OutlineInputBorder(
borderSide: BorderSide(width: 3, color: Color(0xffff4848)),
borderRadius: BorderRadius.all(Radius.circular(40)),
),
errorBorder: const OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 66, 125, 145),
),
),
),
);
}
}
And then you use it like this:
_CustomTextField(label: 'Label 1')
SizedBox(height: 12)
_CustomTextField(label: 'Label 2')
SizedBox(height: 12)
...
You can even try to add the SizedBox inside the _CustomTextField!
wrap every TextField widget with a Container widget, and specify the margins and padding you want like this :
Container(
margin: EdgeInsets.symmetric(vertical: 10.0), // 10 vertical margin
TextField(
decoration: InputDecoration(
labelText: ' Taille de colis',
labelStyle: TextStyle
color: Color.fromARGB(255, 0, 0, 0),
fontFamily: 'Segoe UI',
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 3,
color: Color.fromARGB(255, 136, 136, 136)),
borderRadius: BorderRadius.all(
Radius.circular(40),
),),),
If you want inside padding in TextField then you can use "contentpadding" inside InputDecoratation(contentPadding : EdgeInseta.all(6))
TextField(
textAlign: TextAlign.left,
decoration: InputDecoration(
hintText: 'Enter Something',
contentPadding: EdgeInsets.all(20.0),
),
)
And you want around of TextField or TextFormField then you can Wrap with Padding Widget example.
Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
autofocus: false,
enableSuggestions: true,
autocorrect: true,
style: const TextStyle(
fontFamily: fontFamilySourceSansPro, color: black, fontSize: 16),
validator: validateCustomerAddress,
controller: _cusAdd2,
focusNode: _nodeCusAdd2,
autovalidateMode: autoValidateMode,
keyboardType: TextInputType.streetAddress,
textInputAction: TextInputAction.next,
decoration: getTextFieldBorderLightGrayDecoration("Address 2*"),
),
);
I'm having these 4 inputs (TextFormFields) , and I want to handle a change that whenver the user changes what is written inside , a function is triggered and updates the sum of another TextFormField.
I thought using the onChanged is the best way to handle these changes , but I'm unable to make it.
I have a TextEditingController that I want to update whenever there is a change in the inputs :
TextEditingController totalDocument;
void _CalculTotal() {
setState(() {
total = total + double.tryParse(widget.controllers.last.text);
totalDocument.text = total.toString();
});
}
These are my inputs inside a class :
class InputRefNomProduit extends StatefulWidget {
final String label, label2, label3, label4;
final String content, content2, content3, content4;
var fieldController = TextEditingController();
var fieldController2 = TextEditingController();
var fieldController3 = TextEditingController();
var fieldController4 = TextEditingController();
final FunctionStringCallback Prix;
FormFieldValidator<String> fieldValidator = (_) {};
InputRefNomProduit(
{this.label,
this.content,
this.label2,
this.content2,
this.label3,
this.content3,
this.label4,
this.content4,
this.fieldController,
this.fieldController2,
this.fieldValidator,
this.fieldController3,
this.fieldController4,
**this.Prix**});
. . .
Expanded(
flex: 3,
child: Container(
width: MediaQuery.of(context).size.width / 3.7,
color: Color.fromARGB(255, 255, 255, 255),
child: TextFormField(
**onChanged: widget.Prix,**
enabled: true,
controller: widget.fieldController4,
validator: widget.fieldValidator,
style: TextStyle(
fontSize: 15.0,
color: Colors.black,
),
decoration: InputDecoration(
contentPadding: EdgeInsets.all(10.0),
hintText: "${widget.content4}",
hintStyle: TextStyle(
color: Color.fromARGB(255, 190, 190, 190),
fontSize: 14),
fillColor: Color.fromARGB(255, 0, 0, 0),
),
),
),
),
The variable Prix is used to get the function _CalculTotal().
This is my sum TextFormField that will hold the total :
SizedBox(
width: 200,
child: Padding(
padding: const EdgeInsets.only(top: 15),
child: TextFormField(
**controller: totalDocument,**
keyboardType: TextInputType.text,
decoration: InputDecoration(
enabled: false,
hintText: '$total',
hintStyle: TextStyle(
fontFamily: 'Montserrat',
fontWeight: FontWeight.w400,
color: Colors.grey.shade400,
),
prefixIcon: Icon(
Icons.attach_money_outlined,
color: Colors.grey.shade400),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 1,
color: Colors.grey.shade200),
borderRadius:
BorderRadius.circular(5),
),
disabledBorder: OutlineInputBorder(
borderSide: BorderSide(
width: 1,
color: Colors.grey.shade200),
borderRadius:
BorderRadius.circular(5),
),
focusedBorder: OutlineInputBorder(
borderRadius:
BorderRadius.circular(5),
borderSide: BorderSide(
color: Colors.grey.shade400,
width: 1,
),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius:
BorderRadius.circular(5),
borderSide: BorderSide(
color: Colors.grey.shade400,
width: 1,
),
),
errorBorder: OutlineInputBorder(
borderRadius:
BorderRadius.circular(5),
borderSide: BorderSide(
color: Colors.grey.shade400,
width: 1,
),
),
contentPadding:
EdgeInsets.fromLTRB(15, 0, 15, 0),
),
),
),
),
Use the addListener() method of your TextEditingController to listen to changes in the TextFormFields where you assigned your TextEditingController as a controller.
Checkout this flutter cookbook article for more details. It clearly explains the difference between setting the onChanged attribute of a TextFormField and using the addListener() of a controller to handle changes in your TextFields.
https://docs.flutter.dev/cookbook/forms/text-field-changes
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,
),
),
);