Flutter – Widget de borde

El widget BorderSide en flutter es un widget incorporado cuya función es controlar la apariencia de los lados individuales del borde alrededor de un widget. El widget de borde en flutter también toma BorderSide como objeto, que es el representante de los lados individuales.

Constructor de la clase BorderSide:

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

Propiedades del widget BorderSide: 

• color: la propiedad color mantiene la clase Color (final) como objeto, para asignar un color a un lado del borde.
• hashCode: esta propiedad toma un valor int (anulación) como objeto. Este es responsable de la representación de estado de un objeto.
• estilo: la propiedad de estilo toma la enumeración BorderStyle como el objeto. Con la ayuda de esta propiedad, podemos controlar el estilo de la línea de borde dibujada.
• ancho: Esta propiedad toma un   valor doble como objeto. Y controla el ancho asignado al lado individual del borde.

Ejemplo: Aquí veremos agregar borde a una imagen.

import 'package:flutter/material.dart';
 
void main() {
  runApp(
    MaterialApp(
      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: Container(
            padding: EdgeInsets.all(8.0),
            decoration: BoxDecoration(
              border: Border(
                top: BorderSide(
                    width: 16.0,
                    color: Colors.lightGreen.shade300,
                    style: BorderStyle.solid), //BorderSide
              ), //Border
               
            ), //BoxDecoration
             //Image.network
            child: Image.network(
                'https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo.png'),
          ), //Container
        ), //Center
      ), //Scaffold
      debugShowCheckedModeBanner: false,
    ), //MaterialApp
  );
}

Producción:

Explicación: en esta aplicación, el widget BorderSide se coloca como el objeto en la parte superior, que es una propiedad del widget Border para describir el lado del borde en la parte superior del elemento (o en este caso, el logotipo de geeksforgeeks). Se le ha dado un ancho de 16,0 px al borde, el color se establece en verde claro.sombra300 y, por último, la propiedad de estilo se establece en sólido (lo que lo hace visible).

   // style property set to none
   ... 
   style: BorderStyle.none  //BorderSide
   ...

Si la propiedad de estilo se establece como se indica arriba. La salida será.

BorderStyle.none

Para agregar un borde inferior tenemos que hacer estos cambios.

...
   border: Border(
                  top: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade300),
                  bottom: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade900),
                ),
...                                

Producción: 

Borde inferior 

Así es como podemos agregar un borde izquierdo a la imagen.

...
 border: Border(
                  top: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade300),
                  left: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade300),
                  bottom: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade900),
                ),
...                

Producción:

Borde izquierdo

Y así es como bordeamos todos los cuatro lados usando el widget BorderSide .

...
 border: Border(
                  top: BorderSide(
                      width: 16.0,
                      color: Colors.lightGreen.shade300,
                      style: BorderStyle.solid),
                  left: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade300),
                  bottom: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade900),
                  right: BorderSide(
                      width: 16.0, color: Colors.lightGreen.shade900),
                ),
...

Producción:

Borde en los cuatro lados