[Flutter] 플러터 앱에서 전화걸기 기능 구현하기

Flutter 앱에서 사용자가 버튼을 눌러 직접 전화를 걸 수 있는 기능을 구현하는 방법을 단계별로 알아보겠습니다.

1. 필요한 패키지 설치

먼저 url_launcher 패키지를 설치해야 합니다. 이 패키지는 외부 앱(전화, 문자, 브라우저 등)을 실행할 수 있게 해줍니다.

pubspec.yaml에 의존성 추가

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.2.1  # 최신 버전 사용

패키지 설치

flutter pub get

 

2. 플랫폼별 권한 설정

Android 설정

android/app/src/main/AndroidManifest.xml 파일에 전화 권한을 추가합니다:

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 전화 걸기 권한 추가 -->
    <uses-permission android:name="android.permission.CALL_PHONE" />
    
    <application>
        <!-- 기존 설정들... -->
    </application>
</manifest>

iOS 설정

ios/Runner/Info.plist 파일에 URL 스킴을 추가합니다:

<dict>
    <!-- 기존 설정들... -->
    
    <!-- URL 스킴 허용 목록 -->
    <key>LSApplicationQueriesSchemes</key>
    <array>
        <string>tel</string>
    </array>
</dict>

 

3. 코드 구현

기본 구현

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

class PhoneCallExample extends StatelessWidget {
  const PhoneCallExample({Key? key}) : super(key: key);

  // 전화걸기 메서드
  Future<void> _makePhoneCall(String phoneNumber) async {
    print('전화걸기 시도: $phoneNumber');
    
    // 1. 전화번호 검증
    if (phoneNumber.isEmpty) {
      print('전화번호가 비어있습니다');
      return;
    }

    try {
      // 2. 전화번호 정리 (하이픈, 공백 등 제거)
      String cleanNumber = phoneNumber.replaceAll(RegExp(r'[^0-9+]'), '');
      
      // 3. 전화 URI 생성
      final Uri phoneUri = Uri(scheme: 'tel', path: cleanNumber);
      
      print('정리된 전화번호: $cleanNumber');
      print('전화 URI: $phoneUri');

      // 4. 전화 앱 실행 가능 여부 확인
      if (await canLaunchUrl(phoneUri)) {
        // 5. 전화 앱 실행
        await launchUrl(phoneUri);
        print('전화 앱 실행 성공');
      } else {
        print('전화 앱을 실행할 수 없습니다');
      }
    } catch (e) {
      print('전화걸기 에러: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('전화걸기 예제')),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _makePhoneCall('02-1234-5678'),
          child: Text('전화걸기'),
        ),
      ),
    );
  }
}

고급 구현 (에러 처리 포함)

class AdvancedPhoneCall extends StatelessWidget {
  Future<void> _makePhoneCallWithErrorHandling(
    BuildContext context, 
    String phoneNumber
  ) async {
    // 1. 전화번호 유효성 검사
    if (phoneNumber.isEmpty || phoneNumber == '번호없음') {
      _showSnackBar(context, '전화번호가 등록되어 있지 않습니다', Colors.red);
      return;
    }

    try {
      // 2. 전화번호 정리
      String cleanNumber = phoneNumber.replaceAll(RegExp(r'[^0-9+]'), '');
      
      // 3. 한국 전화번호 형식 검증
      if (!_isValidKoreanPhoneNumber(cleanNumber)) {
        _showSnackBar(context, '올바르지 않은 전화번호 형식입니다', Colors.red);
        return;
      }

      final Uri phoneUri = Uri(scheme: 'tel', path: cleanNumber);
      
      // 4. 전화 앱 실행
      if (await canLaunchUrl(phoneUri)) {
        await launchUrl(phoneUri);
        _showSnackBar(context, '전화를 연결합니다', Colors.green);
      } else {
        _showSnackBar(context, '전화 앱을 실행할 수 없습니다', Colors.red);
      }
    } catch (e) {
      _showSnackBar(context, '전화걸기 중 오류가 발생했습니다: $e', Colors.red);
    }
  }

  // 한국 전화번호 형식 검증
  bool _isValidKoreanPhoneNumber(String phoneNumber) {
    // 휴대폰: 010으로 시작하는 11자리
    // 일반전화: 02, 031-063으로 시작
    final RegExp mobilePattern = RegExp(r'^010\d{8}$');
    final RegExp landlinePattern = RegExp(r'^0(2|[3-6][1-4])\d{7,8}$');
    
    return mobilePattern.hasMatch(phoneNumber) || 
           landlinePattern.hasMatch(phoneNumber);
  }

  // 스낵바 표시
  void _showSnackBar(BuildContext context, String message, Color color) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(message),
        backgroundColor: color,
        duration: Duration(seconds: 2),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          onPressed: () => _makePhoneCallWithErrorHandling(context, '010-1234-5678'),
          child: Text('휴대폰으로 전화'),
        ),
        ElevatedButton(
          onPressed: () => _makePhoneCallWithErrorHandling(context, '02-1234-5678'),
          child: Text('일반전화로 전화'),
        ),
      ],
    );
  }
}

 

4. 에러 처리 및 예외상황

주요 예외상황들

