Fractional Box in a Column, not working the way one would expect

FractionalBoxPlay.dart

// Copyright (c) 2021 Howard Chong
// See discussion of FractionalSizedBox in https://stackoverflow.com/questions/57242651/using-fractionallysizedbox-in-a-row/70026340#70026340
import 'dart:math' as math;
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fractional Blox Dartpad Playpen',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget{
  const HomePage({ Key? key}) : super(key: key);
  
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _orangeCount = 2;
  int _blueCount=1;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Fractional Blox Dartpad Playpen')),
        body: BoxPlay(blueCount: _blueCount, orangeCount: _orangeCount),
        floatingActionButton: Column(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            FloatingActionButton(
              child: const Text("+orange"),
              backgroundColor: Colors.orange,
              onPressed: () {
                setState(() => _orangeCount++);
              }
            ),
            FloatingActionButton(
              child: const Text("-orange"),
              backgroundColor: Colors.orange,
              onPressed: () {
                  setState(() => _orangeCount= math.max(0,_orangeCount-1));
                }
            ),
            FloatingActionButton(
              child: const Text("+blue"),
              onPressed: () {
                print("increment blue");
                setState(() => _blueCount++);
              }
            ),
            FloatingActionButton(
              child: const Text("-blue"),
                            onPressed: () {
                  setState(() => _blueCount= math.max(0,_blueCount-1));
                },
            )
          ])
      );
  }
}
  
  

class BoxPlay extends StatelessWidget {
  const BoxPlay({
    Key? key,
    required this.blueCount,
    required this.orangeCount,
  }) : super(key:key);
    
  final int blueCount;
  final int orangeCount;
  
  @override
  Widget build(BuildContext context) {
    List<Widget> boxesToDisplay = [
      ...List.filled(blueCount, BlueBox()), 
      ...List.filled(orangeCount,Flexible(child: FractBox()) )
    ];
    boxesToDisplay.shuffle();
    
    return Column(
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: boxesToDisplay,
    );
  }
}

class BlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        width: 20,
        height: 20,
        decoration: BoxDecoration(color: Colors.blue, border: Border.all()));
  }
}

class FractBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FractionallySizedBox(
        widthFactor: 0.25,
        heightFactor: 0.5,
        // One might expect each box to be half height. But it isn't.
        // With two boxes,
        child: Container(
          alignment: Alignment.center,
          decoration: const BoxDecoration(
            color: Colors.orange,
            shape: BoxShape.rectangle,
          ),
          child: Text('heightFactor=0.5, but not half screen-height?',
              style: lightTextTheme.bodyText1),
        ));
  }
}

TextTheme lightTextTheme = TextTheme(
    bodyText1: GoogleFonts.openSans(
  fontSize: 14.0,
  fontWeight: FontWeight.w700,
  color: Colors.black,
));