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

오늘은 Container, Center 위젯과 더불어 레이아웃의 기본 개념에 대해 알아보려한다.

일단 Container는 이름 그대로 어떤 위젯들을 내부에 포함시키기 위한 위젯이다. Child 위젯을 하나 가질 수 있고, width와 height, color 등 스타일과 관련된 속성도 지정할 수 있다. 아래는 너비와 높이가 100px이고 배경색이 지정된 채로 Text 위젯을 하나 child로 가진 Container 위젯을 만든 결과이다.

 

 

코드는 다음과 같다.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: Text('Practicing Container'),
      ),
      body: CustomContainer(),
    ),
  ));
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: Colors.blueAccent,
      child: Text('Hello Container'),
    );
  }
}

너비나 높이를 디바이스의 너비만큼 주고 싶다면 숫자 대신 double.infinity를 할당해주면 되고, color를 특정 Hex값을 통해 지정하고 싶다면 Color(0x투명도헥스값)을 통해 할당해줄 수 있다. (ex: Color(0xFF85D07B))

컨테이너 내부 요소의 padding과 margin값도 지정해줄 수 있는데, Flutter에서는 다음과 같은 방법을 사용한다.

EdgeInsets.fromLTRB(double, double, double, double) -> 상하좌우별 간격 지정

EdgeInsets.symmetric(vertical: double, horizontal: double) -> 수직 / 수평 방향 간격 지정

 

그리고 decoration 속성을 통해 조금 더 세밀한 스타일 조정도 가능한데, color 속성과 중복해서 사용할 수 없으므로 둘 중 하나만 사용하자. 아래 사진은 Container를 중앙 정렬하고 테두리 스타일을 추가한 다음에 그림자 속성까지 추가해본 결과이다.

 

이런 위젯이 특정 영역에 여러개 존재하고, 그 영역에서 위젯을 특정 방향으로 정렬하면서 배치하고 싶을 때 사용할 수 있는 것이 Row와 Column 위젯이다. 오늘은 강의를 쭉 들으면서 두 위젯을 어떻게 사용하고 특징이 뭔지만 간단하게 알아봤는데, Row와 Column은 웹 FE 개발에서 Flex에 해당한다. 각각 수평과 수직 레이아웃을 구성하고 내부 위젯을 정렬하는 데 사용할 수 있고, Grid에 대응하는 위젯은 따로 없긴 한데 Flex를 여러 개 활용하면 2차원 레이아웃도 구성할 수는 있으므로 Flutter에서도 이런 방식을 택하면 될 것 같다.

 

실습에 관한 내용은 내일 조금 더 자세히 다뤄보도록 하겠다.

 

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

https://bit.ly/48sS29N