Expanded와 flexible

Expanded와 Flexible

요거 두개 굉장히 헷갈린다, 그렇다는건 Flutter 로 취업을 하고자 할때 자주 나올수있는 질문이라는것이다ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

Flexible

• flex는 비율이다, 가능한 공간을 차지하게 하는 비율을 조정하는 위젯이다.

-Inheritance

Object → DiagnosticableTree → Widget → ProxyWidget → ParentDataWidget → Flexible

-Properties

• fit
• Column 혹은 Row 기본축의 남은 공간을 어떻게 차지 하게 할 것인지를 정해주는 속성
• flexfit.tight : 기본축의 남은 공간을 전부 채우도록 합니다.

class FlexibleDemo extends StatelessWidget {
  const FlexibleDemo({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('test'),
        ),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Flexible(
                fit: FlexFit.tight,
                child: YellowBox(
                  title: 'YellowBox',
                ),
              ),
              BlueBox(title: 'BlueBox'),
            ],
          ),
        ),
      ),
    );
  }
	}
class YellowBox extends StatelessWidget {
  final String title;

  const YellowBox({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      //width: 50,
      height: 100,
      color: Colors.yellow,
      child: Text(title),
    );
  }
}

class BlueBox extends StatelessWidget {
  final String title;

  const BlueBox({
    this.title,
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      //width: 50,
      height: 100,
      color: Colors.blue,
      child: Text(title),
    );
  }
}

• 둘의 크기는 기본적으로 같게해놨으나 FlexFit.tight를 쓴 위젯은 남은공간을 모두 차지하게 되었다.

• flexFit.loose : 기본축의 남은 공간을 채우도록 하되 필요한 공간만 차지하도록 합니다.
  
  

• 기본값과 같은 상태가 된다.

• flex: Column 혹은 Row 기본축의 남은공간을 flex 값 / 전체 자식들의 flex의 합만큼 차지하도록 합니다.

class FlexibleDemo extends StatelessWidget {
  const FlexibleDemo({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('test'),
        ),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Flexible(
                flex: 5,
                child: YellowBox(
                  title: 'YellowBox',
                ),
              ),
              Flexible(
                flex: 1,
                child: BlueBox(title: 'BlueBox'),
              ),
              Flexible(
                flex: 1,
                child: YellowBox(
                  title: 'yellowbox',
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class YellowBox extends StatelessWidget {
  final String title;

  const YellowBox({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.yellow,
      child: Text(title),
    );
  }
}

class BlueBox extends StatelessWidget {
  final String title;

  const BlueBox({
    this.title,
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.blue,
      child: Text(title),
    );
  }
}

• flex 속성을 이용하여 5:1:1 비율로 맞춰놨다.

Expanded

• 자식 위젯의 크기를 최대한으로 확장시켜주는 위젯이다.

-Inheritance

Object → DiagnosticableTree → Widget → ProxyWidget → ParentDataWidget → Expanded

class FlexibleDemo extends StatelessWidget {
  const FlexibleDemo({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('test'),
        ),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Expanded(
                child: YellowBox(
                  title: 'YellowBox',
                ),
              ),
              BlueBox(title: 'BlueBox'),
              YellowBox(
                title: 'yellowbox',
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class YellowBox extends StatelessWidget {
  final String title;

  const YellowBox({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.yellow,
      child: Text(title),
    );
  }
}

class BlueBox extends StatelessWidget {
  final String title;

  const BlueBox({
    this.title,
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.blue,
      child: Text(title),
    );
  }
}

동일한 크기의 위젯이지만 Expanded를 사용한 YellowBox가 남은 위젯의 여백으로 최대한 확장되었다.