위젯에서 if문 쓰기 (inline if)

일반적으로 if문을 쓰기 위해선 함수에서 선언하고 사용한다

하지만 함수까진 쓰지 않고 간단하게 삼항 연산자와 같이 위젯에서 if문을 사용해

경우에 따라 출력되는 위젯을 선택적으로 출력해 줄 수 있다 

그럼 flutter에서 조건문을 사용하는 3가지를 알아보자!

 

1. 삼항 연산자 - 단일 조건을 확인해야 하는 경우 적합

2. 스프레드 연산자

3. 다른 방법

 

우선 아래의 코드처럼 child 속성을 가진 위젯을 if를 사용하지 못한다

children 속성을 가진 ( column / row 등등) 컬렉션을 내부에 가지는 경우 조건문 작성 가능하다

 

[ 삼항 연산자 ]

Center(
    child: isLiked
        ? Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: const [
              Text(
                '12',
                style: TextStyle(fontSize: 120),
              ),
              Icon(
                Icons.thumb_up,
                size: 180,
                color: Color(0xff6ae792),
              ),
            ],
          )
        : const Icon(
            Icons.thumb_up,
            size: 200,
            color: Colors.black,
          ))

[ 스프레드 연산자 ]

children : [
  if (age > 18) ...[
    // show license
  ] else ...[
    // show error message
  ]
]

예제 1)

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    if (isShowComment) ...[
      const Icon(
        Icons.comment,
        size: 200,
        color: Color(0xff6ae792),
      )
    ] else ...[
      const Icon(
        Icons.comment,
        size: 100,
        color: Colors.black,
      )
    ]
  ],
)

예제 2)

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    const Icon(
      Icons.thumb_up,
      size: 100,
      color: Colors.black,
    ),
    if (isShowComment) ...[
      const Icon(
        Icons.comment,
        size: 200,
        color: Color(0xff6ae792),
      )
    ]
  ],
)

예제 3)

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    if (isShowComment) ...[
      const Icon(
        Icons.comment,
        size: 200,
        color: Color(0xff6ae792),
      )
    ] else if (isShowLike) ...[
      //Your widget
    ] else ...[
      //Your widget
    ]
  ],
)

 

[ 함수로 선언 ]

함수로 사용 시 Widget 타입으로 선언해 함수를 위젯처럼 사용 가능해진다 

Center(
  child: getLockStatus(),
)
Widget getLockStatus() {
  if (isLocked) {
    return const Icon(
      Icons.lock_outline,
      size: 200,
      color: Color(0xff6ae792),
    );
  } else {
    return const Icon(
      Icons.lock_open,
      size: 200,
      color: Colors.black,
    );
  }
}