Как мне добавить рамку к виджету во Флаттере?

Question

Я использую Flutter, и я хотел бы добавить границу к виджету (в данном случае, текстовый виджет).

Я пробовал TextStyle и Text, но я не видел, как добавить границу.

Спасибо!

Answer 1

Вы можете добавить TextField как child к Container это имеет BoxDecoration с border имущество:

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

Answer 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 для многих других идей.

Answer 3

Лучший способ - использовать BoxDecoration()

Преимущество

• Вы можете установить границу виджета
• Вы можете установить цвет или ширину границы
• Вы можете установить закругленный угол границы
• Вы можете добавить Тень виджета

Недостаток

• 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"),
    )

Answer 4

вы можете обернуть этот виджет в DecoratedBox, который в этом случае будет украшать этот виджет

Виджет textDecoration (текст строки) {return DecoratedBox (украшение: BoxDecoration (граница: Border.all (цвет: Colors.red, ширина: 10,),), дочерний элемент: текст (текст));}

Answer 5

Краткое содержание

Я попытался обобщить все важные возможности при использованииborderвBoxDecoration.

Результаты ниже объясненных границ:

---

Объяснение

Базовый

        Container(
    decoration: BoxDecoration(border: Border.all()),
    child: const Text("Text"),
 ),    

---

BorderColor, ширина и выравнивание обводки

      Container(
   decoration: BoxDecoration(
   border: Border.all(
       width: 4,
       color: Colors.green,
       strokeAlign: BorderSide.strokeAlignCenter)),
   child: const Text("Text"),
),

---

Граница только с определенной стороны

            Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Container(
            decoration: const BoxDecoration(
                border: Border(top: BorderSide(width: 2))),
            child: const Text("Text"),
          ),
          Container(
            decoration: const BoxDecoration(
                border: Border(bottom: BorderSide(width: 2))),
            child: const Text("Text"),
          ),
          Container(
            decoration: const BoxDecoration(
                border: Border(
                    top: BorderSide(width: 2),
                    bottom: BorderSide(width: 4))),
            child: const Text("Text"),
          ),
        ],
      ),

---

Различные формы

            Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
                border: Border.all(),
                shape: BoxShape.circle),
            child: const Text("Text"),
          ),
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
              border: Border.all(),
              borderRadius: BorderRadius.circular(10),
            ),
            child: const Text("Text"),
          ),
        ],
      ),

---

Изогнутый радиус границы

          Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
                border: Border.all(),
                borderRadius: const BorderRadius.horizontal(
                    left: Radius.circular(5), right: Radius.circular(20))
                ),
            child: const Text("Text"),
          ),
          Container(
            padding: const EdgeInsets.all(10),
            decoration: BoxDecoration(
                border: Border.all(),
                borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(10),
                    bottomRight: Radius.circular(20))),
            child: const Text("Text"),
          ),
        ],
      ),

Answer 6

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

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

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

Answer 7

Здесь, поскольку виджет Text не имеет свойства, которое позволяет нам определять a, мы должны обернуть его виджетом, который позволяет нам определять границу. Есть несколько решений.
Но лучшим решением является использование BoxDecoration в виджете « Контейнер» .

Почему стоит выбрать BoxDecoration?
Поскольку BoxDecoration предлагает больше настроек, например возможность определить: во-
первых, border а также определить:

• цвет границы
• ширина рамки
• радиус границы
• форма
• и больше ...

Пример :

         Container(
     child:Text(' Hello Word '),
     decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(
                color: Colors.red ,
                width: 2.0 ,
              ),
          borderRadius: BorderRadius.circular(15),
            ),
          ),

Выход :

Answer 8

Оберните этот виджет контейнером

      Container(
        margin: const EdgeInsets.all(30.0),
        padding: const EdgeInsets.all(10.0),
        decoration: BoxDecoration(border: Border.all(
        color: Colors.black,
        width: 1,
      ),
    ), 
        child: Text(
          "text",
          style: TextStyle(fontSize: 30.0),
        ),
      );

Answer 9

Приведенные выше ответы также верны, но если вы хотите добавить несколько границ в один и тот же виджет, вы можете установить это

      Container(
      child: const Center(
        child: Text(
          'This is your Container',
        ),
      ),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(10),
        color: Colors.white,
        boxShadow: const [
          BoxShadow(color: Colors.green, spreadRadius: 8),
          BoxShadow(color: Colors.yellow, spreadRadius: 5),
        ],
      ),
      height: 50,
    )

Answer 10

Вы можете использовать Контейнер для размещения своего виджета:

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

Answer 11

Используйте емкость с Boxdercoration.

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

Answer 12

Использование BoxDecoration() - лучший способ показать границу.

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

Вы также можете просмотреть полный формат здесь

Answer 13

На случай, если кому-то нужен текст с контуром / рамкой или несколько границ.

Вы можете попробовать это:

https://pub.dev/packages/outlined_text

ДЕМО

