241202 TIL, 레이아웃 나누기, 레이아웃 위젯

플러터(Flutter)에서 레이아웃 나누기는 위젯을 계층적으로 구성하여 앱 화면을 설계하는 중요한 과정입니다. Flutter는 모든 것이 위젯으로 구성되어 있기 때문에, 레이아웃을 효율적으로 나누는 것이 유지보수와 확장성을 높이는 데 매우 유용합니다.

 

1. 레이아웃 나누기의 기본 개념

 

• 위젯 계층 구조

Flutter에서 모든 화면은 위젯 트리로 표현됩니다. 따라서 레이아웃을 나눈다는 것은 위젯 트리를 체계적으로 설계하는 것을 의미합니다.

• UI 재사용성

자주 사용되는 부분은 별도의 위젯으로 분리하여 재사용 가능하도록 설계합니다.

• 상위-하위 관계

상위 위젯이 전체 구조를 정의하고, 하위 위젯은 개별적인 구성 요소를 담당합니다.

 

2. 레이아웃 나누기 단계

 

  (1) 전체 구조 정의

 

• 앱 화면을 큰 틀로 나눕니다.

예: Scaffold 위젯을 사용해 기본 레이아웃 구성 (앱 바, 바디, 하단바).

Scaffold(
  appBar: AppBar(title: Text('My App')),
  body: MainBody(), // 별도 위젯으로 분리
  bottomNavigationBar: BottomNavBar(), // 별도 위젯으로 분리
);

 

  (2) 세부 요소 분리

 

• 각 주요 영역을 독립적인 위젯으로 나눕니다.

• 예를 들어, MainBody는 리스트나 카드 등의 콘텐츠를 렌더링하는 위젯으로 설계합니다.

class MainBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Header(), // 상단부 UI
        Expanded(child: ContentList()), // 메인 콘텐츠
      ],
    );
  }
}

 

  (3) 위젯 재사용성 극대화

 

• UI 구성 요소를 반복적으로 사용할 경우, 별도의 커스텀 위젯으로 만듭니다.

class CustomCard extends StatelessWidget {
  final String title;
  final String subtitle;

  CustomCard({required this.title, required this.subtitle});

  @override
  Widget build(BuildContext context) {
    return Card(
      child: ListTile(
        title: Text(title),
        subtitle: Text(subtitle),
      ),
    );
  }
}

위젯 사용:

CustomCard(title: 'Item 1', subtitle: 'This is the first item'),
CustomCard(title: 'Item 2', subtitle: 'This is the second item'),

 

3. Flutter에서 자주 사용하는 레이아웃 위젯

 

• Column / Row: 수직/수평 배치.

• Container: 스타일링 및 박스 모델 적용.

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

• ListView: 스크롤 가능한 목록.

• GridView: 그리드 형태의 레이아웃.

• SizedBox: 공간 조정.

• Expanded / Flexible: 비율에 따라 크기를 조정.

 

4. 레이아웃 나누기 팁

 

1. UI를 논리적으로 분리

큰 화면을 먼저 설계한 뒤, 세부 요소를 나누고 위젯으로 캡슐화.

2. 상태 관리 고려

• 상태 관리가 필요한 경우, StatefulWidget을 사용하거나 Provider, Riverpod 같은 상태 관리 도구를 활용.

• 상태가 필요 없는 경우 StatelessWidget 사용.

3. 디자인 패턴 적용

• **MVVM(Model-View-ViewModel)**이나 Clean Architecture를 참고하여 UI와 비즈니스 로직을 분리.

 

5. 예제: 뉴스 앱 레이아웃 나누기

class NewsApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('News App')),
      body: Column(
        children: [
          Header(), // 검색 바 등 상단부 UI
          Expanded(
            child: NewsList(), // 메인 뉴스 목록
          ),
        ],
      ),
      bottomNavigationBar: BottomNavBar(), // 하단 네비게이션
    );
  }
}

 

현재 flutter 숙련 1주차

1-3

상태 관리 패키지(RiverPod) 사용하기

1-4

책검색 앱 만들기 Part 01 - 프로젝트 소개 및 UI 구현

1-5

책검색 앱 만들기 Part 02 - OpenAPI 활용하기

1-6

블로그 앱 만들기 Part 01 - 프로젝트 소개 및 UI 구현

01:03:19

 

1-7

블로그 앱 만들기 Part 02 - Firebase Firestore 사용하기 - 1

 

진행중입니다

 

계획 - 만든 파일을 깃허브에 차곡차곡 쌓으면서, Read me, 주석달기를 진행할 예정입니다

강의 없이, AI 없이 레이아웃 짜고, 코드 설명 할 수 있게하기!!