RenderFlex overflow - Unconstrained SizedBox height with height given

Question

Card widget in question:

SizedBox(
                height: screenHeight * 0.79,    // Previously 0.71
                width: screenWidth * 0.85,
                child: Card(
...

I don't understand this, I have given the height, but it shows the height is unconstrained. Because of it I am getting a RenderFlex overflow error. You can see the widget in question, what could be going on?

Sample Widget:

import 'package:animated_bottom_navigation_bar/animated_bottom_navigation_bar.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class SizeTest extends StatefulWidget {
  const SizeTest({Key? key}) : super(key: key);

  @override
  State<SizeTest> createState() => _SizeTestState();
}

class _SizeTestState extends State<SizeTest> {
  @override
  Widget build(BuildContext context) {
    EdgeInsets padding = MediaQuery.of(context).padding;
    final screenWidth = MediaQuery.of(context).size.width;
    final screenHeight = MediaQuery.of(context).size.height - padding.top - padding.bottom - kBottomNavigationBarHeight;

    final pageView = PageView(
      onPageChanged: (page) {
      },
      children: [
        // Games
        Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Expanded(
              child: Scrollbar(
                child: SingleChildScrollView(
                  child: SizedBox(
                    height: screenHeight * 1.075,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        Text(
                          'ok'
                        ),
                      ],
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ],
    );

    return SafeArea(
      child: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              SizedBox(height: screenHeight * 0.02),
              Center(
                child: FittedBox(
                  fit: BoxFit.fitHeight,
                  child: Text(
                    'h',
                    textAlign: TextAlign.center,
                    style: GoogleFonts.alumniSans(
                        fontSize: 40,
                        color: Colors.white
                    ),
                  ),
                ),
              ),
              const SizedBox(height: 0,),

              // Copyright
              Container(
                height: screenHeight * 0.02,
                margin: EdgeInsets.only(bottom: screenHeight * 0.01),
                child: FittedBox(
                  fit: BoxFit.fitHeight,
                  child: Text(
                    'h',
                    style: TextStyle(
                      color: Colors.white.withOpacity(0.8),
                      fontSize: 10,
                    ),
                  ),
                ),
              ),
              SizedBox(height: screenHeight * 0.01,),

              SizedBox(
                height: screenHeight * 0.03,
                width: screenWidth * 0.8,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    GestureDetector(
                      onTap: () {

                      },
                      child: FittedBox(
                        fit: BoxFit.fitHeight,
                        child: Text(
                          'h',
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                      },
                      child: FittedBox(
                        fit: BoxFit.fitHeight,
                        child: Text(
                          'h',
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {

                      },
                      child: FittedBox(
                        fit: BoxFit.fitHeight,
                        child: Text(
                          'h',
                        ),
                      ),
                    ),
                    GestureDetector(
                      onTap: () {
                      },
                      child: FittedBox(
                        fit: BoxFit.fitHeight,
                        child: Text(
                          'd',
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              SizedBox(height: screenHeight * 0.01,),

              SizedBox(
                height: screenHeight * 0.8,    // Previously 0.71
                width: screenWidth * 0.85,
                child: Card(
                  color: Colors.white,
                  child: (true) ?
                  pageView :
                  Center(
                    child: SizedBox(
                      height: screenHeight * 0.05,
                      width: screenWidth * 0.1,
                      child: const CircularProgressIndicator(
                        color: Color(0xFFF04F23),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
        bottomNavigationBar: MediaQuery.of(context).orientation == Orientation.portrait ?
        AnimatedBottomNavigationBar(
          backgroundColor: Colors.cyan,
          onTap: (index) {
          },
          activeIndex: 0,
          icons: const [
            Icons.f,
            Icons.f,
            Icons.f,
            Icons.f,
          ],
          gapLocation: GapLocation.center,
          notchSmoothness: NotchSmoothness.sharpEdge,
          leftCornerRadius: 32,
          rightCornerRadius: 32,
        ) :
        null,
      ),
    );
  }
}

Answer 1

Finally figured out the culprit, it's this widget here:

Center(
                child: FittedBox(
                  fit: BoxFit.fitHeight,
                  child: Text(
                    'h',
                    textAlign: TextAlign.center,
                    style: GoogleFonts.alumniSans(
                        fontSize: 40,
                        color: Colors.white
                    ),
                  ),
                ),
              ),

Even though the Center widget has a FittedBox, of course it does not have a size. I simply added a SizedBox to it and now the app is responsive on smaller devices as well. If only Flutter told me which one it was.