[flutter] Firebase Database와 플러터를 이용한 뉴스 애플리케이션 만들기

30 Nov 2023

flutter

이번 튜토리얼에서는 Firebase Database와 플러터(Flutter)를 사용하여 간단한 뉴스 애플리케이션을 만드는 방법에 대해 알아보겠습니다. Firebase Database는 클라우드 기반의 실시간 데이터베이스로서, 실시간 데이터 동기화와 데이터 저장을 쉽게 구현할 수 있는 도구입니다. 플러터는 Google에서 개발한 크로스 플랫폼 모바일 애플리케이션 개발 프레임워크로서, 단일 코드베이스로 안드로이드와 iOS 애플리케이션을 개발할 수 있습니다.

전제 조건

이 튜토리얼을 따라하기 위해서는 다음의 전제 조건을 충족해야 합니다:

Flutter SDK가 설치되어 있어야 합니다. (설치 가이드)
Firebase 프로젝트를 생성해야 합니다. (Firebase 프로젝트 생성 가이드)

프로젝트 설정

Flutter SDK가 제대로 설치되어 있는지 확인하기 위해, 터미널에서 다음 명령어를 실행합니다:
```
flutter doctor
```
Firebase 프로젝트를 생성하고 Firebase Console에서 Realtime Database를 활성화합니다.
프로젝트 폴더에 Firebase SDK를 추가하기 위해, pubspec.yaml 파일을 열고 다음 내용을 추가합니다:
```
dependencies:
  firebase_core: ^1.0.0
  firebase_database: ^7.0.0
```
pubspec.yaml 파일이 업데이트된 내용으로 프로젝트를 업데이트하기 위해, 터미널에서 다음 명령어를 실행합니다:
```
flutter pub get
```

데이터 가져오기

뉴스 데이터를 가져오기 위해, lib/models/news.dart 파일을 생성하고 다음 코드를 추가합니다:

class News {
  final String title;
  final String content;
  final String imageUrl;
   
  News({
    required this.title,
    required this.content,
    required this.imageUrl,
  });
}

Firebase Database로부터 데이터를 가져오기 위해, lib/services/news_service.dart 파일을 생성하고 다음 코드를 추가합니다:

import 'package:firebase_database/firebase_database.dart';
import 'package:your_project_name/models/news.dart';
   
class NewsService {
  final _database = FirebaseDatabase.instance.reference().child('news');
   
  Stream<List<News>> getNews() {
    return _database.onValue.map(
      (event) {
        final newsList = <News>[];
        final data = event.snapshot.value as Map<dynamic, dynamic>?;
   
        if (data != null) {
          data.forEach((newsKey, newsData) {
            final news = News(
              title: newsData['title'],
              content: newsData['content'],
              imageUrl: newsData['imageUrl'],
            );
            newsList.add(news);
          });
        }
   
        return newsList;
      },
    );
  }
}

애플리케이션 UI

뉴스 애플리케이션의 메인 화면을 만들기 위해, lib/screens/news_screen.dart 파일을 생성하고 다음 코드를 추가합니다:

import 'package:flutter/material.dart';
import 'package:your_project_name/models/news.dart';
import 'package:your_project_name/services/news_service.dart';
   
class NewsScreen extends StatefulWidget {
  @override
  _NewsScreenState createState() => _NewsScreenState();
}
   
class _NewsScreenState extends State<NewsScreen> {
  final _newsService = NewsService();
   
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('News App'),
      ),
      body: StreamBuilder<List<News>>(
        stream: _newsService.getNews(),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            final newsList = snapshot.data!;
   
            return ListView.builder(
              itemCount: newsList.length,
              itemBuilder: (context, index) {
                final news = newsList[index];
   
                return ListTile(
                  title: Text(news.title),
                  subtitle: Text(news.content),
                  leading: Image.network(news.imageUrl),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Text('Error: ${snapshot.error}');
          }
   
          return CircularProgressIndicator();
        },
      ),
    );
  }
}

애플리케이션의 메인 화면을 표시하기 위해, lib/main.dart 파일을 열고 다음 코드로 수정합니다:

import 'package:flutter/material.dart';
import 'package:your_project_name/screens/news_screen.dart';
   
void main() {
  runApp(MyApp());
}
   
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'News App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NewsScreen(),
    );
  }
}

실행

이제 프로젝트를 실행하여 Firebase Database로부터 뉴스 데이터를 가져오는 뉴스 애플리케이션을 확인할 수 있습니다.

flutter run

결론

이 튜토리얼에서는 Firebase Database와 플러터를 사용하여 간단한 뉴스 애플리케이션을 개발하는 방법에 대해 알아보았습니다. Firebase Database의 강력한 실시간 동기화 기능과 플러터의 크로스 플랫폼 개발 기능을 활용하여 다양한 애플리케이션을 개발할 수 있습니다.

더 많은 정보를 원하시면 다음 문서를 참고하세요: