Flutter 게시판 앱 만들기 — TextField와 Form으로 완성하는 입력 폼
·
Flutter/Flutter 게시판 앱 만들기
이제 우리가 만들 게시판 앱에 글을 쓸 수 있는 기능을 더해보자.Flutter에서는 TextField와 Form 위젯을 이용해 사용자의 입력을 받을 수 있다.이번 글에서는 제목과 내용을 입력할 수 있는 폼을 만들고,유효성 검사(Validation)까지 구현해보자.🧾 입력 폼 구성하기우선 입력창을 만들기 위한 TextEditingController를 준비하자:final _titleController = TextEditingController();final _contentController = TextEditingController();다음은 전체 글쓰기 화면 예시이다:class WritePostScreen extends StatefulWidget { @override _WritePostScreenSt..
Flutter 게시판 앱 만들기 — 감성을 더한 부드러운 움직임 만들기
·
Flutter/Flutter 게시판 앱 만들기
앱은 단순히 "기능"만 있어서는 부족하다.사용자에게 감정을 주는 "움직임"이 있을 때, 비로소 완성된다.이번 글에서는 Flutter에서 애니메이션을 활용하여 자연스럽고 감성적인 화면 전환을 만들어보자.애니메이션을 더하면 앱이 훨씬 더 매력적으로 변한다.🎞️ Hero 애니메이션Hero는 두 화면 간 같은 위젯을 부드럽게 연결해주는 애니메이션이다.예를 들어 게시글 목록에서 이미지나 제목이 상세 페이지로 부드럽게 확대되어 이동하는 효과를 줄 수 있다.// 리스트 화면Hero( tag: 'post-title-$index', child: Text(post['title']!),)// 상세 화면Hero( tag: 'post-title-$index', child: Text(post['title']!, styl..
Flutter 게시판 앱 만들기 — Navigator 완전 정복 🌈
·
Flutter/Flutter 게시판 앱 만들기
사용자가 글을 클릭하면 어떤 화면이 떠야 할까?당연히 글의 상세 내용이 보이는 화면으로 이동해야 한다.Flutter에서는 이 동작을 Navigator로 처리한다.이번 글에서는 Navigator의 사용법과 함께 실제 글 클릭 시 상세 페이지로 넘어가는 기능을 구현해 본다.🧭 Navigator란?Flutter에서 화면을 전환(페이지 이동)할 때 사용하는 내장 위젯이다.기본적으로 스택(Stack) 구조를 사용하며, push/pop 방식으로 이동한다.Navigator.push(): 새 페이지를 추가Navigator.pop(): 현재 페이지를 제거하고 이전으로 돌아감📄 상세 페이지 만들기이전 글에서 만들었던 posts 리스트 중 하나를 눌렀을 때글 상세 페이지로 이동하도록 만들어보자.우선 PostDetailS..
Flutter 게시판 앱 만들기 — 반복되는 위젯을 더 똑똑하게 그리는 법
·
Flutter/Flutter 게시판 앱 만들기
게시판이라면 가장 먼저 떠오르는 건 바로 "글 목록"이다.많은 글을 한 번에 보여주려면 일일이 위젯을 나열하는 건 비효율적이다.Flutter에서는 이럴 때 ListView.builder를 사용하면 깔끔하게 해결할 수 있다.이번 글에서는 게시글 리스트 화면을 Flutter의 ListView로 구성해 보자.반복되는 UI를 자동으로 만들어주는 아주 유용한 위젯이다.📜 ListView란?Flutter에서 스크롤 가능한 목록을 만들 때 사용하는 위젯이다.특히 ListView.builder는 반복되는 항목을 효율적으로 그릴 수 있다.예시 코드를 보자:ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return ListT..
Flutter 게시판 앱 만들기 — Scaffold, AppBar, BottomNavigationBar 완전 이해하기
·
Flutter/Flutter 게시판 앱 만들기
앱을 만든다는 건 결국 화면을 구성하는 일이다.Flutter에서는 이 화면을 구성할 때 가장 기본이 되는 구조가 있다. 바로 Scaffold다.이번 글에서는 Flutter 게시판 앱의 첫 화면을 구성하면서 앱의 뼈대를 만들어볼 거다.마치 텅 빈 공책 위에 선을 긋고, 테두리를 그리는 느낌처럼 말이다.🧱 Scaffold란?Flutter에서 화면의 기본 틀을 잡아주는 위젯이다.AppBar, Body, Drawer, BottomNavigationBar 등 주요 구성 요소를 한 번에 담을 수 있다.Scaffold( appBar: AppBar( title: Text('Flutter 게시판'), ), body: Center( child: Text('내용이 여기에 들어갑니다'), ), botto..
시작! Flutter 게시판 앱 만들기 — 환경 설정과 기본 구조 이해하기 🌱
·
Flutter/Flutter 게시판 앱 만들기
Flutter로 앱을 만들겠다고 결심했을 때, 내가 가장 먼저 떠올린 건 "어떤 앱을 만들지?"였다.개발자라면 누구나 한 번쯤 만들어본다는 그 앱, 바로 게시판(Board)이다.이 시리즈는 Flutter를 처음 시작하는 사람이 하나의 앱을 완성해나가는 과정을 함께 경험할 수 있도록 구성했다.당신도 이제, 직접 게시판 앱을 만들 수 있다.🔧 개발 환경 준비Flutter 앱 개발을 위해 필요한 환경은 아래와 같다:Flutter SDK 설치 (Flutter 설치 가이드)Android Studio 혹은 VSCode 설치안드로이드 에뮬레이터 또는 실기기Flutter 설치 확인은 다음 명령어로 진행할 수 있다:flutter doctor정상적으로 설치되었다면 모든 항목에 체크(✔️) 표시가 되어야 한다.📁 프로젝..