Skip to content

2024

How to think about flutter layouts

Let's be real specific here. Note the following specific question and the specific answer.

Question: What determines the size of a widget in flutter?
Answer: The widget can size itself however it wants but it is limited by the constraints imposed by its immediate parent widget. Widgets might also change their behavior entirely when it receives no constraints/is unconstrained. For instance, when a Column receives fixed constraints, like 0.0 <= h <= 100.3 and 0.0 <= w <= 958, it will try to assume the maximum height it can: 100.3. It chooses only enough width to fit its widest child, within the constraints ofcourse. But when the Column widget receives unbounded constraints, it no longer sets its height to the maximum it can, which is rational since the maximum would be infinity under unbounded constraints.

In a typical layout we create which starts with a Column (or Row), it receives fixed constraints and chooses to be biggest it can along its main axis. So a Column fills out the whole screen. This is what I mean by a typical layout:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('Layout study')),
        body: const MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Hello There'),
      ],
    );
  }
}

Our layout process for the app stars from the Column. Look at devtools to see what the layout looks like, pay attention to the constraints Column receives and what it decides its size is gonna be.

1732826833.png

You can see it choose the maximum of height from the the constraint and just enough width to fit the child Text widget.

Also note here that the child of this Column receives unconstrained height. We can exploit this fact by having one of the child widget take infinite height. As I mentioned earlier, when a Column receives unbounded height, it tries to do the rational next best thing, to be tall enough to fit its children. What happens if one those children say it wants to be too taller beyond the height of screen:

Column(
  children: [
    Container(
      width: 100,
      height: 5000,
      color: Colors.blue,
    ),
  ],
)
Now we get the classic overflow error. This is what we see in devtools:

1732829021.png

And this on the display:

1732829047.png

Look at the layout as shown in flutter inspector again and note that Column passes definite constraints width-wise to the child. So it has no problem rendering this despite the widget trying to set its width to something larger than the screen.

Column(
  children: [
    Container(
      width: 5000,
      height: 100,
      color: Colors.blue,
    ),
  ],
)

Dealing with systemic problems

The problems we deal with in everyday life is an entirely different beast compared to the problems we're trained to solve in schools: even those problems you're trained to solve in school like programming, transform into something much more complicated, with many unknown factors, when they become projects in real world.

All the real world problems that vexes you are systemic problems and you'll never find a specific solution that completely rectifies the issue by treating its root cause. To adapt in the real world you'll have to make compromises and lower your standards.

There are many systemic problems which probably have shaped your life more than you realize: like school education with its myriad of issues, but the example which I want to talk about today is about craniofacial development: the most apparent way this problem manifests itself is in crooked teeth, but undersized jaws could also result in more concerning problems like sleep apnea because the there's not enough room for the tongue in the jaws and it falls backward and obstructs the airway, especially during sleep when all the muscles relax. Is this even a complete description of the problem? I am not sure. Systemic problems are hard to define, but not impossible. Even the problem of trying defining this problem needs to account for our limited resource of time.

The solution offered to crowding, which is widely accepted despite it only exacerbating the root issue, is extraction of teeth and orthodontically rearranging the rest of the teeth with the space made available from extraction. Another solution works for adults is MSE or Maxillary Skeletal Expansion. It addresses the root cause in that it creates space but it does so by splitting the maxilla laterally, yet this isn't a complete solution either because it ignores the mandible.

The root cause is said to be our diet, which only has soft food which doesn't stimulate the jaws enough, but it goes even further: supposedly the jaw doesn't develop because mothers don't breastfeed their babies and just bottlefeed them. Bottlefeeding makes the baby suck the milk while breastfeeding makes the baby push the nipple against their maxilla in order to draw out the milk. The former sucking movement leads to narrowing of the jaw while the latter motion leads to expansion of maxilla.

So how far do the roots of these problems go?? This is just one kind of problem that plagues our society but there are others like poverty which too have deep roots and solutions that address just the symptoms.

Our emotions are woefully inept at solving the systemic problems of civilizaiton. Against systemic problems, anger is not just fleeting source of power, but unable to make out who or what its target even is. You could try your best to direct anger at the people that deserve it but often it lands on our friends/family.

Systemic problems. The roots go so far back, the effects are pervasive, the solutions just treat symptoms, resulting side effects a side effect of just treating symptoms. At best you get a trade-off: one problem for another.

How do you deal with systemic problems?

You don't. Once you spot a systemic problem all you do is pray. If its something you can deal with by changing perspective, or distracting yourself, just do that. However, if you do choose to tackle a systemic problem I advice you look into horizon to see if Prometheus's eagle is coming for you.