[flutter] Firebase Firestore와 플러터를 이용한 쇼핑 애플리케이션 만들기

30 Nov 2023

flutter

이번에는 Flutter과 Firebase Firestore를 이용하여 쇼핑 애플리케이션을 만들어보겠습니다. Firebase는 구글의 클라우드 기반 플랫폼으로, Firestore는 실시간 데이터베이스로 사용됩니다.

1. Firebase 프로젝트 설정

Firebase 콘솔로 이동하여 새로운 프로젝트를 생성합니다. Firebase 프로젝트를 생성한 후, 프로젝트 설정 페이지에서 Flutter 앱을 추가합니다. 앱을 추가할 때 앱의 패키지 이름을 정확히 입력해야합니다.

2. 플러터 프로젝트 구성

Flutter 프로젝트를 생성합니다. 터미널에서 아래의 명령어를 실행하여 새로운 Flutter 앱을 생성합니다.

flutter create shopping_app

3. Firebase 연동하기

Flutter 프로젝트에서 Firebase를 사용하기 위해 firebase_core 패키지와 cloud_firestore 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  firebase_core: ^1.7.0
  cloud_firestore: ^3.1.0

pubspec.yaml 파일을 수정한 후, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 가져옵니다.

Firebase 초기화 코드를 main.dart 파일의 main 함수에서 호출합니다.

import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

4. Firestore 데이터 가져오기

Firebase Firestore에서 데이터를 가져오기 위해 FirebaseFirestore 인스턴스를 사용합니다.

import 'package:cloud_firestore/cloud_firestore.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  CollectionReference productsRef =
      FirebaseFirestore.instance.collection('products');

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<QuerySnapshot>(
      stream: productsRef.snapshots(),
      builder: (context, snapshot) {
        if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        }

        return ListView(
          children: snapshot.data!.docs.map((DocumentSnapshot document) {
            Map<String, dynamic> data = document.data() as Map<String, dynamic>;
            return ListTile(
              title: Text(data['name']),
              subtitle: Text(data['description']),
              trailing: Text('\$${data['price']}'),
            );
          }).toList(),
        );
      },
    );
  }
}

5. 애플리케이션 디자인

다양한 위젯을 사용하여 애플리케이션의 디자인을 구성합니다. 예를 들어, 쇼핑 목록을 보여주는 페이지, 상세 페이지, 장바구니 페이지 등을 만들 수 있습니다.

6. 결론

이제 Firebase Firestore와 플러터를 이용하여 쇼핑 애플리케이션을 만드는 방법에 대해 알아보았습니다. Firebase Firestore를 사용하면 실시간 데이터베이스를 쉽게 구축할 수 있습니다. 플러터와 Firebase를 연동하여 다양한 기능을 구현해보세요.

참고 자료

```

목차