Я використовую Flutter, і я хотів би додати рамку до віджета (у цьому випадку віджет Text).

Я спробував TextStyle і Text, але не зрозумів, як додати межу.

Ви можете додати 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"),
)

Ось розгорнута відповідь. A 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дуже гнучкі. Прочитайте Flutter - BoxDecoration Cheat Sheet для багатьох інших ідей.

Як зазначено в документації, трепет віддає перевагу композиції над параметрами. Більшу частину часу те, що ви шукаєте, - це не власність, а натомість обгортка (а іноді й кілька помічників / "будівельник")

Для кордонів потрібне те DecoratedBox, що має decorationвластивість, яка визначає межі; але також фонові зображення або тіні.

Або, як сказав @Aziza, ви можете використовувати Container. Яка комбінація DecoratedBox, SizedBoxі кілька інших корисних віджетів.

Найкращим способом є використання BoxDecoration ()

Перевага

• Ви можете встановити рамку віджета
• Ви можете встановити колір рамки або ширину
• Ви можете встановити Закруглений кут кордону
• Ви можете додати віджет Shadow

Недоліки

• BoxDecorationвикористовувати лише з Containerвіджетом, щоб ви хотіли завершити свій віджетContainer()
  
  

Приклад

    Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(10),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.orange,
        border: Border.all(
            color: Colors.pink[800],// set border color
            width: 3.0),   // set border width
        borderRadius: BorderRadius.all(
            Radius.circular(10.0)), // set rounded corner radius
        boxShadow: [BoxShadow(blurRadius: 10,color: Colors.black,offset: Offset(1,3))]// make rounded corner of border
      ),
      child: Text("My demo styling"),
    )

Використання BoxDecoration () - найкращий спосіб показу межі.

Container(
  decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 4,
  )),
  child: //Your child widget
),

Ви також можете переглянути повний формат тут

Ви можете використовувати Container, щоб містити ваш віджет:

Container(
  decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 1,
  )),
  child: Text()
),

Використовуйте контейнер з Boxdercoration.

 BoxDecoration(
    border: Border.all(
      width: 3.0
    ),
    borderRadius: BorderRadius.circular(10.0)
  );