Je voudrais avoir un widget bannière, probablement un VideoPlayer (du plugin video_player) ou bien juste une image.

En fonction de la taille de l'écran / de la fenêtre, je veux que ma bannière suive comme ceci:

https://i.imgur.com/YADZSrV.mp4

Imaginez que la mise à l'échelle dans la vidéo est la taille de la fenêtre qui change.

En gros:
Si l'aspect devient plus large que l'original -> afficher moins en haut et en bas (un peu zoom avant)
Si l'aspect devient plus grand que l'original -> afficher moins sur les côtés (un peu de recadrage lors du centrage)

J'ai quelque chose à travailler partiellement. Cela fonctionne lorsque vous élargissez la fenêtre, mais quand elle devient plus mince, elle commence à tout réduire, elle ne garde pas toute la hauteur tout en affichant moins sur les côtés.

Voici mon travail en cours:

return ClipRect(
  child: OverflowBox(
    maxWidth: double.infinity,
    maxHeight: double.infinity,
    child: Container(
      width: MediaQuery.of(context).size.width,
      height: MediaQuery.of(context).size.height,
      child: VideoPlayer(_controller),
    ),
  ),
);
1
Keetz 25 août 2020 à 10:42

2 réponses

Meilleure réponse

Cela peut être résolu très facilement en utilisant le widget FittedBox et l'énumération BoxFit .

FittedBox(
  fit: BoxFit.cover,
  child: Container(
    width: 960,
    height: 360,
    child: VideoPlayer(_controller),
  ),
)

Utilisation du widget VideoPlayer en tant qu'enfant d'un conteneur dans lequel je règle la taille sur la taille d'origine de la vidéo.

Exemple utilisant une image:

FittedBox(
  fit: BoxFit.cover,
  child: Image(
    image: NetworkImage(
        'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
  ),
)
1
Keetz 26 août 2020 à 14:28

Vous pouvez utiliser LayoutBuilder pour obtenir la taille de son contenu et le rendre différemment en conséquence: https://api.flutter.dev/flutter/widgets/LayoutBuilder-class. html

Dans votre cas, ce serait quelque chose comme ceci:

  return ClipRect(
    child: OverflowBox(
      maxWidth: double.infinity,
      maxHeight: double.infinity,
      child: LayoutBuilder(
        builder: (context, constraints) {
          if (constaints.bigger.width > constaints.bigger.height) {
            return Text('More width than height');
          }
          else {
            return Text('More height than width');
          }
        }
      )
    ),
  );
0
xurei 25 août 2020 à 12:54