Flex VS Row/Column

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const App());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  var _isCompact = true;
  @override
  Widget build(BuildContext context) {
    final children = List.generate(
      5,
      (index) => _ColorfulBox(index: index),
    );
    return Scaffold(
      appBar: AppBar(title: const Text('Home')),
      body: Row(
        children: [
          Expanded(
            child: Flex(
              direction: _isCompact ? Axis.vertical : Axis.horizontal,
              mainAxisAlignment: MainAxisAlignment.center,
              children: children,
            ),
          ),
          const VerticalDivider(),
          Expanded(
            child: _isCompact
                ? Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: children,
                  )
                : Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: children,
                  ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {
          _isCompact = !_isCompact;
        }),
        child: const Icon(Icons.refresh),
      ),
    );
  }
}

class _ColorfulBox extends StatefulWidget {
  const _ColorfulBox({required this.index});

  final int index;

  @override
  State<_ColorfulBox> createState() => _ColorfulBoxState();
}

class _ColorfulBoxState extends State<_ColorfulBox> {
  final _colors = [
    Colors.red,
    Colors.green,
    Colors.blue,
    Colors.yellow,
    Colors.purple,
    Colors.orange,
    Colors.pink,
    Colors.cyan,
    Colors.lime,
    Colors.teal,
    Colors.indigo,
    Colors.brown,
    Colors.grey,
  ];
  late var _index = widget.index;
  @override
  Widget build(BuildContext context) {
    _index++;
    return Container(
      width: 50,
      height: 50,
      color: _colors[_index % _colors.length],
      alignment: Alignment.center,
      child: Text('$_index'),
    );
  }
}