사용자가 글을 클릭하면 어떤 화면이 떠야 할까?당연히 글의 상세 내용이 보이는 화면으로 이동해야 한다.Flutter에서는 이 동작을 Navigator로 처리한다.이번 글에서는 Navigator의 사용법과 함께 실제 글 클릭 시 상세 페이지로 넘어가는 기능을 구현해 본다.🧭 Navigator란?Flutter에서 화면을 전환(페이지 이동)할 때 사용하는 내장 위젯이다.기본적으로 스택(Stack) 구조를 사용하며, push/pop 방식으로 이동한다.Navigator.push(): 새 페이지를 추가Navigator.pop(): 현재 페이지를 제거하고 이전으로 돌아감📄 상세 페이지 만들기이전 글에서 만들었던 posts 리스트 중 하나를 눌렀을 때글 상세 페이지로 이동하도록 만들어보자.우선 PostDetailS..

게시판이라면 가장 먼저 떠오르는 건 바로 "글 목록"이다.많은 글을 한 번에 보여주려면 일일이 위젯을 나열하는 건 비효율적이다.Flutter에서는 이럴 때 ListView.builder를 사용하면 깔끔하게 해결할 수 있다.이번 글에서는 게시글 리스트 화면을 Flutter의 ListView로 구성해 보자.반복되는 UI를 자동으로 만들어주는 아주 유용한 위젯이다.📜 ListView란?Flutter에서 스크롤 가능한 목록을 만들 때 사용하는 위젯이다.특히 ListView.builder는 반복되는 항목을 효율적으로 그릴 수 있다.예시 코드를 보자:ListView.builder( itemCount: items.length, itemBuilder: (context, index) { return ListT..

앱을 만든다는 건 결국 화면을 구성하는 일이다.Flutter에서는 이 화면을 구성할 때 가장 기본이 되는 구조가 있다. 바로 Scaffold다.이번 글에서는 Flutter 게시판 앱의 첫 화면을 구성하면서 앱의 뼈대를 만들어볼 거다.마치 텅 빈 공책 위에 선을 긋고, 테두리를 그리는 느낌처럼 말이다.🧱 Scaffold란?Flutter에서 화면의 기본 틀을 잡아주는 위젯이다.AppBar, Body, Drawer, BottomNavigationBar 등 주요 구성 요소를 한 번에 담을 수 있다.Scaffold( appBar: AppBar( title: Text('Flutter 게시판'), ), body: Center( child: Text('내용이 여기에 들어갑니다'), ), botto..

Flutter를 공부하면서 처음 서버와 연결해 데이터를 주고받는 순간, 나는 진짜 앱을 만드는 느낌을 받았다.이 작은 연결 하나가 사용자와 데이터를 이어주고, 앱의 생명을 불어넣는다는 걸 느꼈달까.🌐 HTTP 통신이란?HTTP는 HyperText Transfer Protocol의 약자로, 웹에서 정보를 주고받기 위한 약속이다.Flutter에서는 http 패키지를 사용해서 이 통신을 쉽게 처리할 수 있다.🔧 http 패키지 설치dependencies: http: ^0.13.6설치 후엔 꼭 flutter pub get을 실행하자!🚀 GET 요청 보내기import 'package:flutter/material.dart';import 'package:http/http.dart' as http;import..

처음으로 Flutter에서 애니메이션을 구현해봤을 때, 마치 정적인 화면에 생명을 불어넣는 기분이었다.그저 버튼 하나 눌렀을 뿐인데 화면이 부드럽게 전환되고, 크기와 색상이 변화하는 걸 보며 "와... 이래서 Flutter 하는구나" 싶었다.🎬 Flutter 애니메이션이란?Flutter에서는 애니메이션을 굉장히 다양한 방식으로 구현할 수 있어요. 대표적으로 다음과 같은 두 가지 방식이 있다.Implicit Animation (암시적 애니메이션) - AnimatedContainer, AnimatedOpacity 등Explicit Animation (명시적 애니메이션) - AnimationController, Tween, AnimatedBuilder 등🌱 AnimatedContainer 사용 예제 (Im..

Flutter로 앱을 만들다 보면, 한 화면에서 다른 화면으로 넘어가는 상황이 자주 발생한다. 예를 들어, 로그인 후 홈 화면으로 이동하거나, 리스트에서 아이템을 눌러 상세 페이지로 가는 등의 흐름 말이다.이번 글에서는 Flutter에서 페이지 간 이동을 담당하는 Navigator에 대해 알아보고, push, pop, named routes 등 다양한 방법을 예제와 함께 정리해보았다.🚀 Navigator란?Flutter의 Navigator는 Stack 구조로 되어 있어 화면 이동을 쉽게 처리할 수 있도록 도와준다.push는 새 화면을 추가하고, pop은 이전 화면으로 돌아가는 방식이다.📄 예제: 페이지 이동 기본import 'package:flutter/material.dart';void main()..