Maksymalna szerokość

Część sekcji Układ dopasowany do ekranu ścieżki Flutter w Coddy. Lekcja 15 z 30.

Karta z długim tekstem rozciąga się na całą szerokość ekranu. Na telefonie wygląda to dobrze; na tablecie ta sama karta rozciąga się do jednej linii o długości tysiąca pikseli, którą trudno czytać.

ConstrainedBox ustawia limity rozmiaru swojego elementu potomnego. maxWidth: określa maksymalną szerokość, do jakiej może się on rozciągnąć:

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

Na ekranie o szerokości mniejszej niż 400 pikseli karta nadal zmniejsza się, aby się zmieścić. Na szerszym ekranie jej szerokość nie przekracza 400 pikseli, a tekst zawija się do większej liczby wierszy.

BoxConstraints przyjmuje również wartości minWidth:, minHeight: i maxHeight:. Wartość minimalna określa najmniejszy rozmiar elementu potomnego, więc nigdy nie ogranicza jego wzrostu.

Wyzwanie

Łatwy

Zadbaj o czytelność karty z cytatem na szerokich ekranach: pozwól jej osiągnąć szerokość maksymalnie 320 pikseli.

Spróbuj swoich sił

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