Solución:
Escribí un código a continuación para la decoración de la caja de sombra superior e inferior, esto significa que habrá dos contenedores. Puede utilizar esta solución de dos formas,
-
Contenedores anidados, que consiste en poner su imagen dentro del Contenedor (topShadow) => Contenedor (bottomShadow) => Imagen
-
Coloque sus 2 contenedores y su imagen dentro de Stack, alinee los contenedores en la parte superior e inferior y dé a sus contenedores alturas fijas como el área que marcó en su imagen. (Asegúrese de que los contenedores estén debajo del elemento de la imagen dentro de la pila, de lo contrario, la imagen cubrirá la sombra)
decoration: new BoxDecoration(
gradient: new LinearGradient(
end: const Alignment(0.0, -1),
begin: const Alignment(0.0, 0.6),
colors: <Color>[
const Color(0x8A000000),
Colors.black12.withOpacity(0.0)
],
),
),
decoration: new BoxDecoration(
gradient: new LinearGradient(
end: const Alignment(0.0, -1),
begin: const Alignment(0.0, 0.6),
colors: <Color>[
const Color(0x8A000000),
Colors.black12.withOpacity(0.0)
],
),
),
Código de trabajo del segundo enfoque (punto 2):
Stack(
children: <Widget>[
//image code
Image(..),
//top grey shadow
Align(
alignment: Alignment.topCenter,
child: Container(
height: 50,
width: double.infinity,
decoration: new BoxDecoration(
gradient: new LinearGradient(
end: const Alignment(0.0, 0.4),
begin: const Alignment(0.0, -1),
colors: <Color>[
const Color(0x8A000000),
Colors.black12.withOpacity(0.0)
],
),
),
),
),
//bottom grey shadow
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 50,
width: double.infinity,
decoration: new BoxDecoration(
gradient: new LinearGradient(
end: const Alignment(0.0, -1),
begin: const Alignment(0.0, 0.4),
colors: <Color>[
const Color(0x8A000000),
Colors.black12.withOpacity(0.0)
],
),
),
),
),
],),
como opción, puede controlar la difusión del color negro cambiando stops valores
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
width: 116.0,
height: 174.0,
foregroundDecoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.black, Colors.transparent, Colors.transparent, Colors.black],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
stops: [0, 0.2, 0.8, 1],
),
),
child: Image.network('https://i.picsum.photos/id/200/400/600.jpg'),
),
),
),
);
}
}
