[Flutter] Widget - Row

1. Row란?

Row Widget은 하위 Widget들을 가로 배열로 보여주는 Widget입니다.

사용 시 주의사항으로는 하위 Widget들이 표현 가능한 범위를 초과하면 오류가 발생합니다.

화면보다 더 많은 하위 Widget을 표현하고 싶다면, 스크롤을 제공하는 ListView Widget을 사용해야 합니다.

2. Row 생성자 및 속성

https://api.flutter.dev/flutter/widgets/Row-class.html

Row class - widgets library - Dart API

Flutter Material API 가이드를 통해 Row Widget의 생성자 및 중요 속성에 대해 정리해보도록 하겠습니다.

○ 생성자(Constructor)

<Row 생성자>

 

○ 속성(Property)

1) children

<children 속성>

- 매개변수 타입 : List<Widget>

- 역할 : Row Widget 내 복수의 하위 Widget 컨텐츠 추가 가능

 

2) crossAxisAlignment

<crossAxisAlignment 속성>

- 매개변수 타입 : CrossAxisAlignment

- 역할 : 횡축 정렬, Widget Widget에서는 세로축 기준 정렬

• CrossAxisAlignment.center : 세로축 기준 중앙 정렬

<CrossAxisAlignment.center>

• CrossAxisAlignment.start : 세로축 기준 상단 정렬

<CrossAxisAlignment.start>

• CrossAxisAlignment.end : 세로축 기준 하단 정렬

<CrossAxisAlignment.end>

• CrossAxisAlignment.stretch : 하위 Widget의 height를 여백 없이 채움
  
  

<CrossAxisAligntment.stretch>

• CrossAxisAlignment.baseline : TextBaseline Widget과 함께 사용해야 하며, 여러 문자열에 대해 하단 정렬

<CrossAxisAlignment.baseline 속성 미적용>

<CrossAxisAlignment.baseline 속성 적용>

• CrossAxisAlignment.baseline 샘플 코드

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: SizedBox(
            width: double.infinity,
            height: double.infinity,
            child: Row(
              // crossAxisAlignment: CrossAxisAlignment.baseline,
              // textBaseline: TextBaseline.alphabetic,
              children: const [
                Text('슭곰발', style: TextStyle(fontSize: 30)),
                Text('XyZ', style: TextStyle(fontSize: 25)),
                Text('789', style: TextStyle(fontSize: 20)),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

 

3) mainAxisAlignment

<mainAxisAlignment 속성>

- 매개변수 타입 : MainAxisAlignment

- 역할 : 주축 정렬, Row Widget에서는 가로축 기준 정렬

• MainAxisAlignment.center : 가로축 기준 중앙 정렬

<MainAxisAlignment.center>

• MainAxisAlignment.start : 가로축 기준 좌측 정렬

<MainAxisAlignment.start>

• MainAxisAlignment.end : 가로축 기준 우측 정렬

<MainAxisAlignment.end>

• MainAxisAlignment.spaceAround : 첫 번째 하위 Widget의 앞 여백과 마지막 하위 Widget의 뒤 여백을 나머지 하위 Widget 사이 간격의 절반만큼 배치 후, 나머지 하위 Widget 사이 간격을 균등하게 정렬

<MainAxisAlignment.spaceAround>

• MainAxisAlignment.spaceBetween : 첫 번째와 마지막 하위 Widget을 맨 앞과 맨 뒤에 배치 후, 나머지 하위 Widget 사이 간격을 균등하게 정렬

<MainAxisAlignment.spaceBetween>

• MainAxisAlignment.spaceEvenly : 하위 Widget 간의 간격을 균등하게 정렬

<MainAxisAlignment.spaceEvenly>

3. Row 예제 코드

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Container(
            width: double.infinity,
            height: double.infinity,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                SizedBox(
                  height: 100.0,
                  width: 100.0,
                  child: Container(
                    color: Colors.red,
                  ),
                ),
                SizedBox(
                  height: 100.0,
                  width: 100.0,
                  child: Container(
                    color: Colors.green,
                  ),
                ),
                SizedBox(
                  height: 100.0,
                  width: 100.0,
                  child: Container(
                    color: Colors.blue,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    ),
  );
}

예제 코드의 의미는 다음과 같습니다.

• Scaffold Widget으로 메인 화면을 구현
  • SafeArea Widget으로 여백이 확보된 컨텐츠 영역 지정
    • Container Widget으로 하위 Widget 영역 마련
      • Container Widget의 크기를 가로, 세로 기준으로 전체 영역의 크기만큼 설정
      • child 속성으로 Row Widget을 하위 Widget으로 설정
        • 주축, 횡축 기준으로 가운데 정렬
        • children 속성으로 다수의 하위 Widget들을 가로로 배열
          • 크기 100 x 100의 빨강, 파랑, 초록 색상의 박스 모양 Widget 생성

4. Row 실행 결과

<Row Widget 실행 화면>