[Flutter] Row, Column

오랜만에 다시 flutter를 하게 됐다... 생각이 하나도 안나서 기초부터 다시 학습하려 한다 ㅜ

 

 

https://flutter-ko.dev/docs/codelabs/layout-basics

Basic Flutter layout concepts

 

Row 예제를 실행해보자

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        BlueBox(),
        BlueBox(),
        BlueBox()
      ],
    );
  }
}

class BlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(),
      ),
    );
  }
}

 

위 코드로 실행을 시켰더니  아래와 같은 에러가 났다.

 

Assertion failed: file:///D:/flutter/packages/flutter/lib/src/rendering/flex.dart:453:18
textDirection != null
"Horizontal RenderFlex with multiple children has a null textDirection, so the layout order is undefined."

 

 

그 이유는 Row 위젯에서 textDirection을 지정을 안해줘서 나는 에러였다. 해결법은 다음과 같다.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

//지도 기능

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Row(
      textDirection: TextDirection.rtl,
      children: [
        BlueBox(),
        BlueBox(),
        BlueBox()
      ],
    );
  }
}

class BlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(),
      ),
    );
  }
}

 

 

TextDirection에는 ltr과 rtl 두 가지 값이 있다.

ltr은 아래 그림과 같다.

 

 

rtl은 아래 그림과 같다.

 

 

 

그럼 Row 예제를 Column으로 바꿔서 실행해보자

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        BlueBox(),
        BlueBox(),
        BlueBox()
      ],
    );
  }
}

class BlueBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: 50,
      height: 50,
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(),
      ),
    );
  }
}

 

Column은 textDirection 속성이 없어도 동작을 했다.

 

 

 

혹시 Column도 위, 아래 방향을 지정할 수 있지 않을까 해서 찾아봤다.

direction이라고 쳐보니 verticalDirection 이라는 속성을 발견했다. verticalDirection은 up, down 두 가지 값이 있다.

 

 

verticalDirection up은 아래 그림과 같다.

 

 

verticalDirection down은 아래 그림과 같다.

 

 

예상과는 달리 up이면 하단 정렬이고, down이면 상단 정렬이 된다.

 

 

---

mainAxisSize 속성

mainAxisSize 속성은 android xml에서 match_parent, wrap_content라고 보면 된다고 한다.

---

mainAxisAlignment 속성

간단하게 그림으로 설명하겠다.

Row의 경우 아래와 같다.

여기서, MainAxisAlignment.spaceAround와 MainAxisAlignment.spaceEvenly가 비슷해 보이지만 약간의 차이가 보인다.

MainAxisAlignment.spaceEvenly : child 사이 여유 공간을 균등하게 나눔

MainAxisAlignment.spaceAround : 첫 번째와 마지막 child 앞뒤에 여유 공간을 나머지 child와 공간의 절반만큼 배치

 

 

Column의 경우 아래와 같다.

 

---

crossAxisAlignment 속성

 

crossAxisAlignment.baseline : 캐릭터 기준선에 따라 자식 정렬. Text 클래스 전용이며 textBaseline속성 설정되어 있어야 함.

 

Row의 경우 아래와 같다.

 

 

Column의 경우 아래와 같다.