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

Ich habe TextStyle und Text ausprobiert, aber ich habe nicht gesehen, wie man einen Rahmen hinzufügt.

Sie können das TextFieldals a childzu einem hinzufügen Container, das eine BoxDecorationwith- borderEigenschaft hat:

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

Hier ist eine erweiterte Antwort. A DecoratedBoxist das, was Sie brauchen, um einen Rand hinzuzufügen, aber ich verwende a, Containerum das Hinzufügen von Rand und Polsterung zu vereinfachen.

Hier ist das allgemeine Setup.

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

wo das BoxDecorationist

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

Rahmenbreite

Diese haben eine Rahmenbreite von 1, 3und 10sind.

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

Randradius

Diese haben Grenzradien 5, 10und 30jeweils.

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

Weiter geht's

DecoratedBoxIch BoxDecorationbin sehr flexibel. Lesen Sie Flutter - BoxDecoration Cheat Sheet für viele weitere Ideen.

Wie in der Dokumentation angegeben, bevorzugen Flattern die Zusammensetzung gegenüber Parametern. Meistens ist das, wonach Sie suchen, keine Eigenschaft, sondern ein Wrapper (und manchmal ein paar Helfer / "Builder").

Für Grenzen möchten Sie DecoratedBoxeine decorationEigenschaft, die Grenzen definiert. aber auch Hintergrundbilder oder Schatten.

Alternativ, wie @Aziza sagte, können Sie verwenden Container. Welches ist die Kombination aus DecoratedBox, SizedBoxund ein paar andere nützlichen Widgets.

Am besten verwenden Sie BoxDecoration ()

Vorteil

• Sie können den Rand des Widgets festlegen
• Sie können die Rahmenfarbe oder -breite festlegen
• Sie können eine abgerundete Ecke des Rahmens festlegen
• Sie können Shadow of Widget hinzufügen

Nachteil

• BoxDecorationNur mit ContainerWidget verwenden, damit Sie Ihr Widget einbinden könnenContainer()
  
  

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

Die Verwendung von BoxDecoration () ist der beste Weg, um Rahmen anzuzeigen.

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

Sie können auch Vollformat sehen hier

Sie können Container verwenden, um Ihr Widget zu enthalten:

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

Verwenden Sie einen Behälter mit Boxdercoration.

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