Flutter 스터디 8 Container Widget 되짚어보기, Column & Row Widget 되짚어보기

순한맛 강좌 20 컨테이너 위젯 되짚어보기

 

Containers with no children try to be as big as possible.

> child가 없을 경우 컨테이너 위젯은 할 수 있는한 최대한의 공간을 차지한다.

 

▲결과 및 코드▼

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Container(),
    );
  }
}

> 배경색깔이 모두 파란색 > 최대한의 공간을 모두 차지

 

 

▲결과 및 코드▼

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Container(
        color: Colors.red //컨테이너 색깔 추가
      ),
    );
  }
}

> 컨테이너 색깔을 지정해주자 배경색이 파랑이 아닌 빨강

 

 

▲결과 및 코드▼

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Container(
        color: Colors.red,
        child: Text('Hello'),
      ),
    );
  }
}

> Text를 추가하자 Text 사이즈에 컨테이너 사이즈가 맞춰주어 글자가 있는 배경만 빨강, 다시 화면 배경은 파랑으로 바뀜

>> Containers with children size themselves to their children.

 

그와 별개로 위의 사진은 텍스트가 화면 바깥으로 나가있음.

 

- Safe Area Widget

위젯들이 화면 밖을 빠져나가지 않기 위해 범위를 지정해주는 위젯

▲결과 및 코드▼

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: SafeArea(
        child: Container(
        color: Colors.red,
        width: 100,
        height: 100,
        child: Text('Hello'),
      ),
      ),
          );
  }
}

 

만약, 바로 위 사진에서 좌측상단 시작점에서 떨어트리고 싶을땐 margin을 이용

 

margin: EdgeInsets.all(20), //가장자리로부터 대각선으로 20만큼 떨어짐

 

margin: EdgeInsets.symmetric( //위아래 편하게 지정해줄 때
  vertical: 80,
  horizontal: 20,
),

 

padding: EdgeInsets.all(20), //텍스트를 간격 배치할때 padding

 

margin : 위젯 바깥의 간격을 조정

padding : 위젯 안 간격 조정

 

컨테이너는 오직 하나만의 child를 가짐 별x10개

 

---

순한맛 21 컬럼 위젯과 로우 위젯 

 

▲결과 및 코드▼

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.teal,
      body: SafeArea( //화면 영역 안에 있게 해줌
        child: Center( 
          child: Column( //Column은 여러개의 위젯을 나열하기 때문에 child X
            children: <Widget>[ //[] <<위젯들의 리스트를 나열하는 곳
              Container(
                width: 100,
                height: 100,
                color: Colors.white,
                child: Text('Container 1'),
              ),
             .
             .
             .

> Column 위젯이 가능한 최대의 세로 영역을 차지하고 때문에 Center 위젯은 세로 정렬에 대한 통제를 잃음

>> container들을 정중앙에 배치하려면 children의 세로축 위치 조정해주는 mainAxisAlignment 불러와서 center 속성 필요

 

▲결과 및 코드▼

child: Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center, container들을 정중앙에 배치하려면 children의 세로축 위치 조정
    children: <Widget>[ 
      Container(
        .
        .
        .

 

 

다양한 이유로 Column 위젯이 세로축의 모든 공간을 차지하지 못하게 하려면

= mainAxisSize

▲결과 및 코드▼

body: SafeArea( 
  child: Center(
    child: Column(
      mainAxisSize: MainAxisSize.min, //Column 위젯이 세로축의 모든 공간을 차지하지 못하게
      children: <Widget>[ 
        Container(

 

 

- 세로축 정렬

container들을 위에서부터/아래서부터 정렬하는 방법

= verticalDirection

body: SafeArea( 
  child: Column( 
    verticalDirection: VerticalDirection.down, //컨테이너 위에서부터 아래로 정렬
    children: <Widget>[

 

verticalDirection: VerticalDirection.up

 

mainAxisAlignment: MainAxisAlignment.spaceEvenly, //동일한 간격을 두고 배치

 

mainAxisAlignment: MainAxisAlignment.spaceBetween, //정확한 비율로 화면의 상중하에 위치

 

- 가로축 정렬

crossAxisAlignment: CrossAxisAlignment.end, //가로축 끝점 정렬

 

body: SafeArea( 
  child: Column( 
    crossAxisAlignment: CrossAxisAlignment.end, //Column 내 위젯 가로축 정렬
    children: <Widget>[ 
      Container(
        width: 100,
        height: 100,
        color: Colors.white,
        child: Text('Container 1'),
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.blue,
        child: Text('Container 2'),
      ),
      Container(
        width: 100,
        height: 100,
        color: Colors.red,
        child: Text('Container 3'),
      ),
      Container( // invisible container를 만들어서 바로 위 오른쪽 정렬과 똑같은 정렬방법
        width: double.infinity, // 가로축 끝까지 container 확장
      )

 

child: Column( 
  crossAxisAlignment: CrossAxisAlignment.stretch, //stretch : 가로끝까지 뻗기
  children: <Widget>[ 
    Container( //부모로부터 속성을 물려 받으니 width 값 지정해 줄 필요 없음
      height: 100,
      color: Colors.white,
      child: Text('Container 1'),
    ),
    Container(
      height: 100,
      color: Colors.blue,
      child: Text('Container 2'),
    ),
    Container(
      height: 100,
      color: Colors.red,
      child: Text('Container 3'),
    ),
  ],

 

Container(
  height: 100,
  color: Colors.white,
  child: Text('Container 1'),
),
SizedBox( //컨테이너 사이 간격줄때
  height: 30.0,
),
Container(
  height: 100,
  color: Colors.blue,
  child: Text('Container 2'),
),

 

Row widget : Column 위젯이랑 똑같은 속성을 다 가지고 있음. 똑같이 갖다 쓰면 됨.

 

* 참조 : Widget Layout을 코드와 함께 바로 시각화해서 보여주는 사이트

Flutter Layout Cheat Sheet