BoxShadow es un widget incorporado en flutter, cuya funcionalidad es proyectar sombra en un cuadro. El widget BoxShadow generalmente se usa con BoxDecoration. En el widget BoxDecoration, uno de sus parámetros es boxShadow , que toma una lista de BoxShadow para proyectar una sombra alrededor de un cuadro.
Constructor de la clase BoxShadow:
const BoxShadow(
{Color color: const Color(0xFF000000),
Offset offset: Offset.zero,
double blurRadius: 0.0,
double spreadRadius: 0.0}
)
Propiedades del widget BoxShadow:
- blurRadius: Esta propiedad toma un valor doble como objeto. Controla la turbidez en los bordes de la sombra.
- blurSigma: Esta propiedad toma un valor doble como objeto. Controla el radio de desenfoque en términos de sigma en lugar de píxeles lógicos.
- color: La propiedad color toma la clase Color como objeto para decidir el color de la sombra.
- offset: la clase Offset es el objeto dado a esta propiedad que controla la medida en que la sombra será visible.
- spreadRadius: esta propiedad también toma un valor doble como objeto para decidir hasta qué punto se debe inflar el cuadro antes de aplicar el desenfoque.
Ejemplo: aquí veremos cómo proyectar sombra a un cuadro, usando el widget BoxShadow dentro de BoxDecoration .
Este es el widget BoxDecoration que tiene una imagen y un borde que la rodea. Veremos cómo aplicar sombra a este cuadro.
dardo principal
Dart
import 'package:flutter/material.dart';
void main() {
runApp(
//Our app widget tree starts here
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: Padding(
padding: const EdgeInsets.all(12.0),
child: SizedBox(
height: 200,
width: 250,
child: Container(
decoration: BoxDecoration(
image: const DecorationImage(
image: NetworkImage(
'https://media.geeksforgeeks.org/wp-content/cdn-uploads/logo.png'), //NetworkImage
scale: 3.0,
), //DecorationImage
border: Border.all(
color: Colors.green,
width: 4.0,
style: BorderStyle.solid), //Border.all
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
topRight: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0),
bottomRight: Radius.circular(10.0),
),
//BorderRadius.only
/************************************/
/* The BoxShadow widget is here */
/************************************/
boxShadow: [
BoxShadow(
color: Colors.greenAccent[200],
offset: const Offset(
5.0,
5.0,
),
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
), //SizedBox
), //Padding
), //Center
), //Scaffold
debugShowCheckedModeBanner: false,
//Debug banner is turned off
), //MaterialApp
);
}
Producción:
Explicación: como se mencionó anteriormente, el widget BoxDecoration tiene un parámetro llamado boxShadow que toma List<BoxShadow> (una lista de widgets BoxShadow ) como el objeto para proyectar una sombra en el cuadro. El widget superior de la lista aparece en la parte inferior de la aplicación.
Ahora, echando un vistazo al código, podemos ver que al primer widget BoxShadow de la lista se le asigna un color de greenAccent[400] , que actúa como la sombra real del cuadro en la aplicación. Y luego tenemos el desplazamiento que se establece en 5.0 tanto para el eje x como para el eje y, esta es la distancia a la que se proyectará la sombra verde. Luego tenemos el radio de desenfoque establecido en 10, lo que le da un efecto de neblina a la sombra, seguido del radio de dispersión que se establece en 2.
En el segundo widget BoxShadow , el color asignado es blanco y el desplazamiento se establece en cero tanto para el eje x como para el eje y, esto es para que el fondo de la imagen sea blanco (que es el color original). Si no hubiéramos agregado el segundo widget BoxShadow , el resultado habría sido la imagen de abajo.
Entonces, así es como podemos agregar Boxshadow a nuestra aplicación flutter.
Publicación traducida automáticamente
Artículo escrito por ankit_kumar_ y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA