FIexble, Expanded

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(child: Column( children: [
        Text('Flexible/Expanded 미사용'),
        SizedBox(height: 20,),
        Row(
          children: [
            Container(width: 300, height: 50,color: Colors.red,),
            Container(width: 200, height: 50,color: Colors.orange,),
          ],
        ),

        SizedBox(height: 50,),
        Text('Flexible 사용'),
        SizedBox(height: 20,),
        Row(
          children: [
            Flexible(
                fit: FlexFit.loose,
                child: Container(width: 200, height: 50,color: Colors.red,)),
            Flexible(
                // fit: FlexFit.loose, // Flex fit의 기본값으로 생략이 가능하다!
                child: Container(width: 100, height: 50,color: Colors.orange,)),
          ],
        ),

        SizedBox(height: 50,),
        Text('Flexible.tight 사용'),
        SizedBox(height: 20,),
        Row(
          children: [
            Flexible(
                fit: FlexFit.tight,
                child: Container(width: 300, height: 50,color: Colors.red,)),
            Flexible(
                fit: FlexFit.tight,
                child: Container(width: 200, height: 50,color: Colors.orange,)),
          ],
        ),

        SizedBox(height: 50,),
        Text('Flexible.tight 사용'),
        SizedBox(height: 20,),
        Row(
          children: [
            Flexible(
                fit: FlexFit.tight,
                flex: 3,
                child: Container(width: 100, height: 50,color: Colors.red,)),
            Flexible(
                fit: FlexFit.tight,
                flex: 2,
                child: Container(width: 100, height: 50,color: Colors.orange,)),
            Flexible(
                fit: FlexFit.tight,
                flex: 1,
                child: Container(width: 100, height: 50,color: Colors.yellow,)),
          ],
        ),

        SizedBox(height: 50,),
        Text('Expanded 사용'),
        SizedBox(height: 20,),
        Row(
          children: [
            Expanded(
                flex: 1,
                child: Container(width: 300, height: 50,color: Colors.red,)),
            Expanded(
                flex: 2,
                child: Container(width: 200, height: 50,color: Colors.orange,)),
            Expanded(
                flex: 2,
                child: Container(width: 200, height: 50,color: Colors.yellow,)),
          ],
        ),
      ],
      )),
    );
  }
}