Sto usando Flutter e vorrei aggiungere un bordo a un widget (in questo caso, un widget Testo).

Ho provato TextStyle e Text, ma non ho visto come aggiungere un bordo.

È possibile aggiungere TextFieldun as childa a Containerche ha una proprietà BoxDecorationwith border:

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

Ecco una risposta estesa. A DecoratedBoxè ciò di cui hai bisogno per aggiungere un bordo, ma sto usando a Containerper comodità di aggiungere margine e riempimento.

Ecco la configurazione generale.

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

dove il BoxDecorationè

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

Larghezza del bordo

Questi hanno una larghezza di confine 1, 3e 10rispettivamente.

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

Colore del bordo

Questi hanno un colore del bordo di

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

Codice

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

Bordo laterale

Questi hanno un lato di confine

• sinistra (3.0), in alto (3.0)
• in basso (13,0)
• sinistra (blu [100], 15.0), superiore (blu [300], 10.0), destra (blu [500], 5.0), inferiore (blu [800], 3.0)

Codice

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

Raggio di confine

Questi hanno raggi confine 5, 10e 30, rispettivamente.

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

Continua

DecoratedBox/ BoxDecorationsono molto flessibili. Leggi Flutter - Box Cheat Sheet per molte altre idee.

Come indicato nella documentazione, il flutter preferisce la composizione ai parametri. Il più delle volte ciò che stai cercando non è una proprietà, ma piuttosto un wrapper (e talvolta alcuni helper / "costruttore")

Per i bordi ciò che vuoi è DecoratedBox, che ha una decorationproprietà che definisce i bordi; ma anche immagini di sfondo o ombre.

In alternativa, come ha detto @Aziza, puoi usare Container. Che è la combinazione di DecoratedBox, SizedBoxe pochi altri widget utili.

Il modo migliore è usare BoxDecoration ()

Vantaggio

• È possibile impostare il bordo del widget
• È possibile impostare Colore o Larghezza del bordo
• È possibile impostare l' angolo arrotondato del bordo
• È possibile aggiungere Ombra del widget

Svantaggio

• BoxDecorationutilizzare solo con il Containerwidget, quindi si desidera avvolgere il widgetContainer()
  
  

Esempio

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

L'uso di BoxDecoration () è il modo migliore per mostrare il bordo.

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

Puoi anche visualizzare il formato completo qui

Puoi usare Container per contenere il tuo widget:

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

Usa un contenitore con Boxdercoration.

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