Comment puis-je ajouter de l'ombre au widget dans Flutter ?

Question

Comment puis-je ajouter une ombre au widget comme sur l'image ci-dessous?

Ceci est mon code de widget actuel.

Answer 1

Utilisez Material avec shadowColor à l'intérieur de Container comme ceci :

Container(
  decoration: BoxDecoration(
      borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(10),
          bottomRight: Radius.circular(10)),
      boxShadow: [
        BoxShadow(
            color: Color(0xffA22447).withOpacity(.05),
            offset: Offset(0, 0),
            blurRadius: 20,
            spreadRadius: 3)
      ]),
  child: Material(
    borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(10),
        bottomRight: Radius.circular(10)),
    elevation: 5,
    shadowColor: Color(0xffA22447).withOpacity(.05),
    color: Color(0xFFF7F7F7),
    child: SizedBox(
      height: MediaQuery.of(context).size.height / 3,
    ),
  ),
)

Answer 2

Voici comment je l'ai fait

    Container(
  decoration: new BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.grey[200],
        blurRadius: 2.0, // a l'effet d'adoucir l'ombre
        spreadRadius: 2.0, // a l'effet d'étendre l'ombre
        offset: Offset(
          5.0, // horizontal, déplacer vers la droite de 10
          5.0, // vertical, déplacer vers le bas de 10
        ),
      )
    ],
  ),
  child: Container( 
       color: Colors.white, //dans votre exemple c'est bleu, rose, etc..
       child: //votre contenu
  )

Answer 3

Ajouter une ombre de boîte au conteneur dans Flutter

  Container(
      margin: EdgeInsets.only(left: 50, top: 80, right: 50, bottom: 80),
      height: double.infinity,
      width: double.infinity,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(12),
            topRight: Radius.circular(12),
            bottomLeft: Radius.circular(12),
            bottomRight: Radius.circular(12)
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.6),
            spreadRadius: 8,
            blurRadius: 6,
            offset: Offset(0, 4),
          ),
        ],
      ),
  )

Voici ma sortie

Answer 4

Les réponses données font l'affaire pour l'ombre extérieure, c'est-à-dire autour du widget. Je voulais une ombre sur le widget qui se trouve à l'intérieur des limites et selon le problème sur github il n'y a pas encore d'attribut d'encastrement dans ShadowBox. Ma solution de contournement a été d'ajouter une couche de widget avec un dégradé en utilisant le widget stack pour que cela ressemble à ce que le widget lui-même a des ombres. Vous devez utiliser la mediaQuery pour les dimensions sinon la mise en page sera désordonnée sur différents appareils. Voici un exemple de code pour une meilleure compréhension :

Stack(
            children: [
              Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    image: AssetImage("assets/sampleFaces/makeup.jpeg"),
                    // fit: BoxFit.cover,
                  ),
                ),
                height: 350.0,
              ),
              Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: FractionalOffset.topCenter,
                    end: FractionalOffset.bottomCenter,
                    colors: [
                      Colors.black.withOpacity(0.0),
                      Colors.black54,
                    ],
                    stops: [0.95, 5.0],
                  ),
                ),
              )
            ],
          ),

Answer 5

class ShadowContainer extends StatelessWidget {
  ShadowContainer({
    Key key,
    this.margin = const EdgeInsets.fromLTRB(0, 10, 0, 8),
    this.padding = const EdgeInsets.symmetric(horizontal: 8),
    this.circular = 4,
    this.shadowColor = const Color.fromARGB(
        128, 158, 158, 158), //Colors.grey.withOpacity(0.5),
    this.backgroundColor = Colors.white,
    this.spreadRadius = 1,
    this.blurRadius = 3,
    this.offset = const Offset(0, 1),
    @required this.child,
  }) : super(key: key);

  final Widget child;
  final EdgeInsetsGeometry margin;
  final EdgeInsetsGeometry padding;
  final double circular;
  final Color shadowColor;
  final double spreadRadius;
  final double blurRadius;
  final Offset offset;
  final Color backgroundColor;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: margin,
      padding: padding,
      decoration: BoxDecoration(
        color: backgroundColor,
        borderRadius: BorderRadius.circular(circular),
        boxShadow: [
          BoxShadow(
            color: shadowColor,
            spreadRadius: spreadRadius,
            blurRadius: blurRadius,
            offset: offset,
          ),
        ],
      ),
      child: child,
    );
  }
}