Как добавить поля в мой виджет? Понимание эффекта EdgeInsets

Question

Я пытаюсь обернуть голову вокруг размещения пользовательского интерфейса во Флаттере. Так что у меня сейчас есть что-то похожее на это

Я бы хотел добавить немного места для ч / б поиска по текстовому полю и кнопке. Вот как выглядит управляющая часть моего кода. Я пытаюсь стилизовать мой textFieldSearchBox, чтобы он имел небольшое поле справа, я пытался увеличить вставки Edge, но, похоже, он увеличивает размер TextField. Не знаю, почему? Я знаю, что мог бы добавить элемент отступа после TextField, но я хотел бы знать, каковы мои другие варианты. Почему увеличение EdgeInsets в оформлении textFieldSearchBox увеличивает размер текстового поля? Моя идеальная ситуация - добавить поля вокруг всех границ этого текстового поля (LTRB). Есть предложения?

TextField textFieldSearchBox = new TextField(
            keyboardType: TextInputType.text,
            controller: filterController,
            autofocus: false,
            decoration: new InputDecoration(
                contentPadding: new EdgeInsets.fromLTRB(20.0, 10.0, 100.0, 10.0),
                border:
                new OutlineInputBorder(borderRadius: BorderRadius.only()),
            ),
        );

    var optionRow = new Row(
            children: <Widget>[
                new Expanded(child:textFieldSearchBox),
                searchButton,
                new IconButton(
                    icon: new Icon(Icons.filter),
                    onPressed: (){print("Called....");},
                ),
            ],
        );

    return new Scaffold(
                appBar: new AppBar(
                    title: new Text("Title goes here.."),
                    backgroundColor: Colors.lightBlueAccent,
                ),
                body: new Container(
                    child:new Column(
                        children: <Widget>[
                            optionRow,

                        ],
                    ),
                ),
        );

Answer 1

Это более обобщенный ответ для будущих читателей.

Как добавить поля в виджет

В Flutter мы обычно говорим о добавлении Padding вокруг виджета, а не поля. Виджет «Контейнер» имеет параметр margin, но даже он просто оборачивает его дочерним (и любым украшением, которое имеет дочерний элемент) внутренний виджет Padding.

Так что, если у вас есть что-то вроде этого

и вы хотите добавить пространство вокруг виджета, как это

тогда вы просто оберните виджет с помощью Padding. Это легко сделать, если навести курсор на имя виджета и нажать Alt + Enter (или Option + Return на Mac) в Android Studio. Затем выберите Добавить отступ из меню.

, который дает вам что-то вроде этого

Padding(
  padding: const EdgeInsets.all(8.0),
  child: Text(
      "text",
      style: TextStyle(fontSize: 20.0),
    ),
);

Значение EdgeInsets

Когда вы устанавливаете отступы, вы не можете напрямую использовать целое или двойное число. Вы должны указать пространство (количество логических пикселей), используя EdgeInsets. Вы можете установить все стороны одновременно (как мы видели в примере выше), или вы можете установить их по отдельности, например так:

Widget myWidget() {
  return  Padding(
    padding: const EdgeInsets.only(
      left: 40,
      top: 20,
      right: 40,
      bottom: 20,
    ),
    child: Text("text"),
  );
}

Поскольку в этом примере left и right одинаковы, а top и bottom одинаковы, мы можем упростить EdgeInsets до

padding: const EdgeInsets.symmetric(
  horizontal: 40,
  vertical: 20,
),

Использование контейнера для установки отступов и полей

Альтернативный метод - обернуть ваш виджет в Контейнер. Виджет «Контейнер» имеет свойство padding и margin. (Однако это будет необходимо только в том случае, если вы добавляете украшение, например, цвет фона или рамку.)

Widget myWidget() {
  return Container(
    margin: EdgeInsets.all(30),
    padding: EdgeInsets.all(20),
    decoration: BoxDecoration(
        color: Colors.yellow,
        border: Border.all(color: Colors.black),
    ),
    child: Text(
      "Flutter",
      style: TextStyle(
          fontSize: 50.0
      ),
    ),
  );
}

Answer 2

Вы можете поместить компонент внутри отступа, как это

var optionRow = new Row(
            children: <Widget>[
                new Expanded(child:textFieldSearchBox),
                new Padding(padding: new EdgeInsets.all(20.0),child:button,),
                new IconButton(
                    icon: new Icon(Icons.filter),
                    onPressed: (){print("Called....");},
                ),
            ],
        );

Answer 3

Поскольку макет ваших виджетов равен Row, почему бы вам не добавить к нему свойство mainAxisAlignment следующим образом:

mainAxisAlignment : MainAxisAlignment.spaceAround

Или

mainAxisAlignment : MainAxisAlignment.spaceBetween

Answer 4

Почему увеличение EdgeInsets в оформлении textFieldSearchBox увеличивает размер текстового поля?

Поскольку этот отступ используется для внутреннего заполнения. Тот, который вы видите между границами и фактическим текстом.

Моя идеальная ситуация - добавить поля вокруг всех границ этого текстового поля (LTRB). Есть предложения?

Оберните ваш TextField в Padding. Это идеальный способ достичь желаемого макета в флаттере.

final textFieldSearchBox = new Padding(
  padding: const EdgeInsets.only(right: 8.0),
  child: new TextField(
    keyboardType: TextInputType.text,
    controller: filterController,
    autofocus: false,
    decoration: new InputDecoration(
      contentPadding: new EdgeInsets.fromLTRB(20.0, 10.0, 100.0, 10.0),
      border: new OutlineInputBorder(borderRadius: BorderRadius.only()),
    ),
  ),
);