Eine maximale Breite

Teil des Abschnitts Layouts für jede Bildschirmgröße der Flutter-Journey von Coddy. Lektion 15 von 30.

Eine Karte mit einem langen Text wird so breit wie der Bildschirm. Auf einem Smartphone sieht das gut aus; auf einem Tablet dehnt sich dieselbe Karte zu einer tausend Pixel langen Zeile aus, die schwer zu lesen ist.

ConstrainedBox legt Größenbeschränkungen für sein Kindelement fest. maxWidth: gibt die maximale Breite an, auf die es wachsen darf:

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

Auf einem Bildschirm, der schmaler als 400 Pixel ist, wird die Karte weiterhin so verkleinert, dass sie hineinpasst. Auf einem breiteren Bildschirm wird sie bei 400 angehalten, und der Text verteilt sich auf mehr Zeilen.

BoxConstraints akzeptiert auch minWidth:, minHeight: und maxHeight:. Ein Mindestwert gibt die kleinste zulässige Größe des Kindelements an und hindert es daher nie daran, weiter zu wachsen.

Aufgabe

Einfach

Sorge dafür, dass die Zitatkarte auf breiten Bildschirmen gut lesbar bleibt: Lass sie höchstens 320 Pixel breit werden.

Probier es selbst

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),
              ),
            ),
          ),
        ),
      ),
    );
  }
}