Flutter 기초 - Widget 비율 (14)

 

Flutter 기초 - Widget 비율 (14)

 

Flexible, Expanded

 - Flutter에서 Container공간 내의 공간비율을 조정할 때 사용되며 두 위젯은 비슷한 기능을 수행하지만 공간 할당 방식에서 약간의 차이가 존재한다.

 

1. Flexible

 - 자식 위젯에게 남은 공간을 어떻게 분배할지 결정한다.

 - Flexible의 속성을 통해서 제어가 가능하다.

 - 여러 자식간의 크기 비율을 조금더 세밀하게 조정하고 싶을 경우 사용

Flex	flex값이 다른 위젯 들과 비교해 공간의 분배 비율을 결정한다.
Fit	기본값은 FlexFit.loose로 자식 위젯이 필요한 만큼의 공간만 차지하게 되어 할당된 공간을 최대한 채우도록 강제한다.

 

 

2. Expanded

 - fit속성을 FlexFit.tight로 설정해 할당된 공간을 강제로 채운다.

 - 자삭이 가능한 많은 공간을 차지하도록 하고 싶을 때 사용

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Flexible and Expanded'),
      ),
      body: Body(),
    ),
  ));
}

class Body extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Flexible(
          flex: 1,
          child: Container(
            height: 100,
            color: Colors.red,
            child: Center(child: Text('Flexible 1')),
          ),
        ),
        Flexible(
          flex: 2,
          child: Container(
            height: 100,
            color: Colors.blue,
            child: Center(child: Text('Flexible 2')),
          ),
        ),
        Expanded(
          child: Container(
            color: Colors.blue,
            child: Center(child: Text('Expanded')),
          ),
        )
      ],
    );
  }
}

 

 -