플러터의 builder() 함수 완벽 이해하기! 초보자도 쉽게 배우는 빌더 함수 사용법

 

Flutter 개발을 시작하다 보면 여러 가지 함수와 위젯을 만나게 되는데, 그중에서도 builder() 함수는 다양한 상황에서 자주 사용됩니다.

하지만 builder()라는 이름만으로는 이 함수가 정확히 어떤 역할을 하는지 직관적으로 이해하기 어려울 수 있어요.

이 글에서는 Flutter 초보자도 쉽게 이해할 수 있도록 builder() 함수가 무엇이고, 언제 그리고 어떻게 사용하는지 친절하게 설명드리겠습니다.

builder() 함수란?

builder() 함수는 Flutter에서 반복적으로 화면을 그리거나, 데이터가 업데이트될 때마다 UI를 새로 그려야 할 때 사용하는 함수입니다.

예를 들어, 많은 데이터를 스크롤하면서 보여줘야 하거나 리스트에서 데이터가 동적으로 추가되는 상황에서 builder() 함수가 큰 역할을 해요.

일반적으로 사용하는 builder() 함수에는 여러 종류가 있지만, 초보자가 자주 만나게 되는 두 가지는 ListView.builder와 FutureBuilder입니다.

이 두 가지 builder()는 다양한 방식으로 데이터를 화면에 출력할 수 있도록 돕습니다.

이제 각각의 builder()가 어떤 경우에 사용되는지 알아볼게요!

1. ListView.builder – 리스트를 동적으로 생성하기

앱에서 리스트 형태로 데이터를 보여줄 때 ListView.builder는 필수적입니다.

예를 들어, 쇼핑 앱에서 상품 목록을 스크롤하면서 보는 화면이나, 채팅 앱에서 메시지 목록을 볼 때 이 빌더가 사용됩니다.

ListView.builder를 사용하면, 리스트의 항목을 하나씩 새로 그리기 때문에 앱의 성능도 더 좋아집니다.

모든 아이템을 한 번에 로드하지 않고, 필요한 부분만 렌더링하기 때문이죠.

ListView.builder(
  itemCount: items.length, // 리스트 항목 개수
  itemBuilder: (BuildContext context, int index) {
    return ListTile(
      title: Text(items[index]), // 각 항목에 보여줄 데이터
    );
  },
);

• itemCount: 리스트의 총 개수로, items라는 리스트의 길이만큼 보여주겠다는 의미입니다.
• itemBuilder: 화면에 표시할 각 항목을 구성하는 부분입니다. 여기서는 ListTile을 사용해서 리스트 아이템을 하나씩 표시합니다.

이렇게 하면 데이터가 많아도 필요한 부분만 화면에 그려주기 때문에, 앱이 느려지지 않고 효율적으로 작동해요!

2. FutureBuilder – 비동기 데이터를 처리하기

FutureBuilder는 비동기 데이터를 처리할 때 유용한 builder() 함수입니다.

예를 들어, 서버에서 데이터를 불러올 때나, 데이터베이스에서 값을 읽어올 때 사용해요.

데이터를 불러오는 동안 로딩 화면을 보여주거나, 데이터가 준비되었을 때만 특정 UI를 그리도록 할 수 있습니다.

FutureBuilder(
  future: fetchData(), // 서버에서 데이터 불러오기
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator(); // 로딩 중일 때
    } else if (snapshot.hasError) {
      return Text('Error: ${snapshot.error}'); // 에러가 있을 때
    } else {
      return Text('Data: ${snapshot.data}'); // 데이터가 준비됐을 때
    }
  },
);

• future: 비동기적으로 데이터를 불러오는 작업입니다. 예시에서는 fetchData()라는 함수를 통해 데이터를 불러옵니다.
• builder: 데이터 로딩 상태에 따라 다르게 UI를 그려줍니다.
  • ConnectionState.waiting: 데이터가 아직 로드 중일 때 표시할 UI, 보통 로딩 애니메이션을 넣습니다.
  • snapshot.hasError: 에러가 발생했을 때 표시할 UI입니다.
  • 데이터가 준비되면 snapshot.data를 통해 데이터를 사용할 수 있습니다.

이렇게 하면 서버나 데이터베이스에서 데이터를 불러오는 동안 로딩 표시를 하고, 데이터가 준비되면 자동으로 화면에 데이터를 보여줄 수 있어요.

 

Flutter에서 builder() 함수는 데이터를 효율적으로 처리하고 화면에 보여주기 위해 필수적으로 사용하는 중요한 함수입니다. 특히 ListView.builder와 FutureBuilder는 리스트나 비동기 데이터 처리에서 큰 도움을 줍니다. 이 함수를 잘 활용하면 앱의 성능을 최적화하고 더 효율적으로 데이터를 관리할 수 있어요. 초보자분들도 builder() 함수의 역할과 사용법을 이해하고, 자신의 프로젝트에 적용해 보세요!

 

구독!! 공감과 댓글,

광고 클릭은 저에게 큰 힘이 됩니다.

 

Starting Google Play App Distribution! "Tester Share" for Recruiting 20 Testers for a Closed Test.

Tester Share [테스터쉐어] - Google Play 앱