Ich verwende Flutter und möchte einem Widget einen Rahmen hinzufügen (in diesem Fall ein Text Widget).

Ich habe es versucht TextStyle Und Textaber ich habe nicht gesehen, wie man einen Rahmen hinzufügt.

Sie können die hinzufügen Text Als ein child zu einem Container das hat ein BoxDecoration mit border Eigentum:

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

Hier ist eine erweiterte Antwort. A DecoratedBox ist das, was Sie brauchen, um einen Rahmen hinzuzufügen, aber ich verwende a Container zum bequemen Hinzufügen von Rand und Polsterung.

Hier ist die allgemeine Einrichtung.

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

bei dem die BoxDecoration Ist

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

Rahmenbreite

Diese haben eine Randbreite von 1, 3Und 10 bzw.

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

Randfarbe

Diese haben eine Randfarbe von

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

Code

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

Grenzseite

Diese haben eine Randseite von

• links (3.0), oben (3.0)
• unten (13,0)
• links (blau[100]15,0), oben (blau[300]10.0), rechts (blau[500]5,0), unten (blau[800]3,0)

Code

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

Grenzradius

Diese haben Grenzradien von 5, 10Und 30 bzw.

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

Geht weiter

DecoratedBox/BoxDecoration sind sehr flexibel. Lesen Flutter — BoxDecoration Spickzettel für viele weitere Ideen.

Der beste Weg ist die Verwendung von BoxDecoration()

Vorteil

• Sie können die einstellen Grenze eines Widgets
• Sie können die Grenze festlegen Farbe oder Breite
• Sie können ein einstellen Gerundete Ecke einer Grenze
• Sie können eine hinzufügen Schatten eines Widgets

Nachteil

• BoxDecoration nur mit verwenden Container Widget, also möchten Sie Ihr Widget einschließen Container()

Beispiel

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

Sie können das Widget mit umschließen DecoratedBox die Dekoration bietet :

Widget textDecoration(String text){
    return DecoratedBox(
        decoration: BoxDecoration(
            border: Border.all(
                color: Colors.red,
                width: 10,
            ),
        ),
        child: Text(text)
    );
}

Wie in der Dokumentation angegeben, bevorzugt Flutter die Komposition gegenüber den Parametern.

Meistens sucht man keine Eigenschaft, sondern einen Wrapper (und manchmal ein paar Helfer/”Baumeister”).

Für Grenzen, die Sie wollen DecoratedBoxdie eine hat decoration Eigentum, das Grenzen definiert; aber auch Hintergrundbilder oder Schatten.

Alternativ können Sie, wie Aziza sagte, verwenden Container. Welches ist die Kombination von DecoratedBox, SizedBox und ein paar andere nützliche Widgets.

Hier, als die Text Widget hat keine Eigenschaft, mit der wir eine definieren können border, sollten wir es mit einem Widget umschließen, mit dem wir eine Grenze definieren können. Es gibt mehrere Lösungen. Aber die beste Lösung ist die Verwendung von BoxDekoration im Container Widget.

Warum sollten Sie sich für BoxDecoration entscheiden?

Denn BoxDecoration bietet mehr Anpassungsmöglichkeiten wie die Möglichkeit, Folgendes zu definieren:

Zuerst die border und definiere auch:

• Randfarbe
• Rahmenbreite
• Grenzradius
• Form
• und mehr …

Ein Beispiel:

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

Ausgang:

Zusammenfassung

Ich habe versucht, alle wichtigen Möglichkeiten bei der Verwendung zusammenzufassen border In BoxDecoration

Ergebnisse der unten erläuterten Grenzen:

Erklärung

Basic

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

BorderColor, Breite und StrokeAlign

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

Grenze nur auf bestimmter Seite

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

Verschiedene Formen

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

Gekrümmter Randradius

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