위젯과 기본적인 레이아웃

학습 목표

• Flutter 위젯 소개 및 기본적인 레이아웃 학습
• Flutter Hot Reload/Restart 기능 이해 및 활용

학습 내용

1. Flutter 위젯 트리 구조 이해

Flutter 앱의 화면은 위젯(Widget)이라는 작은 UI 구성 요소들의 조합으로 만들어집니다. 마치 나무가 가지와 잎으로 이루어진 것처럼, Flutter 앱도 여러 위젯들이 서로 연결되어 위젯 트리(Widget Tree)라는 구조를 형성합니다.

• 부모 위젯(Parent Widget): 다른 위젯들을 포함하는 위젯입니다.
• 자식 위젯(Child Widget): 부모 위젯 안에 포함된 위젯입니다. 하나의 자식 위젯을 가질 수도 있고 (child 속성), 여러 개의 자식 위젯을 가질 수도 있습니다 (children 속성).

Flutter 앱이 화면에 그려질 때, 이 위젯 트리를 따라 각 위젯이 어떻게 배치되고 그려질지 결정됩니다.

https://docs.flutter.dev/ui/layout

2. Container: 기본적인 스타일링

Container 위젯은 마치 상자와 같습니다. 내부에 다른 위젯을 담고, 크기, 색상, 여백, 테두리 등 다양한 스타일을 적용할 수 있습니다.

 

Dart

Container(
  width: 200, // 가로 크기
  height: 100, // 세로 크기
  color: Colors.blue, // 배경 색상
  padding: EdgeInsets.all(16), // 모든 방향으로 16픽셀 내부 여백
  margin: EdgeInsets.only(top: 20), // 위쪽으로 20픽셀 외부 여백
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black, width: 2), // 검정색 2픽셀 두께의 테두리
    borderRadius: BorderRadius.circular(8), // 8픽셀의 둥근 모서리
  ),
  child: Text('안녕하세요!'), // Container 안에 들어갈 위젯
)

3. Row, Column: 가로 또는 세로 배치

Row 위젯은 자식 위젯들을 가로로 나란히 배치하고, Column 위젯은 자식 위젯들을 세로로 나란히 배치합니다.

Row나 Column +

mainAxisAlignment : 주축(Row에서는 가로, Column에서는 세로)을 따라 자식 위젯들을 어떻게 정렬할지 결정합니다.

• MainAxisAlignment.start: 시작 부분에 정렬
• MainAxisAlignment.end: 끝 부분에 정렬
• MainAxisAlignment.center: 중앙에 정렬
• MainAxisAlignment.spaceAround: 각 자식 위젯 주변으로 동일한 여백을 배치
• MainAxisAlignment.spaceBetween: 첫 번째와 마지막 자식 위젯은 양 끝에 배치하고, 나머지 자식 위젯들 사이에는 동일한 여백을 배치
• MainAxisAlignment.spaceEvenly: 자식 위젯들 사이와 양 끝에 동일한 여백을 배치

crossAxisAlignment : 교차축(Row에서는 세로, Column에서는 가로)을 따라 자식 위젯들을 어떻게 정렬할지 결정합니다.

• CrossAxisAlignment.start: 시작 부분에 정렬
• CrossAxisAlignment.end: 끝 부분에 정렬
• CrossAxisAlignment.center: 중앙에 정렬
• CrossAxisAlignment.stretch: 부모 위젯의 교차축 방향으로 최대한 늘림

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: [
    Icon(Icons.home),
    Text('홈'),
    Icon(Icons.settings),
    Text('설정'),
  ],
)

Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    Text('제목'),
    Text('내용'),
  ],
)

 

 

4. Stack: 위젯을 겹쳐서 배치

Stack 위젯은 자식 위젯들을 순서대로 겹쳐서 배치합니다. 먼저 추가된 위젯이 가장 아래에 놓이고, 나중에 추가된 위젯이 그 위에 놓입니다.

• Positioned: Stack 위젯 안에서 자식 위젯의 위치를 top, bottom, left, right 속성을 사용하여 자유롭게 지정할 수 있습니다.

