[Flutter] Flutter 기초 #03 - Flutter 스크롤 위젯

#03 Flutter 기초 - Flutter 스크롤 위젯

목차

Ⅰ Flutter 스크롤 위젯

01. ListView

02. ListTile

03. GridView

04. PageView

---

Ⅰ Flutter 스크롤 위젯

01. ListView

ListView

• Flutter에서 스크롤 가능한 리스트 뷰를 생성하는 위젯
• 무한 스크롤 리스트나 동적 리스트를 구성할 때 유용

주요 생성자

• ListView() : 리스트 아이템을 직접 추가하는 일반적인 방식
• ListView.builder() : 동적 리스트 생성에 사용, 아이템을 효율적으로 랜더링
• ListView.separated() : 아이템 사이에 구분선을 추가할 때 사용

ListView(
  children: [
    ListTile(
      leading: Icon(Icons.person),
      title: Text('홍길동'),
      subtitle: Text('개발자'),
    ),
    ListTile(
      leading: Icon(Icons.person),
      title: Text('김유신'),
      subtitle: Text('디자이너'),
    ),
  ],
);

 

ListView.builder(
  itemCount: 100,                  // 리스트에 표시할 아이템 수 (반복 횟수)
  itemBuilder: (context, index) {  // 각 아이템을 렌더링할 때 호출되는 콜백 함수
    return ListTile(               // 각 리스트 아이템을 ListTile 위젯으로 반환
      title: Text('Item $index'),  // index 값으로 동적 텍스트 생성
    );
  },
);

---

02. ListTile

ListTile

• 리스트 항목을 쉽게 구성할 수 있도록 제공하는 위젯
• 제목, 부제목, 아이콘 등을 쉽게 추가할 수 있음

주요 속성

• leading : 리스트 아이템의 시작 부분에 위치하는 위젯
• title : 리스트 아이템의 메인 텍스트
• subtitle : 리스트 아이템의 서브 텍스트
• trailing : 리스트 아이템의 끝 부분에 위치하는 위젯
• onTap : 리스트 아이템을 클릭했을 때 호출되는 콜백 함수

ListTile(
  leading: Icon(Icons.person),
  title: Text('홍길동'),
  subtitle: Text('개발자'),
  trailing: Icon(Icons.arrow_forward),
  onTap: () {
    print('전화하기 클릭!');
  },
);

---

03. GridView

GridView

• 격자형 레이아웃을 제공하는 스크롤 위젯
• 여러 열과 행으로 구성된 아이템을 표시할 때 사용

주요 생성자

• GridView() : 수동으로 그리드를 생성
• GridView.builder() : 동적 그리드를 생성할 때 사용
• GridView.count() : 고정된 열 개수로 그리드를 생성

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,      // 한 행(Row)에 표시할 열(Column)의 개수
    crossAxisSpacing: 10,   // 열 사이의 여백 (수평 여백)
    mainAxisSpacing: 10,    // 행 사이의 여백 (수직 여백)
    childAspectRatio: 1/2,  // 아이템의 가로 대비 세로 비율 (가로:세로 = 1:2)
  ),
  itemCount: 10,            // 생성할 아이템의 총 개수 (반복 횟수)
  itemBuilder: (context, index) {  // 각 아이템을 빌드할 때 호출되는 콜백 함수
    return Container(
      color: Colors.blue,
      child: Center(
        child: Text('Item $index'), // index 값으로 동적 텍스트 생성
      ),
    );
  },
);

 

GridView.count(
  crossAxisCount: 3, // 열 개수
  children: List.generate(12, (index) {
    return Center(
      child: Text('Item $index'),
    );
  }),
);

---

04. PageView

PageView

• 페이지 전환 효과를 제공하는 스크롤 위젯
• 주로 슬라이더나 탭 페이지와 같은 기능을 구현할 때 사용

주요 생성자

• PageView() : 기본 수동 전환 페이지 뷰
• PageView.builder() : 동적 페이지를 생성할 때 사용

PageView(
  controller: PageController(
    initialPage: 2,         // 시작 페이지 설정
    viewportFraction: 0.9,  // 각 페이지가 화면에서 차지하는 비율
  ),
  children: [
    Container(color: Colors.red),
    Container(color: Colors.green),
    Container(color: Colors.blue),
  ],
)

 

PageView.builder(
  itemCount: 5,
  itemBuilder: (context, index) {
    return Center(
      child: Text(
        'Page $index',
        style: TextStyle(fontSize: 32),
      ),
    );
  },
);