The Overflow Error

Part of the Layout That Fits section of Coddy's Flutter journey. Lesson 5 of 30.

A phone screen is small. When the children of a Row need more width than the screen has, Flutter draws yellow and black stripes on the edge where they spill out, and prints a message in the Console:

A RenderFlex overflowed by 60 pixels on the right.

Read it in three parts. RenderFlex is a Row or a Column. 60 pixels is how much too big the children are. On the right means a row too wide; on the bottom means a column too tall.

The number is plain arithmetic. Three boxes 150 pixels wide need 450 pixels, the phone has 390, so 60 pixels spill out. Make the children 60 pixels smaller in total and the stripes go away.

Every check in this course runs on a phone 390 pixels wide, so an overflow fails the check with the same message.

Challenge

Easy

Press Run and find the stripes on the right edge. Then make each tile 120 pixels wide, so all three fit on the phone.

Try it yourself

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