플러터(Flutter)는 Google에서 개발한 모바일 애플리케이션 개발 프레임워크입니다. RxDart는 Reactive Extensions의 기능을 Dart 언어에 적용한 라이브러리로, 비동기 프로그래밍을 효율적으로 처리할 수 있도록 도와줍니다. 이번 글에서는 RxDart를 활용하여 플러터 애플리케이션에서 게시판과 댓글을 처리하는 방법을 알아보겠습니다.
1. RxDart 설치하기
먼저, RxDart를 사용하기 위해 pubspec.yaml 파일에 의존성(dependencies)을 추가해야 합니다.
dependencies:
rxdart: ^0.26.0
의존성을 추가한 후, 터미널에서 다음 명령어를 실행하여 RxDart를 설치합니다.
flutter pub get
2. 게시판 기능 구현하기
게시판 기능을 구현하기 위해 먼저, Post 모델 클래스를 정의해야 합니다. Post 클래스는 게시물의 제목(title)과 내용(content)을 가지고 있습니다.
class Post {
final String title;
final String content;
Post(this.title, this.content);
}
다음으로, 게시물 목록을 관리하기 위한 Board 클래스를 만듭니다. Board 클래스는 List<Post> 형태로 게시물들을 저장하며, 게시물을 추가하고 제거하는 기능을 제공합니다.
class Board {
final List<Post> _posts = [];
List<Post> get posts => _posts;
void addPost(Post post) {
_posts.add(post);
}
void removePost(Post post) {
_posts.remove(post);
}
}
3. 게시물 목록 화면 구현하기
게시물 목록을 화면에 표시하기 위해 PostListScreen 클래스를 만듭니다. 이 클래스는 StreamBuilder를 사용하여 게시물 목록이 변경될 때마다 화면을 갱신합니다.
class PostListScreen extends StatelessWidget {
final Board board;
PostListScreen(this.board);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('게시판'),
),
body: StreamBuilder<List<Post>>(
stream: board.postsStream(),
initialData: board.posts,
builder: (context, snapshot) {
if (snapshot.hasData) {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
final post = snapshot.data[index];
return ListTile(
title: Text(post.title),
subtitle: Text(post.content),
);
},
);
} else if (snapshot.hasError) {
return Text('게시물을 불러오는 중 에러가 발생했습니다.');
} else {
return CircularProgressIndicator();
}
},
),
);
}
}
4. 게시물 작성 화면 구현하기
게시물을 작성하기 위한 화면을 구현하기 위해 PostCreateScreen 클래스를 만듭니다. 이 클래스는 TextField를 사용하여 게시물 제목과 내용을 입력받고, 작성한 게시물을 게시판에 추가합니다.
class PostCreateScreen extends StatefulWidget {
final Board board;
PostCreateScreen(this.board);
@override
_PostCreateScreenState createState() => _PostCreateScreenState();
}
class _PostCreateScreenState extends State<PostCreateScreen> {
final _titleController = TextEditingController();
final _contentController = TextEditingController();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('게시물 작성'),
),
body: Padding(
padding: EdgeInsets.all(16),
child: Column(
children: [
TextField(
controller: _titleController,
decoration: InputDecoration(
labelText: '제목',
),
),
TextField(
controller: _contentController,
decoration: InputDecoration(
labelText: '내용',
),
),
RaisedButton(
onPressed: () {
final title = _titleController.text;
final content = _contentController.text;
final post = Post(title, content);
widget.board.addPost(post);
Navigator.pop(context);
},
child: Text('작성하기'),
),
],
),
),
);
}
}
5. 앱 실행하기
마지막으로, 게시판 앱을 실행하기 위해 main.dart 파일에서 다음과 같이 수정합니다.
void main() {
final board = Board();
runApp(MyApp(board));
}
class MyApp extends StatelessWidget {
final Board board;
MyApp(this.board);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '게시판 앱',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: PostListScreen(board),
);
}
}
이제 앱을 실행하면 게시판 목록이 표시되고, 게시물을 작성하고 삭제할 수 있는 기능이 제공됩니다.
이처럼, RxDart를 활용하여 플러터 애플리케이션에서 게시판과 댓글을 처리할 수 있습니다. RxDart를 사용하면 비동기 이벤트 처리를 간편하게 할 수 있으므로, 애플리케이션의 성능과 확장성을 향상시킬 수 있습니다.