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

Avant de commencer à réinventer la roue avec l'une de ces réponses, consultez le widget Material Card. Il vous permet également de définir un style global via le thème de l'application directement :