17
votes

Dimensionner un conteneur pour obtenir la moitié de la taille de l'écran en scintillement

J'essaye d'obtenir un conteneur exactement la moitié de la hauteur de l'écran [après avoir considéré la hauteur de l'AppBar] et la moitié de la largeur de l'écran.

C'est ce que j'ai imaginé ...

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Flexible(
            child: Container(
              width: MediaQuery.of(context).size.width / 2,
              color: Colors.red,
            ),
          ),
          Flexible(
            flex: 1,
            child: Container(),
          )
        ],
      ),
    );
  }
}

Y a-t-il un meilleur moyen?

flutter flutter-layout

0 commentaires

4 Réponses :

11
votes

Vous êtes sur la bonne voie pour utiliser MediaQuery, mais votre code peut être beaucoup plus simple:

  Scaffold(
    appBar: AppBar(),
    body: Align(
      alignment: Alignment.topCenter,
      child: Container(
        height: MediaQuery.of(context).size.height / 2,
        width: MediaQuery.of(context).size.width / 2,
        color: Colors.red,
      ),
    ),
  );

1 commentaires

Ok, mais cela ne prend pas en compte la hauteur d'AppBar, donc le conteneur n'est pas exactement la moitié de sa taille.

21
votes

Si vous souhaitez que la hauteur du conteneur soit la moitié de l'espace disponible, vous pouvez utiliser le widget LayoutBuilder. Avec le widget LayoutBuilder, vous pouvez savoir à l'intérieur de la fonction de générateur quelle serait la largeur et la hauteur maximales disponibles. L'exemple d'utilisation dans votre cas serait comme ceci:

Scaffold(
      appBar: AppBar(),
      body: Align(
        alignment: Alignment.topCenter,
        child: LayoutBuilder(
          builder: (BuildContext context, BoxConstraints constraints) {
            return Container(
              height: constraints.maxHeight / 2,
              width: MediaQuery.of(context).size.width / 2,
              color: Colors.red,
            );
          },
        ),
      ),
    );

1 commentaires

Merci mec, votre `LayoutBuilder (builder: (Contexte BuildContext, contraintes BoxConstraints)` m'a beaucoup aidé à comprendre les bases de la gestion de la mise en page. Merci encore.

14
votes

Vous pouvez déduire la hauteur d' AppBar pour configurer la taille du Container .

@override
Widget build(BuildContext context) {
  var appBar = AppBar();
  return Scaffold(
    appBar: appBar,
    body: Align(
      alignment: Alignment.topCenter,
      child: Container(
        height: (MediaQuery.of(context).size.height - appBar.preferredSize.height) / 2,
        width: MediaQuery.of(context).size.width / 2,
        color: Colors.red,
      ),
    ),
  );
}

2 commentaires

Je ne savais pas que vous pouviez obtenir la taille des widgets de cette manière. Impressionnant!

Merci de donner des conseils pour obtenir la hauteur d'un composant

2
votes

La meilleure façon et la voie la plus simple pour résoudre ce problème et des problèmes similaires consiste simplement à utiliser le widget FractionallySizedBox ; par exemple

FractionallySizedBox(
    alignment: Alignment.topCenter,
    widthFactor: 0.5,
    child: Container(
    height: 100,
  ),
),

Ce widget ( FractionallySizedBox ) vous permet de construire votre child en spécifiant la fraction de la largeur (ou hauteur) du parent qui est disponible pour le widget child . Après cela, en spécifiant l' alignment , vous pouvez spécifier la manière dont le reste de l'espace serait alloué.

Pour plus d'aide sur ce widget, veuillez visiter la page d'aide officielle de ce widget .

0 commentaires