Une largeur maximale

Fait partie de la section Des mises en page adaptées du Journey Flutter de Coddy. Leçon 15 sur 30.

Une carte contenant un long texte s’élargit jusqu’à occuper toute la largeur de l’écran. Sur un téléphone, cela convient ; sur une tablette, la même carte s’étire sur une seule ligne de mille pixels, ce qui la rend difficile à lire.

ConstrainedBox fixe des limites à la taille de son enfant. maxWidth: indique la largeur maximale qu’il peut atteindre :

ConstrainedBox(
  constraints: const BoxConstraints(maxWidth: 400),
  child: Container(...),
)

Sur un écran de moins de 400 pixels de large, la carte rétrécit quand même pour s’adapter. Sur un écran plus large, elle s’arrête à 400 pixels et le texte passe sur davantage de lignes.

BoxConstraints accepte aussi minWidth:, minHeight: et maxHeight:. Une valeur minimale correspond à la taille la plus petite que peut avoir un enfant ; elle ne l’empêche donc jamais de grandir.

Défi

Facile

Gardez la carte de citation lisible sur les écrans larges : laissez-la s’élargir jusqu’à 320 pixels au maximum.

Essayez vous-même

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('Quote of the Day')),
        body: Padding(
          padding: const EdgeInsets.all(16),
          child: Center(
            child: Container(
              padding: const EdgeInsets.all(24),
              decoration: BoxDecoration(
                color: Colors.amber.shade100,
                borderRadius: BorderRadius.circular(16),
              ),
              child: const Text(
                'The best way to learn to build apps is to build apps, one small screen at a time.',
                style: TextStyle(fontSize: 20),
              ),
            ),
          ),
        ),
      ),
    );
  }
}