전화번호가 비어있는 경우

if (phoneNumber.isEmpty || phoneNumber == '번호없음') {
  // 에러 메시지 표시
  return;
}

 

전화 앱이 설치되지 않은 경우

if (await canLaunchUrl(phoneUri)) {
  await launchUrl(phoneUri);
} else {
  // 전화 앱을 실행할 수 없음
}

 

잘못된 전화번호 형식

String cleanNumber = phoneNumber.replaceAll(RegExp(r'[^0-9+]'), '');
if (cleanNumber.length < 10) {
  // 너무 짧은 전화번호
}

 

로깅과 디버깅

Future<void> _makePhoneCallWithLogging(String phoneNumber) async {
  print('📞 [전화걸기] 시작: $phoneNumber');
  
  try {
    String cleanNumber = phoneNumber.replaceAll(RegExp(r'[^0-9+]'), '');
    print('📞 [전화걸기] 정리된 번호: $cleanNumber');
    
    final Uri phoneUri = Uri(scheme: 'tel', path: cleanNumber);
    print('📞 [전화걸기] URI: $phoneUri');
    
    if (await canLaunchUrl(phoneUri)) {
      await launchUrl(phoneUri);
      print('📞 [전화걸기] 성공');
    } else {
      print('📞 [전화걸기] 실패: 앱 실행 불가');
    }
  } catch (e, stackTrace) {
    print('📞 [전화걸기] 예외 발생: $e');
    print('📞 [전화걸기] 스택트레이스: $stackTrace');
  }
}

 

5. 실제 사용 예제

음식점 앱에서의 구현

class RestaurantContactCard extends StatelessWidget {
  final String restaurantName;
  final String phoneNumber;

  const RestaurantContactCard({
    Key? key,
    required this.restaurantName,
    required this.phoneNumber,
  }) : super(key: key);

  Future<void> _callRestaurant(BuildContext context) async {
    print('[$restaurantName] 전화걸기 시도: $phoneNumber');
    
    if (phoneNumber.isEmpty || phoneNumber == '번호없음') {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('$restaurantName의 전화번호가 등록되어 있지 않습니다'),
          backgroundColor: Colors.red,
        ),
      );
      return;
    }

    try {
      String cleanNumber = phoneNumber.replaceAll(RegExp(r'[^0-9+]'), '');
      final Uri phoneUri = Uri(scheme: 'tel', path: cleanNumber);
      
      if (await canLaunchUrl(phoneUri)) {
        await launchUrl(phoneUri);
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('$restaurantName에 전화를 연결합니다'),
            backgroundColor: Colors.green,
          ),
        );
      } else {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(
            content: Text('전화 앱을 실행할 수 없습니다'),
            backgroundColor: Colors.red,
          ),
        );
      }
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(
          content: Text('전화걸기 중 오류가 발생했습니다'),
          backgroundColor: Colors.red,
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            Text(restaurantName, style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            SizedBox(height: 8),
            Text('전화: $phoneNumber'),
            SizedBox(height: 16),
            ElevatedButton.icon(
              onPressed: () => _callRestaurant(context),
              icon: Icon(Icons.phone),
              label: Text('전화걸기'),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.green,
                foregroundColor: Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

 

6. 주의사항 및 팁

1. 테스트 환경

• 시뮬레이터에서는 전화 기능이 작동하지 않습니다
• 반드시 실제 기기에서 테스트해야 합니다

2. 사용자 경험 개선

// 전화걸기 전 확인 다이얼로그
Future<void> _showCallConfirmDialog(BuildContext context, String phoneNumber) async {
  return showDialog(
    context: context,
    builder: (BuildContext context) {
      return AlertDialog(
        title: Text('전화걸기'),
        content: Text('$phoneNumber로 전화를 거시겠습니까?'),
        actions: [
          TextButton(
            onPressed: () => Navigator.of(context).pop(),
            child: Text('취소'),
          ),
          TextButton(
            onPressed: () {
              Navigator.of(context).pop();
              _makePhoneCall(phoneNumber);
            },
            child: Text('전화걸기'),
          ),
        ],
      );
    },
  );
}

3. 성능 최적화

// 전화번호 정리 함수를 별도로 분리
String _cleanPhoneNumber(String phoneNumber) {
  return phoneNumber.replaceAll(RegExp(r'[^0-9+]'), '');
}

// 캐싱을 통한 성능 향상
final Map<String, String> _cleanedNumbers = {};

String _getCleanedNumber(String original) {
  return _cleanedNumbers.putIfAbsent(original, () => _cleanPhoneNumber(original));
}

 

결론

Flutter에서 전화걸기 기능을 구현하는 것은 url_launcher 패키지와 적절한 권한 설정만 있으면 매우 간단합니다. 하지만 실제 앱에서는 다양한 예외상황과 사용자 경험을 고려한 구현이 필요합니다.

핵심 포인트

1. url_launcher 패키지 사용
2. 플랫폼별 권한 설정 필수
3. 전화번호 유효성 검증
4. 적절한 에러 처리
5. 실제 기기에서 테스트

 

이 가이드를 따라 구현하면 안정적이고 사용자 친화적인 전화걸기 기능을 만들 수 있습니다!