J'ai besoin de concevoir un Container comme affiché au centre, ci-dessous.

enter image description here

Voici mon code pour cela:

Container(
   width: 48,
   height: 48,
   decoration: SideBarStyles.recentItem,
   child: Image.network(
     'https://placeimg.com/640/480/any',
     fit: BoxFit.cover,
   ),
),

Valeur de SideBarStyles.recentItem

  static BoxDecoration recentItem = BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(25)),
    color: Color.fromRGBO(42, 37, 82, 0.15),
    border: Border.all(width: 5, color: Variables.sideBarColorDark)
  );

Le problème est que l'image flotte hors de la boîte comme:

enter image description here

Comment masquer le débordement de l'image?

0
Yashwardhan Pauranik 2 sept. 2020 à 06:35

3 réponses

Meilleure réponse

Heres et exemple

 Container(
                      width: 48,
                      height: 48,
                      decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        border: Border.all(width: 5, color: Variables.sideBarColorDark),
                        image: new DecorationImage(
                          image: new NetworkImage(
                            'https://placeimg.com/640/480/any',
                          ),
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
1
Reign 2 sept. 2020 à 04:20

Si vous voulez que vos coins container soient rognés / arrondis, définissez la propriété borderRadius dans container sur BorderRadius.all(Radius.circular(value)). Ou enveloppez le container dans un widget ClipRRect et définissez la propriété borderRadius sur BorderRadius.all(Radius.circular(value)).

0
ExoticSquid 2 sept. 2020 à 04:32

Une façon de faire est comme ça.

Container(
   width: 48,
   height: 48,
   decoration: SideBarStyles.recentItem,
),

Et decoration comme ça.

  static BoxDecoration recentItem = BoxDecoration(
    borderRadius: BorderRadius.all(Radius.circular(25)),
    color: Color.fromRGBO(42, 37, 82, 0.15),
    border: Border.all(width: 5, color: Variables.sideBarColorDark)
    image: DecorationImage(
      image: NetworkImage('https://placeimg.com/640/480/any'),
    ),
  );

Résultat:

enter image description here

1
Jigar Patel 2 sept. 2020 à 05:08