Ответ 1

Вы можете добавить TextField как child к Container, который имеет свойство BoxDecoration со свойством border:

new Container(
  margin: const EdgeInsets.all(15.0),
  padding: const EdgeInsets.all(3.0),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blueAccent)
  ),
  child: Text("My Awesome Border"),
)

Ответ 2

Вот расширенный ответ. DecoratedBox - это то, что вам нужно, чтобы добавить рамку, но я использую Container для удобства добавления полей и отступов.

Вот общая настройка.

Widget myWidget() {
  return Container(
    margin: const EdgeInsets.all(30.0),
    padding: const EdgeInsets.all(10.0),
    decoration: myBoxDecoration(), //             <--- BoxDecoration here
    child: Text(
      "text",
      style: TextStyle(fontSize: 30.0),
    ),
  );
}

где BoxDecoration

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(),
  );
}

Ширина рамки

Они имеют ширину границы 1, 3 и 10 соответственно.

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 1, //                   <--- border width here
    ),
  );
}

Цвет границы

Они имеют цвет границы

• Colors.red
• Colors.blue
• Colors.green

Код

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      color: Colors.red, //                   <--- border color
      width: 5.0,
    ),
  );
}

Пограничная сторона

У них есть пограничная сторона

• левый (3,0), верхний (3,0)
• низ (13,0)
• слева (синий [100], 15,0), сверху (синий [300], 10,0), справа (синий [500], 5,0), снизу (синий [800], 3,0)

Код

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border(
      left: BorderSide( //                   <--- left side
        color: Colors.black,
        width: 3.0,
      ),
      top: BorderSide( //                    <--- top side
        color: Colors.black,
        width: 3.0,
      ),
    ),
  );
}

Радиус границы

Они имеют граничные радиусы 5, 10 и 30 соответственно.

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.all(
        Radius.circular(5.0) //                 <--- border radius here
    ),
  );
}

Продолжается

DecoratedBox/ BoxDecoration очень гибкие. Читайте Flatter - Шпаргалку BoxDecoration для многих других идей.

Ответ 3

Как указано в документации, флаттер предпочитает состав по параметрам. В большинстве случаев то, что вы ищете, не является свойством, а вместо этого оболочкой (а иногда и несколькими помощниками/ "строителем" )

Для границ требуется DecoratedBox, у которого есть свойство decoration, которое определяет границы; но и фоновые изображения или тени.

В качестве альтернативы, как @Aziza сказал, вы можете использовать Container. Какая комбинация DecoratedBox, SizedBox и несколько других полезных виджетов.

Ответ 4

Как получить скошенный прямоугольник с границами?