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.
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:
And this on the display:
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,
),
],
)
