[flutter] Flexible

Flexible의 fit 속성

 

- FlexFit.tight: 아래 child의 높이가 뭐든 상관없이 다른 Flexible과 같은 비율을 차지하게 된다

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Flexible(
          flex: 1,
          fit: FlexFit.tight, //아래 child의 높이가 뭐든 상관없이 다른 Flexible과 같은 비율을 차지하게 된다
          child: Container(
            height: 5, //상관없어졌다
            color: Colors.cyan)
          ),
        Flexible(
          flex: 1,
          child: Container(color: Colors.teal)
          ),
        Flexible(
          flex: 1,
          child: Container(color: Colors.indigo)
          ),
      ],
    );
  }
}

fit: Flexible.tight

 

- FlexFit.loose : child의 높이만큼 차지하되 다른 Flexible의 크기를 최대로 갖는다

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Flexible(
          flex: 1,
          fit: FlexFit.loose, //아래 child의 높이만큼 차지하되 다른 Flexible과 비율이 같으므로
          					  //다른 Flexible의 크기를 최대로 갖는다
          child: Container(
            height: 10, //반영된다
            color: Colors.cyan)
          ),
        Flexible(
          flex: 1,
          child: Container(color: Colors.teal)
          ),
        Flexible(
          flex: 1,
          child: Container(color: Colors.indigo)
          ),
      ],
    );
  }
}

50만큼 차지하고 있다

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Flexible(
          flex: 1,
          fit: FlexFit.loose, //아래 child의 높이만큼 차지하되 다른 Flexible과 비율이 같으므로
          					  //다른 Flexible의 크기를 최대로 갖는다
          child: Container(
            height: 500, // 아무리 크게 해도 크기가 한정되어있다
            color: Colors.cyan)
          ),
        Flexible(
          flex: 1,
          child: Container(color: Colors.teal)
          ),
        Flexible(
          flex: 1,
          child: Container(color: Colors.indigo)
          ),
      ],
    );
  }
}

child의 크기를 아무리 늘려도 최대가 정해져있다.