Stack(
  children: [
    Image.asset('background.png'), // 배경 이미지
    Positioned(
      top: 20,
      left: 20,
      child: Text(
        '중요 알림',
        style: TextStyle(color: Colors.white, fontSize: 20),
      ),
    ),
    Center(
      child: Icon(Icons.notifications, size: 50, color: Colors.yellow),
    ),
  ],
)

 

 

5. Expanded: 남은 공간 채우기

Expanded 위젯은 Row나 Column과 같은 Flex 부모 위젯 안에서 사용될 때, 남은 공간을 모두 차지하도록 자식 위젯을 늘려줍니다. 여러 개의 Expanded 위젯이 있다면, flex 속성을 사용하여 각 위젯이 차지할 공간의 비율을 조절할 수 있습니다.

Row(
  children: [
    Expanded(
      flex: 1,
      child: Container(color: Colors.red, child: Center(child: Text('1'))),
    ),
    Expanded(
      flex: 2,
      child: Container(color: Colors.green, child: Center(child: Text('2'))),
    ),
    Expanded(
      flex: 1,
      child: Container(color: Colors.blue, child: Center(child: Text('3'))),
    ),
  ],
)

위 예시에서 초록색 Container는 빨간색과 파란색 Container보다 2배의 공간을 차지합니다.

 

※ flex : 모든 flex의 합을 기준으로 각 위젯이 차지할 비율 결정합니다. 명시하지 않으면 1로 생각합니다.

위젯	차이점
Expanded(flex: X)	남은 공간을 X 비율만큼 차지. 꽉 채움
Flexible(flex: X)	남은 공간을 X 비율만큼 차지. 넘치면 줄어듦
Container(width: 100)	정해진 크기만큼 차지. flex와 무관

 

6. Center: 중앙 배치

Center 위젯은 자식 위젯을 부모 위젯의 중앙에 배치합니다.

Center(
  child: Text('나는 중앙에 있어요!'),
)

 

Flutter Hot Reload/Restart 기능 이해 및 활용

Flutter의 강력한 기능 중 하나는 Hot Reload와 Hot Restart입니다.

• Hot Reload: 코드를 변경하고 저장하면, 앱을 완전히 종료하고 다시 시작할 필요 없이 실행 중인 앱의 UI를 빠르게 업데이트합니다. 앱의 상태(변수 값 등)는 유지됩니다. UI를 빠르게 반복적으로 수정하고 결과를 확인할 때 매우 유용합니다.
• Hot Restart: 앱을 완전히 종료하고 새로운 상태로 다시 시작합니다. 코드 변경 사항뿐만 아니라 앱의 상태도 초기화됩니다. Hot Reload로 문제가 해결되지 않거나, 앱의 상태 변화를 확인하고 싶을 때 사용합니다.

사용 방법:

• Flutter 개발 툴 (VS Code, Android Studio 등)에서 앱을 실행한 상태에서 코드를 수정하고 저장 (Ctrl + S 또는 Cmd + S)하면 자동으로 Hot Reload가 실행됩니다.
• Hot Restart는 개발 툴의 메뉴나 단축키를 통해 실행할 수 있습니다. (예: VS Code에서는 Ctrl + Shift + F5 또는 Cmd + Shift + R)

이 기능을 적극적으로 활용하여 UI를 빠르게 개발하고 테스트해 보세요.

---

병행 프로젝트 : 다이어리 모바일 어플 제작

실습 목표

1. 메인 화면의 기본적인 구조 배치

다음과 같은 틀을 만들어 보세요.

• 상단: 날짜를 표시할 영역
• 중앙: 달력을 표시할 영역
• 하단: 요약 정보를 표시할 영역

Container, Row, Column, Center 위젯 등을 활용하여 레이아웃을 구성해 보세요. 실제 데이터 연결은 다음 주에 진행할 예정입니다.

 

2. 일기 작성 화면 배치

• 제목을 입력할 수 있는 TextField 위젯 배치
• 본문을 입력할 수 있는 여러 줄의 TextField 또는 TextFormField 위젯 배치

3. 일정 추가/수정 화면 배치

• 제목을 입력할 수 있는 TextField 위젯 배치
• 내용을 입력할 수 있는 여러 줄의 TextField 또는 TextFormField 위젯 배치