Flutter kullanıyorum ve bir parçacığa bir sınır eklemek istiyorum (bu durumda, bir Metin parçacığı).

TextStyle ve Text'i denedim, ancak nasıl kenarlık ekleyeceğimi göremedim.

Ekleyebilir TextFieldbir şekilde childbir karşı Containerbir olduğunu BoxDecorationile bordermülkiyet:

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

İşte genişletilmiş bir cevap. A DecoratedBox, bir sınır eklemeniz gereken şeydir, ancak Containerkenar boşluğu ve dolgu eklemenin rahatlığı için a kullanıyorum .

İşte genel kurulum.

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

nerede BoxDecorationolduğunu

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

Kenarlık genişliği

Bu bir sınır genişliği 1, 3ve 10sırasıyla.

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

Sınır rengi

Bunların kenarlık rengi var

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

kod

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

Sınır tarafı

Bunların bir sınır tarafı var

• sol (3.0), üst (3.0)
• alt (13.0)
• sol (mavi [100], 15.0), üst (mavi [300], 10.0), sağ (mavi [500], 5.0), alt (mavi [800], 3.0)

kod

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

Sınır yarıçapı

Bunlar sınır yarıçapına sahiptir 5, 10ve 30sırasıyla.

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

Devam ediyor

DecoratedBox/ BoxDecorationçok esnektir. Daha birçok fikir için Flutter - BoxDecoration Hile Sayfasını okuyun .

Dokümantasyonda belirtildiği gibi flutter, parametrelere göre kompozisyonu tercih eder. Çoğu zaman aradığınız şey bir mülk değil, bunun yerine bir paketleyicidir (ve bazen birkaç yardımcı / "inşaatçı")

Sınırlar için istediğiniz şey DecoratedBox,decoration sınırları belirleyen özelliğe ; aynı zamanda arka plan resimleri veya gölgeler.

Alternatif olarak @Aziza'nın dediği gibi kullanabilirsiniz Container. Hangi birleşimidir DecoratedBox, SizedBoxve birkaç diğer yararlı widget'lar.

En iyi yol BoxDecoration () kullanmaktır

avantaj

• Sen ayarlayabilirsiniz sınırWidget'ın
• Kenarlık Rengi veya Genişliği ayarlayabilirsiniz
• Yuvarlak köşe ayarlayabilirsiniz sınırın
• Widget'ın gölgesini ekleyebilirsiniz

dezavantaj

• BoxDecorationsadece Containerwidget ile kullanın, böylece widget'ınızıContainer()
  
  

Misal

    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 () kullanmak, kenarlığı göstermenin en iyi yoludur.

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

Tam formatı da buradan görüntüleyebilirsiniz

Widget'ınızı içermek için Kapsayıcıyı kullanabilirsiniz:

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

Boxdercoration içeren bir kap kullanın.

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