Flutter how to set margin for particular widget in a form

user_8281996 0
Viewed 13214

// here is my main.dart file

class UserRegistrationPage extends StatefulWidget {
     @override
  UserRegistrationPageState createState() => UserRegistrationPageState();
 }

 class UserRegistrationPageState extends State<UserRegistrationPage>{

   @override
     Widget build(BuildContext context) {
    return MaterialApp(
      home: new Scaffold(
        body: new SingleChildScrollView(
          child: new Container(
            child: new Form(
              child: formUi(),
            ),
          ),
        ),
      ),
        );
  }
  Widget formUi(){
    return new Column(
       children: <Widget>[
        new Image(
                image: new AssetImage("assets/bgtopbar.png"),
                fit: BoxFit.cover,
        ),
         new TextFormField(
                  //  margin: new EdgeInsets.all(15.0),
           decoration: new InputDecoration(hintText: 'Mobile Number'),
           keyboardType: TextInputType.phone,
           maxLength: 10,
         ),
         new TextFormField(
           decoration: new InputDecoration(hintText: 'First Name'),
           maxLength: 20, 
         ),
         new TextFormField(
           decoration: new InputDecoration(hintText: 'Last Name'),
           maxLength: 20,
         ),
         new TextFormField(
           decoration: new InputDecoration(hintText: 'Gender'),
           maxLength: 10,
         ),
       ],
    );
  }

I want to set margin only the edit text field in the form i don't want to set for image.How can i give margin for individual widget in a form.i know this question is very simple but i am new to flutter so help me to sort out this problem

flutter
2 Answers

Create below method and set margin as you want

Widget allTextFieldWithMargin(){
    return Container(
    margin: new EdgeInsets.all(15.0), // Or set whatever you want 
    child: Column(
        children: <Widget>[
          new TextFormField(
            //  margin: new EdgeInsets.all(15.0),
            decoration: new InputDecoration(hintText: 'Mobile Number'),
            keyboardType: TextInputType.phone,
            maxLength: 10,
          ),
          new TextFormField(
            decoration: new InputDecoration(hintText: 'First Name'),
            maxLength: 20,
          ),
          new TextFormField(
            decoration: new InputDecoration(hintText: 'Last Name'),
            maxLength: 20,
          ),
          new TextFormField(
            decoration: new InputDecoration(hintText: 'Gender'),
            maxLength: 10,
          ),
        ],
      ),
    );
   }

And call allTextFieldWithMargin method like belwo

 Widget formUi(){
    return new Column(
      children: <Widget>[
        new Image(
          image: new AssetImage("assets/bgtopbar.png"),
          fit: BoxFit.cover,
        ),
       allTextFieldWithMargin()
      ],
    );
  }
user_83063900

You can wrap it in Container

Container(
  margin: EdgeInsets.all(4.0),
  child: yourWidget,
);

UPD:

If you want to set only horizontal margins - you can organize widgets like:

Column
  Image
  Container
    Column
      TextFormField
      TextFormField
      TextFormField
      TextFormField
user_71308200
Related