Flutter : FittedBox behaves differently when the size of the parent widget is not specified

Question

everyone.

(A)The code below stretches the text as much as possible vertically (and horizontally) within the range of 300*300.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Icons',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(),
      body:


      Container(
        color:Colors.blue,
        width:300.0,
        height:300.0,
        child:


        FittedBox(
          fit: BoxFit.fill,
          child: Text(
            'Some Example Text.',
            style: TextStyle(
              fontSize: 20.0,
            ),
          ),
        ),



      ),



    );
  }
}

(B)On the other hand, the code below does not stretch the text.

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(),
      body:


      // Container(
      //   color:Colors.blue,
      //   width:300.0,
      //   height:300.0,
      //   child:


        FittedBox(
          fit: BoxFit.fill,
          child: Text(
            'Some Example Text.',
            style: TextStyle(
              fontSize: 20.0,
            ),
          ),
        ),



      // ),



    );
  }
}

Why is this?

My understanding at this point is that in code (B), the constraint passed from the parent to the FittedBox is the screen size (minus the size of the AppBar), so I expected the text to be stretched across the entire screen except for the AppBar.

However, the actual result is very different. Why is that? Are there any points to consider that I'm missing?

Even if I ask "Why?", I actually got such results, so if I just use the framework, I have no choice but to accept it.

score 0 · Accepted Answer · answered Dec 13 '22 at 05:02

FittedBox scales its child within itself but the Widget itself tries to be as small as possible. You almost get it right except for what the actual constraints are. Scaffold "loosens" the constraints in its body. For better understanding this are the actual constraints in the examples you used.

Case A:

BoxConstraints(
  minHeight: 300,
  minWidth: 300,
  maxHeight: 300,
  maxWidth: 300,
);

Case B:

BoxConstraints(
  minHeight: 0,
  minWidth: 0,
  maxHeight: 600,
  maxWidth: 340,
);

As you can see, in case B, the minimum size is 0 so the FittedBox does not have a minimum size defined hence it will be the size of its child. BoxFit does not alter the size of the FittedBox, only the size of its content.

You can see the constraints passed down the next Widget using LayoutBuilder like this:

Scaffold(
  appBar: AppBar(),
  body: LayoutBuilder(
    builder: (context, constraints) {
      //You can print the constraints like this
      debugPrint(constraints.minHeight.toString());
            
      return const FittedBox(
        fit: BoxFit.fill,
        child: Text('Example'),
      );
    },
  ),
);

That's great. Your explanation also shows the issue in my earlier (https://stackoverflow.com/q/73045310/700648) question. But the way out is still unclear. How do you get a `FittedBox` to fill the parent widget (the entire Scaffold-MaterialApp)? Do you see the problem at that other question? — Sam, Aug 02 '23 at 00:30

Flutter : FittedBox behaves differently when the size of the parent widget is not specified

1 Answers1

Linked