[flutter] 플러터 프로바이더를 사용하여 택배 조회 앱 만들기

26 Dec 2023

flutter

플러터는 다양한 앱을 만들기 위한 효율적인 도구입니다. 그 중에서도 상태 관리는 앱의 성능 및 사용자 경험에 큰 영향을 미칩니다. 플러터의 provider 패키지는 상태 관리를 쉽고 효율적으로 할 수 있게 도와줍니다. 이번 포스트에서는 provider를 사용하여 간단한 택배 조회 앱을 만들어보겠습니다.

프로바이더 소개

provider 패키지는 상태 관리를 위한 플러터의 공식 상태 관리 패키지입니다. 이 패키지를 사용하면 상태 변화가 일어날 때 화면을 자동으로 업데이트할 수 있어서 상태 관리 코드를 효율적으로 작성할 수 있습니다.

앱 구성

우리의 택배 조회 앱은 다음과 같은 기능을 가지고 있을 것입니다:

택배 조회: 송장 번호를 입력받아 택배 배송 상태를 확인합니다.
상태 관리: provider를 사용하여 택배 조회 상태를 관리합니다.

이제 앱을 구현하는 방법에 대해 살펴보겠습니다.

택배 조회 앱 구현

의존성 추가

먼저 pubspec.yaml 파일에 provider 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.0

모델 및 프로바이더 생성

송장 번호와 배송 상태를 관리하기 위해 Delivery 모델을 생성하고, 해당 상태를 관리할 DeliveryProvider를 작성합니다.

class Delivery {
  String trackingNumber;
  String status;
  
  Delivery({required this.trackingNumber, required this.status});
}

class DeliveryProvider extends ChangeNotifier {
  Delivery? _delivery;

  Delivery? get delivery => _delivery;

  void updateDeliveryStatus(String newStatus) {
    _delivery?.status = newStatus;
    notifyListeners();
  }
}

화면 구현

이제 provider를 사용하여 화면에 택배 조회 기능을 구현할 수 있습니다. 아래는 간단한 예시 코드입니다.

class DeliveryScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final provider = Provider.of<DeliveryProvider>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text('택배 조회'),
      ),
      body: Column(
        children: [
          TextField(
            onChanged: (value) {
              // 송장 번호 입력
            },
          ),
          ElevatedButton(
            onPressed: () {
              // 택배 조회 요청
            },
            child: Text('조회'),
          ),
          if (provider.delivery != null)
            Text('배송 상태: ${provider.delivery!.status}'),
        ],
      ),
    );
  }
}

이렇게 하면 provider를 사용하여 효율적으로 상태를 관리하고 화면을 업데이트할 수 있습니다.

위의 예시는 provider를 사용한 간단한 택배 조회 앱 구현 방법을 보여줍니다. 보다 복잡한 상태 관리를 위해서는 provider 패키지의 더 많은 기능들을 학습하고 활용할 수 있습니다.

플러터의 provider 패키지를 사용하여 효율적인 상태 관리를 통해 다양한 앱을 더욱 효율적으로 개발할 수 있습니다.

목차