Flutter – Widget de decoración de cajas

BoxDecoration es un widget incorporado en la API de flutter. En un nivel básico, describe cómo se debe pintar un cuadro en la pantalla. La forma de la caja no necesita ser solo un rectángulo o un cuadrado, también puede circular. Viene con un montón de propiedades, podemos agregar una imagen dentro, agregar un radio al borde (si la forma es un rectángulo), proyectar sombra al cuadro, etc. A continuación veremos todas sus propiedades y un ejemplo de implementación de la Widget de decoración de cajas.

Constructor de la clase BoxDecoration:

const BoxDecoration(
{Color? color,
DecorationImage? image,
BoxBorder? border,
BorderRadiusGeometry? borderRadius,
List<BoxShadow>? boxShadow,
Gradient? gradient,
BlendMode? backgroundBlendMode,
BoxShape shape: BoxShape.rectangle}
)

Propiedades del widget BoxDecoration:

• backgroundBlendMode: esta propiedad toma la enumeración BlendMode como el objeto de este parámetro. Aplica un efecto de fusión al color o degradado de fondo.
• border: El parámetro border toma la clase BoxBorder como el objeto para dibujar un borde alrededor de la caja.
• borderRadius: esta propiedad toma la clase BorderRadiusGeometry como el objeto que a su vez agrega curvas alrededor de las esquinas del borde si la forma del cuadro es un rectángulo.
• boxShadow: esta propiedad contiene una lista del widget BoxShadow como objeto. Proyecta una sombra sobre la caja.
• color: esta propiedad toma la clase Color como el objeto para dar un color de fondo al widget BoxDecoration .
• degradado: esta propiedad toma la clase Gradiente como el objeto para aplicar un relleno de degradado dentro del cuadro.
• image: Esta propiedad agrega una imagen sobre el fondo tomando como objeto la clase DecorationImage .
• padding: esta propiedad toma la clase EdgeInsetsGeometry como el objeto para agregar un espacio vacío alrededor del contenido dentro del cuadro.
• forma: Esta propiedad toma BoxShape como el objeto para decidir la forma de la caja.

Ejemplo: 

import 'package:flutter/material.dart';
 
//imported material design package
void main() {
  runApp(
    //Widget tree starts from here
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('GeeksforGeeks'),
          backgroundColor: Colors.greenAccent[400],
        ), //AppBar
        body: Center(
          child: Container(
            width: 300,
            height: 300,
            //BoxDecoration Widget
            decoration: BoxDecoration(
              image: const DecorationImage(
                image: NetworkImage(
                    'https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png'),
                fit: BoxFit.cover,
              ), //DecorationImage
              border: Border.all(
                color: Colors.green,
                width: 8,
              ), //Border.all
              borderRadius: BorderRadius.circular(15),
              boxShadow: [
                BoxShadow(
                  color: Colors.black,
                  offset: const Offset(
                    5.0,
                    5.0,
                  ), //Offset
                  blurRadius: 10.0,
                  spreadRadius: 2.0,
                ), //BoxShadow
                BoxShadow(
                  color: Colors.white,
                  offset: const Offset(0.0, 0.0),
                  blurRadius: 0.0,
                  spreadRadius: 0.0,
                ), //BoxShadow
              ],
            ), //BoxDecoration
          ), //Container
        ), //Center
      ), //Scaffold
    ), //MaterialApp
  );
}

Producción: 

Explicación: el widget principal de esta aplicación es Center, que contiene todo el árbol de widgets del cuerpo de la aplicación. El widget Center contiene el widget Container como elemento secundario. El widget BoxDecoration lo toma la propiedad de decoración del Container . El primer elemento dibujado dentro del cuadro es NetworkImage con la ayuda de la propiedad de imagen . Luego tenemos la propiedad de borde que había asignado un borde de color verde de 4 píxeles de grosor alrededor del cuadro. Y para agregar curvas alrededor de las esquinas del borde tenemos boderRadiuspropiedad agregando una curva de 15 px de radio en cada esquina. Y por último, tenemos la propiedad boxShadow que tiene una lista de dos clases BoxShadow para asignar un fondo de color blanco en el cuadro (debajo de la imagen) y una sombra de color negro intenso fuera del cuadro.