[FLUTTER] Row()

tygerhwang·2021년 10월 18일
0

Row()

이번 글에서 소개할 widget은 이전 글에서 다루었던 Column() 위젯과 유사한 위젯인 Row() widget이다

Column이 widget을 세로로 배치한다면 Row는 가로로 배치시키는 위젯이다

Row({
    Key? key,
    MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
    MainAxisSize mainAxisSize = MainAxisSize.max,
    CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
    TextDirection? textDirection,
    VerticalDirection verticalDirection = VerticalDirection.down,
    TextBaseline? textBaseline, // NO DEFAULT: we don't know what the text's baseline should be
    List<Widget> children = const <Widget>[],
  })

사용 방법은 Column과 똑같다고 볼 수 있다

3개의 container로 만든 box를 가로로 배치시키는 코드이다.

여기서 중요한 점이 mainAxisAlignment 속성이다
Column 위젯에서 mainAxisAlignment 속성 값이 위젯을 세로로 컨트럴 했다면 Row 위젯에서는 가로를 컨트럴 하게 된다
crossAxisAlignmet 또한 똑같다 Column에서는 가로를 Row에서는 세로를 컨트럴 한다

Row(
          mainAxisAlignment: mainAxisAlignment,
          children: [
            Container(
              width: 100,
              height: 100,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(18), color: Colors.pink),
            ),
            Container(
              width: 100,
              height: 100,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(18),
                  color: Colors.pink.shade300),
            ),
            Container(
              width: 100,
              height: 100,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(18),
                  color: Colors.pink.shade100),
            ),
          ],
        ),

mainAxisAlignment의 옵션

mainAxisAlignment: MainAxisAlignment.start
mainAxisAlignment: MainAxisAlignment.center
mainAxisAlignment: MainAxisAlignment.end
mainAxisAlignment: MainAxisAlignment.spaceAround
mainAxisAlignment: MainAxisAlignment.spaceBetween
mainAxisAlignment: MainAxisAlignment.spaceEvenly

Example

profile
FLUTTER Developer

0개의 댓글