web-dev-qa-db-fra.com

Flutter - Container BoxShadow disparaît lors du défilement dans un ListView

Voici à quoi ressemble mon conteneur:

new Container(
        width: 500.0,
        height: 250.0,
        padding: new EdgeInsets.fromLTRB(20.0, 40.0, 20.0, 40.0),
        decoration: new BoxDecoration(
          color: const Color(0xFF66BB6A),
          boxShadow: [new BoxShadow(
            color: Colors.black,
            blurRadius: 20.0,
          ),]
        ),
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            new Container(
              padding: new EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 10.0),
              child: new Text("Testtext", style: new TextStyle(fontSize: 30.0, fontFamily: "Barrio", color: new Color.fromARGB(255, 230, 230, 230))),
            ),
          ]
        ),
      ),

Il se trouve dans un ListView avec d'autres conteneurs. Dès que je commence à faire défiler le ListView, l'ombre disparaît. Lors du chargement de la vue, elle apparaît correctement.

Des réflexions sur ce problème?

Merci

listviewdartdropshadowflutter
7
OhMad

J'essayais de reproduire le problème et j'ai remarqué que vous n'aviez pas mis de marge sur votre conteneur. Il est fort probable que les autres éléments de votre ListView masquent votre ombre dessinée manuellement car elle est dessinée en dehors des limites de votre Container.

Je vous recommande d'utiliser un Card au lieu d'un conteneur. Vous pouvez obtenir une ombre de matériau d'aspect naturel à l'aide de l'argument constructeur elevation. Les cartes sont livrées avec une marge intégrée, et vous pouvez en ajouter d'autres en les enfermant dans un Container si vous le souhaitez. Cela vous donnera suffisamment d'espace pour que l'ombre soit visible. Vous pouvez contrôler la couleur du Card avec l'argument constructeur color.

Les coins d'un Card sont légèrement arrondis. Si vous ne voulez pas de coins arrondis, vous allez désactiver les spécifications de Material Design, mais vous pouvez essayer de placer un Material avec un type de MaterialType.canvas à l'intérieur d'un Container.

11
Collin Jackson

Cette autre réponse s'adresse à ceux qui doivent continuer avec Container:

Container(
          decoration: BoxDecoration(
          shape: BoxShape.circle, // BoxShape.circle or BoxShape.retangle
          //color: const Color(0xFF66BB6A),
          boxShadow: [BoxShadow(
            color: Colors.grey,
            blurRadius: 5.0,
          ),]
        ),
          child: ...
),
7
Edeson Bizerril