[flutter] 플러터 프로바이더를 사용하여 자동차 예약 앱 만들기

26 Dec 2023

flutter

이번 포스트에서는 플러터와 프로바이더를 사용하여 자동차 예약 앱을 만드는 방법을 알아보겠습니다. 우리는 플러터를 사용하여 사용자가 자동차를 예약할 수 있는 간단한 앱을 만들 것이며, 이를 위해 플러터의 상태 관리 라이브러리인 프로바이더를 사용할 것입니다.

프로바이더란?

프로바이더는 플러터의 상태 관리 라이브러리로, 앱의 상태를 관리하고 상태가 변경될 때 위젯을 업데이트하는데 사용됩니다. 프로바이더를 사용하면 상태 관리가 효율적으로 이루어지며, 위젯 트리 전체에 걸쳐 일관된 상태를 유지할 수 있습니다.

자동차 예약 앱 디자인 및 구현

이제 우리는 간단한 자동차 예약 앱을 만들어보겠습니다. 우선은 자동차 모델, 가용성 및 가격에 대한 정보를 담은 데이터 모델을 정의하고, 이를 플러터의 위젯에 바인딩할 것입니다.

데이터 모델 정의

먼저, 자동차 정보를 담은 데이터 모델을 정의합니다.

class Car {
  final String model;
  final bool available;
  final int price;

  Car({required this.model, required this.available, required this.price});
}

프로바이더 선언

다음으로, 프로바이더를 선언하여 상태를 관리합니다.

class CarProvider with ChangeNotifier {
  List<Car> _cars = [
    Car(model: '아우디 A6', available: true, price: 100),
    Car(model: '벤츠 E-Class', available: false, price: 120),
    Car(model: 'BMW 5 Series', available: true, price: 110),
  ];

  List<Car> get cars => _cars;

  void reserveCar(int index) {
    _cars[index].available = false;
    notifyListeners();
  }
}

위젯에 프로바이더 사용

마지막으로, 위젯에서 프로바이더를 사용하여 데이터를 바인딩합니다.

class CarList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<CarProvider>(
      builder: (context, carProvider, child) {
        return ListView.builder(
          itemCount: carProvider.cars.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(carProvider.cars[index].model),
              subtitle: Text('가격: \$${carProvider.cars[index].price}'),
              trailing: carProvider.cars[index].available
                  ? ElevatedButton(
                      onPressed: () {
                        carProvider.reserveCar(index);
                      },
                      child: Text('예약하기'),
                    )
                  : Text('예약불가'),
            );
          },
        );
      },
    );
  }
}

마무리

프로바이더를 사용하여 자동차 예약 앱을 만들어봤습니다. 프로바이더를 사용하면 상태 관리가 효율적으로 이루어지며, 플러터 앱의 상태를 일관되게 유지할 수 있습니다. 프로바이더를 통해 복잡한 앱의 상태 관리를 간편하게 처리할 수 있습니다.

플러터 및 프로바이더에 대해 더 알아보고 싶다면 공식 문서를 참고해보세요.