Flutter 게시판 앱 만들기 — Flutter 게시판을 시간 순서대로 정리해보자
·
Flutter/Flutter 게시판 앱 만들기
게시판에서 글을 볼 때, 가장 먼저 떠오르는 기준은 무엇일까?바로 "최신 글이 위에" 있어야 한다는 점이다.이번 글에서는 Flutter 게시판 앱에 작성 시간을 기록하고,글 목록을 최신순으로 정렬하는 기능을 추가해보자.🕒 Post 모델에 작성 시간 추가Post 모델에 createdAt 필드를 추가한다:class Post { final String title; final String content; final DateTime createdAt; Post({ required this.title, required this.content, required this.createdAt, }); Map toJson() => { 'title': title, 'content': c..
Flutter 게시판 앱 만들기 — 북마크로 찜한 글만 모아보기
·
Flutter/Flutter 게시판 앱 만들기
게시글을 스쳐 지나가기만 한다면 조금 아쉽다.내가 좋아하는 글, 나중에 다시 보고 싶은 글은 북마크 해두고 모아보면 훨씬 편리하다.이번 글에서는 Flutter 게시판 앱에 즐겨찾기(북마크) 기능을 추가해보자.`⭐` 아이콘 하나로 앱의 감성이 한층 살아날 수 있다.📌 Post 모델에 즐겨찾기 필드 추가기존의 Post 클래스에 isBookmarked 필드를 추가한다:class Post { final String title; final String content; bool isBookmarked; Post({ required this.title, required this.content, this.isBookmarked = false, }); Map toJson() => { '..
Flutter 게시판 앱 만들기 — 실시간으로 게시글 찾기
·
Flutter/Flutter 게시판 앱 만들기
게시글이 하나 둘 쌓이다 보면, 어느 순간부터 **찾기 어려워진다**.그럴 때 필요한 게 바로 검색 기능이다.이번 글에서는 Flutter로 만든 게시판 앱에 **실시간 검색 기능**을 추가해보자.간단한 TextField와 ListView.builder, 그리고 .where()만으로 구현할 수 있다.🔎 검색 입력창 UI상단에 TextField를 추가해서 검색어를 입력받자.TextField( decoration: InputDecoration( hintText: '검색어를 입력하세요', prefixIcon: Icon(Icons.search), border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)), filled: tru..
Flutter 게시판 앱 만들기 — Flutter 테마와 커스텀 스타일 적용하기
·
Flutter/Flutter 게시판 앱 만들기
기능이 다 갖춰졌다고 해서, 앱이 완성된 건 아니다.사용자가 처음 앱을 열었을 때 느끼는 **“느낌”**이 앱의 첫인상을 좌우한다.이번 글에서는 Flutter의 ThemeData를 활용해 전체적인 색감과 스타일을 감성적으로 다듬어보고,글자, 여백, 그림자 등 작은 요소들에 생기를 불어넣어보자.🎨 테마 설정하기 (ThemeData)MaterialApp에서 theme 속성을 통해 전역 테마를 지정할 수 있다.MaterialApp( theme: ThemeData( primarySwatch: Colors.teal, scaffoldBackgroundColor: Color(0xFFF9F9F9), fontFamily: 'Pretendard', textTheme: TextTheme( ..
Flutter 게시판 앱 만들기 — 게시글 수정 & 삭제 기능 추가하기
·
Flutter/Flutter 게시판 앱 만들기
게시판의 기본은 ‘쓰기’지만, 그 다음은?바로 수정과 삭제다.이번 글에서는 작성된 게시글을 앱 내에서 수정하거나 삭제하는 기능을 구현해보자.✏️ 수정 기능 구현수정을 위해선 기존 글의 데이터를 TextEditingController에 불러오고,사용자가 수정한 내용을 저장하면 된다.PostProvider에 수정 메서드를 추가하자:void updatePost(int index, Post updatedPost) { _posts[index] = updatedPost; notifyListeners(); savePosts();}이제 EditPostScreen에서 다음과 같이 활용한다:class EditPostScreen extends StatefulWidget { final int index; final ..
Flutter 게시판 앱 만들기 — 상태 관리와 SharedPreferences 적용하기
·
Flutter/Flutter 게시판 앱 만들기
글쓰기 기능까지 완성했으니 이제 작성한 글을 앱에 저장할 차례다.Flutter에서는 Provider를 이용한 상태 관리와 SharedPreferences를 활용한 간단한 저장 기능을 함께 사용하면 효율적이다.이번 글에서는 작성된 게시글을 리스트에 반영하고, 앱을 껐다 켜도 유지되는 저장 기능을 구현해보자.🔁 상태 관리: Provider 적용하기Provider과 SharedPreferences를 사용하기 위해선 pubspec.yaml에 두가지 dependencies를 추가해줘야한다.dependencies: shared_preferences: ^2.0.6 provider: ^6.1.2 Provider를 사용하면 전체 앱에서 게시글 데이터를 공유할 수 있다.우선 Post 모델을 정의한다:class Pos..