Bagaimana cara menambahkan perbatasan ke widget di Flutter?

151

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.

Seth Ladd
sumber

Jawaban:

304

Anda dapat menambahkan TextFieldas sebagai childke Containeryang memiliki properti BoxDecorationwith border:

masukkan deskripsi gambar di sini

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"),
)
aziza
sumber
206

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.

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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

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

Warna perbatasan

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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

masukkan deskripsi gambar di sini

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.

Suragch
sumber
Adakah yang tahu cara menggunakan BorderSide dengan BorderRadius?
HaSnen Tai
@ HaaNenTai Apakah Anda menemukan solusi? Dalam desain saya, saya perlu memberikan dasar perbatasan dengan bentuk seperti pil. Bagaimana saya bisa mencapai ini?
Robert Williams
@RobertWilliams, saya akan menggunakan widget menggambar khusus.
Suragch
@ Suragch Widget adalah Teks yang membutuhkan batas (berbentuk pil) yang kuat. Lebar widget teks tidak tetap. Untuk menggunakan widget menggambar khusus, apakah saya tidak perlu menyediakan properti perbaikan?
Robert Williams
@RobertWilliams, saya tidak tahu persis apa yang Anda coba lakukan. Saya akan membuka pertanyaan baru dengan ilustrasi dan penjelasan tentang apa yang saat ini tidak berfungsi. Silakan tautkan dari sini.
Suragch
10

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.

Rémi Rousselet
sumber
7

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

masukkan deskripsi gambar di sini

Sanjayrajsinh
sumber
1

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

Arshia Mehta
sumber
0

Anda dapat menggunakan Kontainer untuk memuat widget Anda:

Container(
  decoration: BoxDecoration(
    border: Border.all(
    color: Color(0xff000000),
    width: 1,
  )),
  child: Text()
),
竭 智 Dan
sumber
-1

Gunakan wadah dengan Boxdercoration.

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