column layout flexible sizes test

main.dart

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

Widget val(int flex, Color color, String str) {
  return Flexible(
      flex: flex,
      fit: FlexFit.tight,
      child: Container(
          color: color,
          child: Text(str,
              overflow: TextOverflow.ellipsis, textAlign: TextAlign.right)));
}

class MyHomePage extends StatelessWidget {
  final String title;

  const MyHomePage({
    super.key,
    required this.title,
  });

  Widget build(BuildContext context) {
    return Column(children: [
      Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            val(2, Colors.white, "a"),
            val(2, Colors.green, "b"),
            val(6, Colors.blue, "aaa"),
            val(6, Colors.yellow, "b"),
          ]),
      Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            val(2, Colors.white, "123"),
            val(2, Colors.green, "longword"),
            val(6, Colors.blue, "aaa"),
            val(6, Colors.yellow, "longword"),
          ]),
    ]);
  }
}