Answer 14

Вы можете добиться закругления нижнего угла с тремя боковыми границами.

      Stack(
children: [
  Container(
    decoration: BoxDecoration(
      border: Border.all(color: Colors.red, width: 2),
      borderRadius: const BorderRadius.only(
        topLeft: Radius.zero,
        topRight: Radius.zero,
        bottomLeft: Radius.circular(20),
        bottomRight: Radius.circular(20),
      ),
    ),
    child: Padding(
      padding: const EdgeInsets.all(20.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SizedBox(
            height: 1,
          ),
          Text("Dummy text"),
          const SizedBox(
            height: 10,
          ),
        ],
      ),
    ),
  ),
  Padding(
    padding: const EdgeInsets.only(left: 2, right: 2),
    child: Container(
      color: AppColors.highLighterBg,
      width: size.width,
      height: 10,
    ),
  )
],

);

Answer 15

Вы можете использовать этот метод для добавления цвета границы контейнера.

      Container(
      height: height * 0.06,
      width: width,
      alignment: Alignment.center,
      decoration: BoxDecoration(
        border: Border.all(
          color: primaryColor,
        ),
        borderRadius: BorderRadius.circular(10),
      ),
      child: Text(
        "data",
        style: const TextStyle(
          fontWeight: FontWeight.bold
        ),
      ),
    );

Answer 16

Закругленный угол/граница с нижней тенью

      Container(
 // child it's depend on your requirement
  child: const Center(
    child: Text(
      'This is your Container',
    ),
  ),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.white,
  boxShadow: <BoxShadow>[
       // shadow color and radius
        BoxShadow(
            color: Colors.black54,
            blurRadius: 15.0,
            offset: Offset(0.0, 0.75)
        )
      ],
  ),
  // according your height ex. 50
  height: 50,
);

Answer 17

Здесь, поскольку виджет Text не имеет свойства, которое позволяет нам определять border, мы должны обернуть его виджетом, который позволяет нам определять границу. Есть несколько решений.
Но лучшим решением является использование BoxDecoration в виджете " Контейнер".

Почему стоит выбрать BoxDecoration?
Поскольку BoxDecoration предлагает больше настроек, например возможность определить: во-
первых, border а также определить:

• цвет границы
• ширина рамки
• радиус границы
• форма
• и больше...

Пример:

          Container(
     child:Text(' Hello Word '),
     decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(
                color: Colors.red ,
                width: 2.0 ,
              ),
          borderRadius: BorderRadius.circular(15),
            ),
          ),

Вывод:

Answer 18

Попробуйте следующий код:

      Container(
  margin: margin,
  padding: padding,
  decoration: BoxDecoration(
    border: Border.all(
      color: color,
      width: width,
    ),
  ),
  child: Text(
    data,
    style: TextStyle(fontSize: 30.0),
  ),
),

Answer 19

Стиль границы текста:

      Stack(
  children: <Widget>[
    // Stroked text as border.
    Text(
      'Greetings, planet!',
      style: TextStyle(
        fontSize: 40,
        foreground: Paint()
          ..style = PaintingStyle.stroke
          ..strokeWidth = 6
          ..color = Colors.blue[700]!,
      ),
    ),
    // Solid text as fill.
    Text(
      'Greetings, planet!',
      style: TextStyle(
        fontSize: 40,
        color: Colors.grey[300],
      ),
    ),
  ],
)

Answer 20

Если вы хотите добавить границу к какому-либо тексту контейнера, вы можете легко сделать это, применив BoxDecoration к контейнеру.

код:

      Container(
  decoration: BoxDecoration(
    border: Border.all(
      color: Colors.redAccent,
      width: 1,
    ),
  ),
  child: Text('Some Text'),
);

Answer 21

используйте виджет «Текст» внутри контейнера и используйте украшение для оформления текста: BoxDecoration(граница: Border.all(цвет: цвет (0xff000000), ширина: 1,)),

Answer 22

Да, для этого есть разные подходы. Один из них: заверните его в контейнер. И используйте украшение коробки, как это.

      Container(
  padding: const EdgeInsets.all(16.0),
  decoration: BoxDecoration(
    border: Border.all(width: 5, color: Colors.red),
    borderRadius: BorderRadius.all(Radius.circular(50)),
  ), 
  child: const Text(
    "Box decoration",
    style: TextStyle(fontSize: 34.0),
  ),
)

Answer 23

Есть несколько способов добавить границу к виджету Flutter. Самый простой способ - поместить ваш виджет в DecoratedBox. Однако виджет «Контейнер» также имеет встроенный DecoratedBox.

Answer 24

Использование BoxDecoration - лучший и самый простой способ

      Container(
     child:Text(' Hello Word '),
     decoration: BoxDecoration(
          color: Colors.yellow,
          border: Border.all(
                color: Colors.red ,
                width: 2.0 ,
              ),
          borderRadius: BorderRadius.circular(15),
            ),
          ),