Wie füge ich einem Widget in Flutter einen Rahmen hinzu?

147

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.

Seth Ladd
quelle

Antworten:

300

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

Geben Sie hier die Bildbeschreibung ein

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
quelle
201

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.

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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

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

Randfarbe

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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.

Suragch
quelle
Weiß jemand, wie man BorderSide mit BorderRadius benutzt?
HaSnen Tai
@ HaSnenTai Hast du eine Lösung gefunden? In meinem Design muss ich Rand unten mit pillenartiger Form geben. Wie kann ich das erreichen?
Robert Williams
@ RobertWilliams, ich würde ein benutzerdefiniertes Zeichen-Widget verwenden.
Suragch
@Suragch Das Widget ist Text, der einen starken (pillenförmigen) Rand benötigt. Die Breite des Text-Widgets ist nicht festgelegt. Muss ich für die Verwendung eines benutzerdefinierten Zeichnungs-Widgets keine Fixeigenschaften angeben?
Robert Williams
@ RobertWilliams, ich weiß nicht genau, was Sie versuchen zu tun. Ich würde eine neue Frage mit einer Illustration und einer Erklärung darüber eröffnen, was derzeit nicht funktioniert. Fühlen Sie sich frei, von hier aus darauf zu verlinken.
Suragch
10

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.

Rémi Rousselet
quelle
7

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

Geben Sie hier die Bildbeschreibung ein

Sanjayrajsinh
quelle
1

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

Arshia Mehta
quelle
0

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

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

Verwenden Sie einen Behälter mit Boxdercoration.

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