[flutter] 플러터 앱에서 sticky 헤더를 사용한 사원 관리 앱 디자인하기

30 Nov 2023

flutter

안녕하세요! 이번에는 플러터(Flutter)를 사용하여 사원 관리 앱을 디자인하는 방법에 대해 알아보겠습니다. 이 앱에서는 sticky 헤더를 사용하여 효과적으로 정보를 표시하고 관리할 수 있습니다.

1. 개요

사원 관리 앱은 회사 내의 직원들의 정보와 업무 내용을 효율적으로 관리하기 위해 사용됩니다. 이 앱에서는 sticky 헤더를 사용하여 헤더 부분을 항상 화면 상단에 고정시킵니다. 이로써, 사용자는 스크롤을 해도 항상 중요한 정보를 볼 수 있습니다.

2. 필요한 패키지 설치

플러터에서 sticky 헤더를 사용하기 위해 sticky_headers 패키지를 설치해야 합니다. pubspec.yaml 파일에서 패키지를 추가하고, flutter packages get 명령어를 실행하여 패키지를 설치하세요.

dependencies:
  flutter:
    sdk: flutter
  sticky_headers: ^0.1.8

3. 사원 데이터 모델링

앱에서 사용할 사원 데이터를 모델링해야 합니다. 각 직원의 이름, 사진, 부서, 직급 등의 정보를 포함하는 Employee 클래스를 만들어 봅시다.

class Employee {
  final String name;
  final String photoUrl;
  final String department;
  final String position;

  Employee({required this.name, required this.photoUrl, required this.department, required this.position});
}

4. 앱 레이아웃 설계

다음으로, 앱의 기본적인 레이아웃을 설계해야 합니다. ListView.builder 위젯을 사용하여 사원 목록을 나타내는 리스트를 구성합니다. 각 사원은 Card 위젯으로 표시되며, ListView.builder를 통해 동적으로 생성됩니다.

ListView.builder(
  itemCount: employees.length,
  itemBuilder: (context, index) {
    return Card(
      child: ListTile(
        leading: CircleAvatar(
          backgroundImage: NetworkImage(employees[index].photoUrl),
        ),
        title: Text(employees[index].name),
        subtitle: Text(employees[index].position),
        trailing: Text(employees[index].department),
      ),
    );
  },
)

5. Sticky 헤더 구현

이제 sticky 헤더를 구현해 보겠습니다. StickyHeader 위젯을 사용하여 헤더를 생성하고, StickyHeaderBuilder 위젯을 사용하여 해당 헤더 아래의 리스트 아이템들을 생성합니다. 이렇게 하면 리스트 아이템이 스크롤되도 헤더는 항상 화면 상단에 고정됩니다.

StickyHeaderBuilder(
  builder: (context, stuckAmount) {
    return Container(
      height: 50.0,
      color: Colors.grey[300],
      padding: EdgeInsets.symmetric(horizontal: 16.0),
      alignment: Alignment.centerLeft,
      child: Text(
        '부서 A',
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
    );
  },
  content: ListView.builder(
    shrinkWrap: true,
    physics: NeverScrollableScrollPhysics(),
    itemCount: employees.length,
    itemBuilder: (context, index) {
      return Card(
        child: ListTile(
          leading: CircleAvatar(
            backgroundImage: NetworkImage(employees[index].photoUrl),
          ),
          title: Text(employees[index].name),
          subtitle: Text(employees[index].position),
          trailing: Text(employees[index].department),
        ),
      );
    },
  ),
)

6. 결과 확인

헤더와 리스트가 잘 구현되었는지 확인하기 위해 앱을 실행해 보세요. 리스트를 스크롤하면 헤더가 항상 화면 상단에 고정되는 것을 확인할 수 있습니다.

7. 마치며

이번에는 플러터 앱에서 sticky 헤더를 사용하여 사원 관리 앱을 디자인하는 방법에 대해 알아보았습니다. 헤더를 고정시킴으로써 사용자는 편리하게 중요한 정보를 확인할 수 있습니다. 앱의 다른 부분도 추가로 개발하여 사용자에게 편의를 제공해보세요. 플러터를 사용하면 매력적이고 사용하기 쉬운 앱을 빠르게 개발할 수 있습니다. 성공적인 앱 개발을 기대합니다!

참고:

목차