Aleteo – Widget de borde

Al widget de borde en flutter se le asigna una funcionalidad simple para agregar bordes a los otros widgets. La primera es creando todos los bordes usando BorderSide. La segunda forma es usando Border.all para crear un borde uniforme que tenga el mismo color y ancho. La tercera es usar Border.fromBorderSide para crear un borde cuyos lados sean todos iguales. La cuarta forma es usar Border.symmetry para hacer que los bordes se vean simétricos vertical y horizontalmente.

Constructor de Clase Fronteriza: 

const Border(
{BorderSide top: BorderSide.none,
BorderSide right: BorderSide.none,
BorderSide bottom: BorderSide.none,
BorderSide left: BorderSide.none}
)

Constructor de Border.all:

Border.all(
{Color color: const Color(0xFF000000),
double width: 1.0,
BorderStyle style: BorderStyle.solid}
)

Constructor de Border.fromBorderSide:

const Border.fromBorderSide(
BorderSide side
)

Constructor de Frontera. simetría:

const Border.symmetric(
{BorderSide vertical: BorderSide.none,
BorderSide horizontal: BorderSide.none}
)

Propiedades del widget de borde:

• bottom: Esta propiedad toma BorderSide como el objeto. Controla el lado inferior del borde.
• dimensiones: la propiedad de dimensión toma EdgeInsetsGeometry como el objeto para controlar los anchos del lado del borde.
• hashCode: Las tablas de propiedades hashCode en un valor int como el objeto. Representa el estado del objeto que influye en el operador == comparación.
• inUniform: esta propiedad toma un valor booleano como objeto para decodificar si todos los lados del borde serán uniformes o no.
• izquierda: Esta propiedad toma BorderSide como el objeto. Controla el lado izquierdo del borde.
• right: Esta propiedad toma BorderSide como el objeto. Controla el lado derecho del borde.
• top: Esta propiedad toma BorderSide como el objeto. Controla el lado superior del borde.

Ejemplo :

El archivo main.dart :

import 'package:flutter/material.dart';
 
void main() {
  runApp(
    MaterialApp(
       
      // Our app starts here
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
          leading: IconButton(
            icon: Icon(Icons.menu),
            tooltip: 'Menu',
            onPressed: () {},
          ), //IconButton
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.comment),
              tooltip: 'Comment',
              onPressed: () {},
            ), //IconButton
          ], //<Widget>[]
           
        ), //AppBar
        body: Center(
          child: Padding(
            padding: const EdgeInsets.all(12.0),
            child: SizedBox(
              height: 250,
              child: Container(
                decoration: BoxDecoration(
                   
                  //inside the bos decoration we have image
                  image: const DecorationImage(
                    image: NetworkImage(
                       
                      // The border will be created around this image
                      //NetworkImage
                        'https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo.png'),
                  ), //DecorationImage
                  border: Border(
                    top: BorderSide(
                        width: 4,
                        color: Colors.black,
                        style: BorderStyle.solid), //BorderSide
                    bottom: BorderSide(
                        width: 4,
                        color: Colors.black,
                        style: BorderStyle.solid), //BorderSide
                    left: BorderSide(
                        width: 4,
                        color: Colors.black,
                        style: BorderStyle.solid), //Borderside
                    right: BorderSide(
                        width: 4,
                        color: Colors.black,
                        style: BorderStyle.solid), //BorderSide
                  ), //Border
                ), //BoxDecoration
              ), //Container
            ), //SizedBox
          ), //Padding
        ), //Center
      ), //Scaffold
      // The debug banner is turned off
      debugShowCheckedModeBanner: false,
    ), //MaterialApp
  );
}

Producción: 

Explicación:   el widget de borde en esta aplicación flutter se usó como objeto para la propiedad de borde en el widget BoxDecoration . Aquí se ha agregado el borde alrededor del logotipo de geeksforgeeks ( NetworkImage) usando el primer método. En el widget de borde que utiliza las propiedades superior, inferior, derecha e izquierda, el ancho del borde se establece en 4 px, el color se establece en negro y el estilo se establece en sólido. Aquí, en este caso, tenemos la capacidad de hacer que los cuatro bordes sean diferentes, pero en aras de la simplicidad, los hicimos todos similares.

Este es el mismo resultado que lograremos usando el resto de las tres formas.

// This is the code snippet of Border.all method
...
border: Border.all(
color: const Color(0xFF000000),
width: 4.0,
style: BorderStyle.solid), //Border.all
), //BoxDirection
...

Producción: 

Explicación: Aquí, en el segundo método, hemos pintado un borde alrededor de la imagen usando Border.all. Pero al usar este método, solo necesitamos dar especificaciones para el borde una sola vez. Aquí, también el ancho del borde es de 4 px, el color se establece en negro y el estilo en sólido. Si el estilo se establece en ninguno, los bordes ya no serán visibles. Esta [propiedad se usa para crear bordes con color y ancho uniformes.

// This is the code snippet of Border.fromBorderSide method
...
border: Border.fromBorderSide(
BorderSide(
width: 4,
color: Colors.black,
style: BorderStyle.solid),//BorderSide
),//Border.fromBorderside
...

Producción: 

Explicación: Ahora bien, esta forma de crear un borde usando Border.fromBorderSide también es similar a la anterior. 

// This is the code snippet of Border.symmetric method
...
border: Border.symmetric(
vertical: BorderSide(
width: 4,
color: Colors.black,
style: BorderStyle.solid), //BorderSide
horizontal: BorderSide(
width: 4,
color: Colors.black,
style: BorderStyle.solid), //BorderSide
), //Border.symmetric
...

Producción: 

Explicación: aquí tenemos la propiedad Border.symmetric al usar esto, podemos crear un borde que es el mismo vertical y horizontalmente. En la propiedad vertical , hemos agregado que el ancho del borde sea de 4 px, el color negro y el estilo sólido, y lo mismo ocurre con la propiedad horizontal .

Para ver el código completo de todos los ejemplos utilizados en el artículo, haga clic aquí .