[flutter] 플러터 sticky 헤더를 사용한 전화 목록 앱 디자인하기

30 Nov 2023

flutter

소개

이 튜토리얼에서는 플러터(Flutter)를 사용하여 전화 목록 앱을 디자인하는 방법을 알아보겠습니다. 플러터의 Sticky 헤더 라이브러리를 사용하여 앱의 헤더를 고정하고 스크롤 가능한 전화 목록을 만들어 보겠습니다.

설치

플러터 개발 환경이 설치되어 있다고 가정하고, Sticky 헤더 라이브러리를 추가로 설치해야 합니다. pubspec.yaml 파일에 다음과 같이 의존성을 추가합니다:

dependencies:
  sticky_headers: ^0.1.9

의존성을 추가한 후, 다음 명령어로 패키지를 업데이트합니다:

$ flutter packages get

디자인

먼저, sticky_headers 패키지를 가져옵니다:

import 'package:sticky_headers/sticky_headers.dart';

스크롤 가능한 전화 목록을 만드는 위젯을 생성합니다:

class PhoneListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('전화 목록'),
      ),
      body: ListView.builder(
        itemCount: phoneList.length,
        itemBuilder: (context, index) {
          return StickyHeader(
            header: Container(
              height: 50,
              color: Colors.grey[300],
              padding: EdgeInsets.symmetric(horizontal: 16),
              alignment: Alignment.centerLeft,
              child: Text(
                phoneList[index].headerText,
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 18,
                ),
              ),
            ),
            content: Column(
              children: phoneList[index].numbers
                  .map((number) => ListTile(
                        title: Text(number),
                        onTap: () {
                          // 전화 걸기 기능 추가
                        },
                      ))
                  .toList(),
            ),
          );
        },
      ),
    );
  }
}

전화 목록 데이터를 정의합니다. 헤더 텍스트와 전화 번호 목록으로 구성된 객체를 사용합니다:

class PhoneListData {
  final String headerText;
  final List<String> numbers;

  PhoneListData(this.headerText, this.numbers);
}

List<PhoneListData> phoneList = [
  PhoneListData('가족', ['010-1234-5678', '010-9876-5432']),
  PhoneListData('친구', ['010-1111-2222', '010-3333-4444']),
  PhoneListData('동료', ['010-5555-6666', '010-7777-8888']),
];

최상위 위젯에서 PhoneListScreen을 호출합니다:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '전화 목록 앱',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: PhoneListScreen(),
    );
  }
}

결론

위의 방법을 따라하면 플러터를 사용하여 Sticky 헤더를 사용한 전화 목록 앱을 만들 수 있습니다. 이를 통해 사용자가 헤더를 끝까지 스크롤해도 항상 볼 수 있도록 할 수 있습니다. 번호를 탭하면 전화 걸기 기능을 추가해 앱을 더욱 유연하게 만들 수도 있습니다.

목차

소개

설치

디자인

결론