Flutter - Container 위젯

2023. 3. 2. 21:40Flutter/기본 위젯

-Container

특정 공간의 배경색,위치, 정렬, 크기 지정 등 다양한 기능을 가진 위젯으로

가장 많이 사용하는 위젯 중 하나입니다.

 

Container위젯 생성

 

  • 결과물

-> 핫리로드를하면 Scaffold 의 배경색이 컨테이너 배경색에 가려지게된다.

자식이 없을경우 컨테이너 위젯이 공간을 다 차지하게된다.

그러면 자식이 잇을경우 어떻게될까? 한번 알아보겟습니다

 

Container위젯의 크기가 child 크기로 줄엇다.

 

 

  • Container위젯을 다른 위젯으로 감싸보겟습니다.

body:Center안에 Continer를 생성하고 Text를 입력햇습니다.

명확히 구분하기위해서 스캐폴드 배경색을 indigo로 주었고, Container 배경색은 deepOrange를 주엇다.

body는 center로  text값을 입력했습니다.

 

플러터는

1) 자식을 오직 하나만 갖는 위젯   : Child

2) 여러 자식을 갖는 위젯 : Children

 

컨테이너는 오직 하나의 자식을 갖는다


결과

 

Container부분에 더블클릭을하면 Wrap with widget을 눌러주면 다른 위젯에 감싸지게된다.

SafeArea로 감싸준다.

 

EdgeInsets이란?

padding , margin과 같이 크기를 조정할때 자주 사용하는 클래스이다.

텍스트이 위치를 동서남북 20만큼 마진을 주엇다.

 

'Flutter > 기본 위젯' 카테고리의 다른 글

Flutter - Button 위젯  (0) 2023.03.04
Flutter - ListView, ListTile 위젯  (0) 2023.03.04
Flutter - SingleChildScrollView 위젯  (0) 2023.03.04
Flutter - Expanded 위젯  (0) 2023.03.04