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
\],
),
),
CodePudding user response：
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!
CodePudding user response：
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),
),),),