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

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

Я хотел бы добавить немного места для ч/б поиска по текстовому полю и кнопке. Вот как выглядит управляющая часть моего кода. Я пытаюсь стилизовать свой 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,

                        ],
                    ),
                ),
        );

Ответы

Ответ 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
      ),
    ),
  );
}

Ответ 2

Почему увеличение 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()),
    ),
  ),
);

Ответ 3

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

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....");},
                ),
            ],
        );

Ответ 4

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

mainAxisAlignment : MainAxisAlignment.spaceAround

Или же

mainAxisAlignment : MainAxisAlignment.spaceBetween

Ответ 5

Просто используйте

EdgeInsets.fromLTRB

Например:

padding: EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0),