[flutter] 플러터 앱에서 sticky 헤더를 사용한 전화걸기 앱 구현하기

30 Nov 2023

flutter

이번에는 Flutter로 전화걸기 앱을 구현하는 방법을 알아보겠습니다. 전화걸기 앱은 주소록을 검색하고 전화번호를 눌러 전화를 걸 수 있는 기능을 가지고 있으며, 또한 sticky 헤더를 사용하여 전화번호 목록을 더 편리하게 탐색할 수 있게 합니다.

프로젝트 설정

먼저, Flutter 프로젝트를 생성하고 필요한 의존성을 추가합니다.

flutter create phone_app

dependencies:
  flutter:
    sdk: flutter
  sticky_headers: ^0.2.0

위의 코드를 pubspec.yaml 파일에 추가한 다음, 의존성을 설치합니다.

flutter pub get

주소록 페이지 구현

주소록 페이지에서는 sticky 헤더로 알파벳 순서로 정렬된 전화번호 목록을 표시합니다.

import 'package:flutter/material.dart';
import 'package:sticky_headers/sticky_headers.dart';

class ContactsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('주소록'),
      ),
      body: ListView.builder(
        itemBuilder: (context, index) {
          return StickyHeader(
            header: Text('A'),
            content: ListTile(
              title: Text('Amy'),
              onTap: () {
                // 전화 걸기 기능 구현
              },
            ),
          );
        },
      ),
    );
  }
}

ListView.builder 위젯을 사용하여 전화번호 목록을 표시하고, StickyHeader 위젯을 사용하여 sticky 헤더를 추가합니다. header 속성에는 해당 헤더의 이름을, content 속성에는 전화번호를 표시하는 ListTile 위젯을 넣어주면 됩니다.

전화 걸기 기능 구현

onTap 콜백을 통해 전화 걸기 기능을 구현합니다. 해당 전화번호를 호출하는 url_launcher 패키지를 사용하면 쉽게 구현할 수 있습니다.

먼저, 의존성을 추가합니다.

dependencies:
  url_launcher: ^6.0.10

import 'package:url_launcher/url_launcher.dart';

...

onTap: () {
  launch('tel://1234567890');
},

위의 코드는 전화번호 1234567890을 호출하는 예제입니다. 실제 전화번호를 사용하려면 해당 번호를 넣어주어야 합니다.

앱 실행하기

이제 전화번호 목록이 있는 주소록 페이지와 전화 걸기 기능이 구현된 앱을 실행해보세요.

import 'package:flutter/material.dart';

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

class PhoneApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '전화앱',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ContactsPage(),
    );
  }
}

위의 코드를 lib/main.dart 파일에 추가한 다음, 앱을 실행합니다.

flutter run

결론

위의 방법을 따라 Flutter 앱에서 sticky 헤더를 사용한 전화걸기 앱을 구현하는 방법에 대해 알아보았습니다. sticky 헤더를 통해 전화번호 목록을 더 편리하게 탐색할 수 있으며, 실제 전화걸기 기능은 url_launcher 패키지를 사용하여 구현하였습니다. 다양한 앱에서 sticky 헤더 기능을 사용해보세요!