Максимальная ширина

Часть раздела Адаптивная компоновка путешествия по Flutter на Coddy. Урок 15 из 30.

Карточка с длинным текстом растягивается на всю ширину экрана. На телефоне это выглядит нормально; на планшете та же карточка вытягивается в одну строку длиной в тысячу пикселей, которую трудно читать.

ConstrainedBox задаёт ограничения на размер дочернего элемента. maxWidth: — это максимальная ширина, до которой он может вырасти:

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

На экране уже 400 пикселей карточка всё равно сжимается, чтобы поместиться. На более широком экране её ширина останавливается на отметке 400, и текст переносится на большее количество строк.

BoxConstraints также принимает minWidth:, minHeight: и maxHeight:. Минимальное значение задаёт наименьший размер дочернего элемента, поэтому оно никогда не мешает ему расти.

Задание

Легко

Сделай карточку с цитатой удобной для чтения на широких экранах: пусть её ширина увеличивается максимум до 320 пикселей.

Попробуйте сами

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