Tôi đang sử dụng Flutter và tôi muốn thêm đường viền vào một widget (trong trường hợp này là widget Text).

Tôi đã thử TextStyle và Text, nhưng tôi không thấy cách thêm viền.

Bạn có thể thêm TextFieldnhư một childmột Containermà có một BoxDecorationvới borderbất động sản:

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

Đây là một câu trả lời mở rộng. A DecoratedBoxlà những gì bạn cần để thêm một đường viền, nhưng tôi đang sử dụng một Containerđể thuận tiện cho việc thêm lề và phần đệm.

Đây là thiết lập chung.

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

nơi đó BoxDecorationlà

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

Chiều rộng biên giới

Những có chiều rộng biên giới 1, 3và 10tương ứng.

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

Màu viền

Những cái này có màu viền

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

Mã

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

Phía biên giới

Những cái này có một biên giới của

• trái (3.0), đầu (3.0)
• dưới cùng (13,0)
• trái (xanh lam [100], 15.0), trên cùng (xanh lam [300], 10.0), phải (xanh lam [500], 5.0), dưới cùng (xanh lam [800], 3.0)

Mã

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

Bán kính biên giới

Những có bán kính biên giới 5, 10và 30tương ứng.

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

Đang xảy ra

DecoratedBox/ BoxDecorationrất linh hoạt. Đọc Flutter - BoxDecoration Cheat Sheet để biết thêm nhiều ý tưởng.

Như đã nêu trong tài liệu, flutter thích thành phần hơn các tham số. Hầu hết thời gian những gì bạn đang tìm kiếm không phải là một tài sản, mà thay vào đó là một trình bao bọc (và đôi khi là một vài người trợ giúp / "người xây dựng")

Đối với đường viền những gì bạn muốn là DecoratedBox, có một thuộc decorationtính xác định đường viền; mà còn hình nền hoặc bóng.

Hoặc như @Aziza nói, bạn có thể sử dụng Container. Đó là sự kết hợp của DecoratedBox, SizedBoxvà một vài vật dụng hữu ích khác.

Cách tốt nhất là sử dụng BoxDecoration ()

Lợi thế

• Bạn có thể đặt đường viền của widget
• Bạn có thể đặt Màu viền hoặc Chiều rộng
• Bạn có thể đặt Góc tròn của đường viền
• Bạn có thể thêm Shadow of widget

Bất lợi

• BoxDecorationchỉ sử dụng với Containerwidget để bạn muốn bọc widget của mìnhContainer()
  
  

Thí dụ

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

Sử dụng BoxDecoration () là cách tốt nhất để hiển thị đường viền.

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

Bạn cũng có thể xem định dạng đầy đủ ở đây

Bạn có thể sử dụng Container để chứa widget của mình:

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

Sử dụng một container với Boxdercoration.

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