SizedBox inside Expanded

main.dart

/*
 * SizedBox inside Expanded
 * https://gist.github.com/PlugFox/a35d9c045c6722173ce5d11636298834
 * https://dartpad.dev/a35d9c045c6722173ce5d11636298834
 * Matiunin Mikhail <plugfox@gmail.com>, 02 May 2023
 */

import 'dart:async';

import 'package:flutter/material.dart';

void main() => runZonedGuarded<Future<void>>(
      () async => runApp(const App()),
      (error, stackTrace) => print('Top level exception $error'),
    );

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

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'SizedBox inside Expanded',
        home: Scaffold(
          appBar: AppBar(
            title: const Text('SizedBox inside Expanded'),
          ),
          body: SafeArea(
            child: Center(
              child: SizedBox(
                width: 256,
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: const <Widget>[
                    SizedBox(
                      height: 128,
                      child: DefaultCase(),
                    ),
                    Divider(),
                    SizedBox(
                      height: 128,
                      child: Case1(),
                    ),
                    Divider(),
                    SizedBox(
                      height: 128,
                      child: Case2(),
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      );
}

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

  @override
  Widget build(BuildContext context) => Row(
        children: const <Widget>[
          Expanded(
            child: ColoredBox(
              color: Colors.red,
              child: SizedBox.expand(),
            ),
          ),
          Expanded(
            child: ColoredBox(
              color: Colors.green,
              child: SizedBox.expand(),
            ),
          ),
          Expanded(
            child: ColoredBox(
              color: Colors.blue,
              child: SizedBox.expand(),
            ),
          ),
        ],
      );
}

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

  @override
  Widget build(BuildContext context) => Row(
        children: const <Widget>[
          Expanded(
            child: ColoredBox(
              color: Colors.red,
              child: SizedBox.expand(),
            ),
          ),
          Expanded(
            child: ColoredBox(
              color: Colors.green,
              child: SizedBox.expand(),
            ),
          ),
          Expanded(
            child: SizedBox(
              width: 24,
              child: ColoredBox(
                color: Colors.blue,
                child: SizedBox.expand(),
              ),
            ),
          ),
        ],
      );
}

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

  @override
  Widget build(BuildContext context) => Row(
        children: const <Widget>[
          Expanded(
            child: ColoredBox(
              color: Colors.red,
              child: SizedBox.expand(),
            ),
          ),
          Expanded(
            child: ColoredBox(
              color: Colors.green,
              child: SizedBox.expand(),
            ),
          ),
          Expanded(
            child: SizedBox(
              width: 256,
              child: ColoredBox(
                color: Colors.blue,
                child: SizedBox.expand(),
              ),
            ),
          ),
        ],
      );
}