ExpandedとFlexibleの違い


展開はFlexibleの一種です


googlingが終わるたびに理解してすぐに記録を忘れてしまう知識
//이 코드는
Expanded(
  child: Foo(),
);

//이 코드와 동일함.
Flexible(
  fit: FlexFit.tight,
  child: Foo(),
);
  • FlexFit
  • FlexFit.緊:できるだけ増やします.
  • FlexFit.ゆとり:必要なだけ増える.
  • 興味深い例


    https://stackoverflow.com/questions/65933330/expanded-and-flexible-not-filling-entire-row
    
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.white,
          body:
           Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Row(
                mainAxisSize: MainAxisSize.max,
                children: [
                 // FlexibleWidget(),
                  ExpandedWidget(),
                  FlexibleWidget(),
                ],
              ),
              Row(
                children: [
                  ExpandedWidget(),
                  ExpandedWidget(),
                ],
              ),
              Row(mainAxisSize: MainAxisSize.min,
                children: [
                  FlexibleWidget(),
                  FlexibleWidget(),
                ],
              ),
              Row(mainAxisSize: MainAxisSize.min,
                children: [
                  FlexibleWidget(),
                  ExpandedWidget(),
                ],
              ),
            ],
         ),
        );
      }
    }
    
    class ExpandedWidget extends StatelessWidget {
      
      Widget build(BuildContext context) {
        return Expanded(
          child: Container(
            decoration: BoxDecoration(
              color: Colors.green,
              border: Border.all(color: Colors.white),
            ),
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text(
                'Expanded',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
        );
      }
    }
    
    class FlexibleWidget extends StatelessWidget {
      
      Widget build(BuildContext context) {
        return Flexible(
          child: Container(
            decoration: BoxDecoration(
              color: Colors.red,
              border: Border.all(color: Colors.white),
            ),
            child: Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text(
                'Flexible',
                style: TextStyle(color: Colors.black, fontSize: 24),
              ),
            ),
          ),
        );
      }
    }
  • 第2,3行の場合、展開は可能な限り増加しているのに対し、Flexibleは必要に応じて増加しているので予想した結果です.
  • の1、4行目については、展開された領域は、残りの領域を埋めることができる程度まで増加しなかった.
    ->ExpandedとFlexibleには、flexという親で使用できるサイズの比があります.デフォルトは1です.したがって,ROWで2つの部品を宣言した瞬間,各部品の最大サイズは1/2(=50%)に過ぎなかった.その結果,Expandedは自分に割り当てられた1/2だけ増加し,Flexibleは1/2だけ増加した.