게시글이 하나 둘 쌓이다 보면, 어느 순간부터 **찾기 어려워진다**.그럴 때 필요한 게 바로 검색 기능이다.이번 글에서는 Flutter로 만든 게시판 앱에 **실시간 검색 기능**을 추가해보자.간단한 TextField와 ListView.builder, 그리고 .where()만으로 구현할 수 있다.🔎 검색 입력창 UI상단에 TextField를 추가해서 검색어를 입력받자.TextField( decoration: InputDecoration( hintText: '검색어를 입력하세요', prefixIcon: Icon(Icons.search), border: OutlineInputBorder(borderRadius: BorderRadius.circular(12)), filled: tru..

기능이 다 갖춰졌다고 해서, 앱이 완성된 건 아니다.사용자가 처음 앱을 열었을 때 느끼는 **“느낌”**이 앱의 첫인상을 좌우한다.이번 글에서는 Flutter의 ThemeData를 활용해 전체적인 색감과 스타일을 감성적으로 다듬어보고,글자, 여백, 그림자 등 작은 요소들에 생기를 불어넣어보자.🎨 테마 설정하기 (ThemeData)MaterialApp에서 theme 속성을 통해 전역 테마를 지정할 수 있다.MaterialApp( theme: ThemeData( primarySwatch: Colors.teal, scaffoldBackgroundColor: Color(0xFFF9F9F9), fontFamily: 'Pretendard', textTheme: TextTheme( ..

게시판의 기본은 ‘쓰기’지만, 그 다음은?바로 수정과 삭제다.이번 글에서는 작성된 게시글을 앱 내에서 수정하거나 삭제하는 기능을 구현해보자.✏️ 수정 기능 구현수정을 위해선 기존 글의 데이터를 TextEditingController에 불러오고,사용자가 수정한 내용을 저장하면 된다.PostProvider에 수정 메서드를 추가하자:void updatePost(int index, Post updatedPost) { _posts[index] = updatedPost; notifyListeners(); savePosts();}이제 EditPostScreen에서 다음과 같이 활용한다:class EditPostScreen extends StatefulWidget { final int index; final ..

글쓰기 기능까지 완성했으니 이제 작성한 글을 앱에 저장할 차례다.Flutter에서는 Provider를 이용한 상태 관리와 SharedPreferences를 활용한 간단한 저장 기능을 함께 사용하면 효율적이다.이번 글에서는 작성된 게시글을 리스트에 반영하고, 앱을 껐다 켜도 유지되는 저장 기능을 구현해보자.🔁 상태 관리: Provider 적용하기Provider과 SharedPreferences를 사용하기 위해선 pubspec.yaml에 두가지 dependencies를 추가해줘야한다.dependencies: shared_preferences: ^2.0.6 provider: ^6.1.2 Provider를 사용하면 전체 앱에서 게시글 데이터를 공유할 수 있다.우선 Post 모델을 정의한다:class Pos..

이제 우리가 만들 게시판 앱에 글을 쓸 수 있는 기능을 더해보자.Flutter에서는 TextField와 Form 위젯을 이용해 사용자의 입력을 받을 수 있다.이번 글에서는 제목과 내용을 입력할 수 있는 폼을 만들고,유효성 검사(Validation)까지 구현해보자.🧾 입력 폼 구성하기우선 입력창을 만들기 위한 TextEditingController를 준비하자:final _titleController = TextEditingController();final _contentController = TextEditingController();다음은 전체 글쓰기 화면 예시이다:class WritePostScreen extends StatefulWidget { @override _WritePostScreenSt..

앱은 단순히 "기능"만 있어서는 부족하다.사용자에게 감정을 주는 "움직임"이 있을 때, 비로소 완성된다.이번 글에서는 Flutter에서 애니메이션을 활용하여 자연스럽고 감성적인 화면 전환을 만들어보자.애니메이션을 더하면 앱이 훨씬 더 매력적으로 변한다.🎞️ Hero 애니메이션Hero는 두 화면 간 같은 위젯을 부드럽게 연결해주는 애니메이션이다.예를 들어 게시글 목록에서 이미지나 제목이 상세 페이지로 부드럽게 확대되어 이동하는 효과를 줄 수 있다.// 리스트 화면Hero( tag: 'post-title-$index', child: Text(post['title']!),)// 상세 화면Hero( tag: 'post-title-$index', child: Text(post['title']!, styl..