패스트캠퍼스 환급챌린지 8일차 미션(2월 8일): 15개 프로젝트로 실무까지 끝내는 Dart & Flutter 앱 개발 강의 후기

오늘은 어제 공부했던 내용을 잠깐 짚고 다음 내용으로 넘어가려한다.

어제는 다수의 요소를 수평 / 수직으로 나열할 수 있는 Row / Column 위젯에 대해 알아보았는데, 실습 코드부터 살펴보자.

/// ...
class CustomContainer extends StatelessWidget {
  const CustomContainer({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Row(
          children: [
            Container(
              width: 100,
              height: 80,
              child: Center(child: Text('Hello Container')),
              decoration: BoxDecoration(
                  color: Colors.blueAccent,
                  border: Border.all(
                      color: Colors.black26, width: 4, style: BorderStyle.solid),
                  borderRadius: BorderRadius.circular(20)),
            ),Container(
              width: 100,
              height: 80,
              child: Center(child: Text('Hello Container')),
              decoration: BoxDecoration(
                  color: Colors.blueAccent,
                  border: Border.all(
                      color: Colors.black26, width: 4, style: BorderStyle.solid),
                  borderRadius: BorderRadius.circular(20)),
            ),Container(
              width: 100,
              height: 80,
              child: Center(child: Text('Hello Container')),
              decoration: BoxDecoration(
                  color: Colors.blueAccent,
                  border: Border.all(
                      color: Colors.black26, width: 4, style: BorderStyle.solid),
                  borderRadius: BorderRadius.circular(20)),
            ),
          ],
    )
    );
  }
}

Row / Column 위젯을 통해 어제 간단하게 만든 Container 위젯 3개를 감싸서 수평 / 수직으로 정렬해보았다. 결과는 아래와 같다.

Row와 Column은 위젯이기 때문에 서로를 포함할 수 있다. (Row 내부에 Column이 들어가서 복잡한 레이아웃을 구성하거나 그 반대도 가능) 대신에 차지하는 너비와 높이는 상위 위젯(위 케이스의 경우 Container)의 것을 그대로 상속 받기 때문에 딱 여러 위젯 요소들의 배치에 관련된 작업을 할 때 사용하는 것이 좋을 것 같다.

 

인스타그램 같은 앱을 보면 상단에 다른 유저들의 스토리 목록을 수평 스크롤을 통해 확인할 수 있는데, 그런 스크롤 뷰는 어떻게 만들 수 있을까? 정답은 SingleChildScrollView 위젯을 사용하면 된다.

 

일단 Row 내부의 Container의 개수를 화면의 너비를 꽉 채우고도 남을 정도로 늘려주자. 나는 5개로 늘렸다.

그리고 Row를 감싼 Container를 SingleChildScrollView로 바꾸고, scrollDirection: Axis.horizontal 속성을 할당해주자.

그리고 인스타그램의 스토리를 얘로 들었으니까 컨테이너를 동그랗게 만들고, margin: EdgeInsets.symmetric(horizontal: 8) 정도로 좌우 영역에 대한 margin도 줘보자.

그럼 이렇게 된다.

 

대충 Row와 Column, 스크롤뷰를 만들 때 사용하는 SingleChildScrollView 위젯에 대해 알아보았다.

다음으로는 Flex 계열의 위젯 두 개가 있는데, 이에 대해 알아보자.

일단 이 Flex는 웹 개발에서의 Flex가 아니다. 반응형 레이아웃을 설계할 때 동적으로 디바이스의 화면 너비나 높이를 채워주는 그런 동적인 사이즈를 가진 영역을 나타내기 위한 별도의 기능을 하는 위젯으로 생각해야한다.

 

일단 아래와 같이 Column의 자식으로 두 개의 Flexible 위젯을 할당하고, 이들의 배경색만 지정해줘도 아래와 같이 화면을 꽉 채우게 된다.

이 두 Flexible 위젯의 차지하는 비율을 조정하고 싶다면, 내부에 flex라는 속성에 해당 비율 값을 작성해주면 된다.

위의 경우 빨간 영역과 파란 영역의 비율을 1:2로 조정하고 싶다면 아래와 같이 코드를 변경해줄 수 있다.

그리고 Flexible과 비슷하지만 약간의 차이점이 있는 Expanded라는 위젯도 있다.

두 위젯은 둘 다 반응형 레이아웃을 구성하는 데 사용되는게 비슷하고, 차이점은 Constraint 기준이 Expanded의 경우는 위젯 외부, Flexible의 경우 위젯 내부의 Child의 영향을 받는다는 데 있다.

예를 들어 이런 경우를 생각해볼 수 있다.

class CustomBody extends StatelessWidget {
  const CustomBody({super.key});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(width: double.infinity, height: 200, color: Colors.redAccent,),
        Expanded(child: Container(color: Colors.blueAccent, height: 100,)),
        Flexible(child: Container(color: Colors.greenAccent, height: 100,))
      ],
    );
  }
}

이 경우 Expanded와 Flexible의 height값이 100 픽셀로 동일하게 설정돼있지만, 결과 화면을 확인하면 다른 것을 알 수 있다.

Flexible은 child의 Container에 할당된 100 픽셀에 딱 맞춰서 줄어들었지만, Expanded는 Expanded 위젯 외부의 어떤 Constraint 기준에 맞춰서 높이가 늘어나있는 것을 확인할 수 있다.

 

이렇게 Flexible은 영역의 높이 또는 너비가 동적으로 늘어나는 특성 때문에, 앞서 배운 스크롤뷰 위젯 내부에서 사용하지 않도록 주의해야한다.

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N