Como adicionar uma borda a um widget no Flutter?

151

Estou usando o Flutter e gostaria de adicionar uma borda a um widget (neste caso, um widget de texto).

Tentei TextStyle e Text, mas não vi como adicionar uma borda.

Seth Ladd
fonte

Respostas:

304

Você pode adicionar as TextFieldcomo childa a Containerque possui uma propriedade BoxDecorationwith border:

insira a descrição da imagem aqui

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
fonte
205

Aqui está uma resposta expandida. A DecoratedBoxé o que você precisa para adicionar uma borda, mas estou usando a Containerpara a conveniência de adicionar margem e preenchimento.

Aqui está a configuração geral.

insira a descrição da imagem aqui

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

onde BoxDecorationestá

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

Largura da borda

insira a descrição da imagem aqui

Estes têm uma largura da borda de 1, 3e, 10respectivamente.

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

Cor da borda

insira a descrição da imagem aqui

Estes têm uma cor de borda de

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

Código

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

Lado da borda

insira a descrição da imagem aqui

Estes têm um lado da fronteira de

  • esquerda (3.0), superior (3.0)
  • inferior (13.0)
  • esquerda (azul [100], 15,0), superior (azul [300], 10,0), direita (azul [500], 5,0), inferior (azul [800], 3,0)

Código

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

Raio da borda

insira a descrição da imagem aqui

Estes têm raios fronteira 5, 10e, 30respectivamente.

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

Indo

DecoratedBoxEu BoxDecorationsou muito flexível. Leia Flutter - BoxDecoration Cheat Sheet para muitas mais idéias.

Suragch
fonte
Alguém sabe como usar o BorderSide com o BorderRadius?
HaSnen Tai
@HaSnenTai Você encontrou alguma solução? No meu projeto, eu preciso dar borda inferior com pílula como forma. Como posso conseguir isso?
Robert Williams
@RobertWilliams, eu usaria um widget de desenho personalizado.
Suragch 12/04
@Suragch O widget é um Texto que precisa de uma borda forte (em forma de pílula). A largura do widget de texto não é fixa. Para usar o widget de desenho personalizado, não precisarei fornecer propriedades de correção?
Robert Williams
@RobertWilliams, não sei exatamente o que você está tentando fazer. Eu abriria uma nova pergunta com uma ilustração e explicação do que não está funcionando no momento. Sinta-se livre para criar um link a partir daqui.
Suragch 15/04
10

Conforme declarado na documentação, a vibração prefere a composição sobre os parâmetros. Na maioria das vezes, o que você procura não é uma propriedade, mas um invólucro (e algumas vezes alguns ajudantes / "construtores")

Para bordas, o que você quer é DecoratedBox, que possui uma decorationpropriedade que define bordas; mas também imagens de fundo ou sombras.

Alternativamente, como @Aziza disse, você pode usar Container. Que é a combinação de DecoratedBox, SizedBoxe alguns outros widgets úteis.

Rémi Rousselet
fonte
7

A melhor maneira é usar BoxDecoration ()

Vantagem

  • Você pode definir a borda do widget
  • Você pode definir a cor ou largura da borda
  • Você pode definir o canto arredondado da borda
  • Você pode adicionar Sombra do widget

Desvantagem

  • BoxDecorationuse apenas com o Containerwidget para que você deseje envolver seu widgetContainer()

Exemplo

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

insira a descrição da imagem aqui

Sanjayrajsinh
fonte
1

Usar BoxDecoration () é a melhor maneira de mostrar borda.

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

Você também pode ver o formato completo aqui

Arshia Mehta
fonte
0

Você pode usar o Container para conter seu widget:

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

Use um recipiente com Boxdercoration.

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