Ошибка переполнения

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

Экран телефона небольшой. Когда дочерям Row нужна ширина больше, чем есть на экране, Flutter рисует жёлтые и чёрные полосы у края, за который они выступают, и выводит сообщение в консоли:

A RenderFlex overflowed by 60 pixels on the right.

Разберите его на три части. RenderFlex — это Row или Column. 60 pixels — это величина, на которую дочерние элементы слишком большие. On the right означает, что строка слишком широкая; on the bottom означает, что столбец слишком высокий.

Здесь всё сводится к обычной арифметике. Три блока шириной 150 пикселей занимают 450 пикселей, а ширина экрана телефона — 390, поэтому 60 пикселей выступают за край. Уменьшите общую ширину дочерних элементов на 60 пикселей, и полосы исчезнут.

Все проверки в этом курсе выполняются на телефоне шириной 390 пикселей, поэтому переполнение приводит к провалу проверки с тем же сообщением.

Задание

Легко

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

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

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('Trips')),
        body: Column(
          children: [
            Row(
              children: [
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.orange,
                  child: const Center(child: Text('Beach')),
                ),
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.green,
                  child: const Center(child: Text('Forest')),
                ),
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.blueGrey,
                  child: const Center(child: Text('City')),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}