multiple text fields in a row with padding

Question

I want to create a row with multiple texts filed side by side. adding text fileds inside row widget caused errors so I google the problem and found a solution which uses Flexible widget for putting text fields inside a row and It worked perfectly, however when I tried to add padding to text filed in order to have vision of multiple texts filed, it won't work here is my code:

new Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: <Widget>[
        new Flexible(
          child: new TextField(
              decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(10)
              )
          ),
        ),
        new Flexible(
          child: new TextField(
              decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(10)
              )
          ),
        ),
        new Flexible(
          child: new TextField(
              decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(10)
              )
          ),
        ),
      ],
),

I want to have something like picutre bellow:

how can I add some padding to text filed. And I wonder is there any way that I achieve this with one text filed?

Answer 1

You could add SizedBox in between. The TextField tries to get the maximum size when you use the Flexible so no space is left in the middle, even if you use spaceBetween.

new Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    new Flexible(
      child: new TextField(
          decoration: InputDecoration(
              contentPadding: EdgeInsets.all(10)
          )
      ),
    ),
    SizedBox(width: 20.0,),
    new Flexible(
      child: new TextField(
          decoration: InputDecoration(
              contentPadding: EdgeInsets.all(10)
          )
      ),
    ),
    SizedBox(width: 20.0,),
    new Flexible(
      child: new TextField(
          decoration: InputDecoration(
              contentPadding: EdgeInsets.all(10)
          )
      ),
    ),
  ],
),

You could also use Padding around the TextField.

new Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    new Flexible(
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: new TextField(
            decoration: InputDecoration(
                contentPadding: EdgeInsets.all(10)
            )
        ),
      ),
    ),
    new Flexible(
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: new TextField(
            decoration: InputDecoration(
                contentPadding: EdgeInsets.all(10)
            )
        ),
      ),
    ),
    new Flexible(
      child: Padding(
        padding: const EdgeInsets.all(20.0),
        child: new TextField(
            decoration: InputDecoration(
                contentPadding: EdgeInsets.all(10)
            )
        ),
      ),
    ),
  ],
),