플러터(flutter) - Container와 SizedBox의 차이

Container와 SizedBox 위젯은 둘 다 width와 height를 가진다. 그래서 너비와 높이를 설정할 수 있다.

• 하지만 차이점이 존재한다.

 

Container

Container의 위젯은 width와 height를 넣지 않으면, 최대 크기로 확장해준다.

import "package:flutter/material.dart";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Container와 SizedBox 차이",
      home: Example(),
    );
  }
}

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container( // 컨테이너 위젯
        color: Colors.blue,
        child: Center(
          child: Text("컨테이너"),
        ),
      ),
    );
  }
}

Container 위젯

 

너비와 높이를 설정하면..

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        width: 300, // 가로 설정
        height: 300, // 높이 설정
        color: Colors.blue,
        child: Center(
          child: Text("컨테이너"),
        ),
      ),
    );
  }
}

Container 위젯 - 너비/높이 설정

 

SizedBox

반면, SizedBox 위젯은 width와 height 둘 중 하나라도 설정하지 않으면, 크기는 child의 크기에 알맞게 설정된다..

import "package:flutter/material.dart";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Container와 SizedBox 차이",
      home: Example(),
    );
  }
}

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
      child: SizedBox( // SizedBox
        child: Container(
          color: Colors.blue,
          child: Text("Container"),
        ),
      ),
    ));
  }
}

SizedBox 위젯

 

Container는 width와 height가 없으면 크기가 확장되었지만, SizedBox는 child 위젯 크기에 딱 맞게 설정된다.

그리고, color 속성이 없어서 색상을 입힐 수 없다.

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SizedBox(
          width: 200, // 너비 추가
          height: 200, // 높이 추가
          child: Container(
            color: Colors.blue,
            child: Text("Container"),
          ),
        ),
      ),
    );
  }
}

SizedBox 위젯 - 너비/높이 설정

 

다른 글 보기

2020/12/23 - [Flutter] - Flutter 설치 및 환경 구축 (MacOSX)

Flutter 설치 및 환경 구축 (MacOSX)

2021/01/02 - [Flutter] - 플러터(flutter) - 기본 레이아웃 (Column, Row, Container)

플러터(flutter) - 기본 레이아웃 (Column, Row, Container)

2021/01/02 - [Flutter] - 플러터(flutter) - Column 세로 정렬 방법 (MainAxisAlignment)

플러터(flutter) - Column 세로 정렬 방법 (MainAxisAlignment)

---

Reference

www.python2.net/questions-186045.htm

dart - 더미 빈에 대한 Flutter Container () vs SizedBox ()