Layout 위젯(1)

Layout 위젯

  '단 하나의' 하위 위젯의 레이아웃 (배경 Color, 여백, 간격, 테두리, 등의 스타일 등등) 을 설정할 수 있는 위젯.

 

Container 위젯

  가장 일반적으로 사용되는 위젯중 하나로써, 다른 위젯을 래핑하고 모양을 제어하는 방법을 제공하는 위젯

body: Center(--),

 

Container 위젯 옵션

  - padding

    컨테이너 내부 간격 조절 옵션

Container(
    padding: const EdgeInsets.only(
        left: 20,
        right: 20,
    ),
)

 

  - width / height

    컨테이너의 너비, 높이 설정 옵션

Container(
    width : 200,
    height : 150,
)

 

  - color

    컨테이너 내부 배경 색상 설정 옵션

Container(
    color : Colors.red,
)

 

  - decoration

    컨테이너의 그라데이션, 그림자효과, 모서리설정 등등 컨테이너의 고급스런 UI 설정을 하기 위한 옵션

    각각 gradient, boxShadow, borderRadius 등등 세부 옵션을 이용하여 설정한다.

Container(
    decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [
                Color.fromARGB(255, 255, 59, 98).withOpacity(0.7),
                Color.fromARGB(255, 255, 59, 98)
            ],
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
        ),
        borderRadius: BorderRadius.circular(10),
        boxShadow: [
            BoxShadow(
            color: Color.fromARGB(255, 255, 59, 98).withOpacity(0.5),
            spreadRadius: 5,
            blurRadius: 7,
            offset: Offset(0, 3), // changes position of shadow
            ),
        ],
    ),
)

 

  - margin

    컨테이너 외부의 레이아웃 마진을 설정하는 옵션

Container(
    margin : const EdgeInsets.all(5),
)

 

 

SizedBox 위젯

  고정 크기 상자를 만들때 사용하는 위젯.

  주로 컨테이너 위젯간의 간격을 설정할때 주로 사용한다. (각 위젯의 padding값을 주고 싶지 않을때)

// Column 내부에서 위/아래 간격을 조절하기 위한 사용법 (height)
Column(
    children: [
        Container(),
        SizedBox(
            height : 10
        ),
        Container(),
    ]
)

// Row 내부에서 좌/우 간격을 조절하기 위한 사용법 (width)
Row(
    children: [
        Container(),
        SizedBox(
            width : 10
        ),
        Container(),
    ]
)

 

 

Row / Colunm 위젯

  각각 가로(행), 세로(열) 레이아웃을 만드는데 사용되는 위젯

 

Row / Colunm 위젯 옵션

  - mainAxisAlignment

    정렬시 어떠한 기준으로 정렬할지를 정하는 옵션 ( Row의 main은 가로, Colunm의 main은 세로 )

Row(
    mainAxisAlignment: MainAxisAlignment.center,
    // mainAxisAlignment: MainAxisAlignment.start,
    // mainAxisAlignment: MainAxisAlignment.end,
    // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    // mainAxisAlignment: MainAxisAlignment.spaceBetween,
    // mainAxisAlignment: MainAxisAlignment.spaceAround,
)

 

  - crossAxisAlignment

    Row위젯의 mainAxis는 가로기준이므로, crossAxis는 세로기준 정렬옵션

    Row위젯에서 crossAxisAlignment를 적용하기 위해서는 부모위젯의 높이(세로값)이 설정되어 있어야 사용할 수 있다.

    Column위젯의 mainAxis는 세로기준이므로, crossAxis는 가로기준 정렬옵션

    Column 위젯에서 crossAxisAlignment를 적용하기 위해서는 부모위젯의 너비(가로값)이 설정되어 있어야 사용할 수 있다.

Container(
    // Column일 경우 width가 설정되어 있어야 함
    height : 200,
    child : Row(
        crossAxisAlignment : CrossAxisAlignment.center,
        // crossAxisAlignment : CrossAxisAlignment.start,
        // crossAxisAlignment : CrossAxisAlignment.end,
        // crossAxisAlignment : CrossAxisAlignment.stretch,  // 꽉채우기
        // crossAxisAlignment : CrossAxisAlignment.baseline, // baseline기준 수평정렬
    ),
)

 

  - children

    Row / Column 위젯은 하위위젯으로 여러개의 위젯을 넣을 수 있음

Row(
    children : [
        Container(),
        Container(),
    ]
)

or

// 동일 반복 위젯을 배치할 경우
Column(
    children : List.generate(
        3,
        (index) => Container(
        )
    )
)