Saya menggunakan Flutter dan saya ingin menambahkan perbatasan ke widget (dalam hal ini, widget Teks).

Saya mencoba TextStyle dan Text, tetapi saya tidak melihat cara menambahkan perbatasan.

Anda dapat menambahkan TextFieldas sebagai childke Containeryang memiliki properti BoxDecorationwith 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"),
)

Ini jawaban yang diperluas. A DecoratedBoxadalah apa yang Anda butuhkan untuk menambahkan batas, tetapi saya menggunakan Containeruntuk kenyamanan menambahkan margin dan bantalan.

Berikut ini adalah pengaturan umum.

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

dimana BoxDecorationadalah

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

Lebar perbatasan

Ini memiliki lebar perbatasan 1, 3dan 10masing-masing.

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

Warna perbatasan

Ini memiliki warna batas

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

Kode

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

Sisi perbatasan

Ini memiliki sisi perbatasan

• kiri (3.0), atas (3.0)
• bawah (13.0)
• kiri (biru [100], 15.0), atas (biru [300], 10.0), kanan (biru [500], 5.0), bawah (biru [800], 3.0)

Kode

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

Jari-jari batas

Ini memiliki jari-jari perbatasan 5, 10dan 30masing-masing.

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

Sedang terjadi

DecoratedBoxSaya BoxDecorationsangat fleksibel. Baca Flutter - BoxDecoration Cheat Sheet untuk lebih banyak ide.

Seperti yang dinyatakan dalam dokumentasi, flutter lebih suka komposisi daripada parameter. Sebagian besar waktu yang Anda cari bukanlah properti, melainkan bungkus (dan terkadang beberapa pembantu / "pembangun")

Untuk perbatasan yang Anda inginkan adalah DecoratedBox, yang memiliki decorationproperti yang mendefinisikan batas; tetapi juga gambar latar belakang atau bayangan.

Atau seperti kata @Aziza, Anda dapat menggunakan Container. Yang merupakan kombinasi dari DecoratedBox, SizedBoxdan beberapa widget bermanfaat lainnya.

Cara terbaik menggunakan BoxDecoration ()

Keuntungan

• Anda dapat mengatur batas widget
• Anda dapat mengatur batas warna atau lebar
• Anda dapat mengatur sudut perbatasan Rounded
• Anda dapat menambahkan Shadow of widget

Kerugian

• BoxDecorationhanya gunakan dengan Containerwidget sehingga Anda ingin membungkus widget AndaContainer()
  
  

Contoh

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

Menggunakan BoxDecoration () adalah cara terbaik untuk menunjukkan batas.

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

Anda juga dapat melihat format lengkap di sini

Anda dapat menggunakan Kontainer untuk memuat widget Anda:

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

Gunakan wadah dengan Boxdercoration.

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