플러터로 앱 만들기 플러터로 앱 만들기

ChangeNotifier와 Listenable이 뭐예요?ChangeNotifier는 플러터에서 "내 상태가 바뀌었어!"라고 알릴 수 있게 도와주는 클래스예요.Listenable: 뭔가 변할 수 있다는 걸 알려주는 능력을 가진 인터페이스 (ChangeNotifier는 이걸 상속해요)ChangeNotifier: 상태가 바뀌면 "알려줄게!"라고 신호를 보내는 도구이걸 왜 써요?Flutter는 화면을 다시 그릴 때, 상태(데이터)가 바뀌었는지를 알아야 해요.하지만 Flutter는 스스로 "얘 지금 바뀌었는지?" 를 몰라요.그래서 우리가 직접 알려줘야 해요 → 이때 사용하는 게 바로 ChangeNotifier.예시로 이해해봐요ViewModel (ChangeNotifier 사용)import 'package:flu..

MVVM 아키텍처란?Model: 데이터(예: 서버에서 가져온 사용자 정보)View: 사용자에게 보이는 화면 (예: Widget들)VM(ViewModel): View와 Model 사이에서 데이터를 가공하거나 연결하는 역할ViewView는 "화면"입니다 — 예를 들어 버튼, 텍스트, 이미지 같은 위젯들입니다.이건 사용자에게 보여주기만 하는 부분이에요. 복잡한 로직은 하지 않아요. 그냥 보이기만 하면 돼요.// dumb view exampleclass MyPage extends StatelessWidget { final MyViewModel viewModel; const MyPage({super.key, required this.viewModel}); @override Widget build(Build..

레포지토리 패턴이란?“데이터를 가져오는 방법(API, DB 등)을 숨기고, 앱의 나머지 부분은 ‘이름만 부르면’ 데이터를 얻을 수 있게 해주는 구조”입니다.비유생각해보세요:당신은 요리사입니다.요리할 때마다 마트, 냉장고, 창고에 가서 직접 재료를 가져와야 한다면?너무 번거롭고, 만약 창고 위치가 바뀌면 요리사는 또 그걸 알아야 하죠.그래서 우리는 "재료 창고 관리자(= Repository)"를 둡니다.요리사는 그냥 "감자 줘!"만 말하면 되고,실제 감자를 어디서 어떻게 가져오는지는 Repository가 처리합니다.왜 Repository 패턴이 필요할까?문제Repository 패턴으로 해결API 구조가 바뀌면 앱 전체를 수정해야 함변경은 Repository만 수정하면 됨여러 소스(API, DB, 캐시 등)..

관심사의 분리(Separation of Concerns)란?앱을 구성할 때 각각의 부분이 '무엇을 할 것인지' 명확히 나누는 것을 말합니다. 즉, 한 클래스나 파일이 너무 많은 일을 하지 않도록 역할을 나누는 거예요. 데이터 레이어 vs UI 레이어데이터 레이어앱의 데이터를 관리. API 호출, DB 처리, 비즈니스 로직 포함사용자 목록 가져오기, 로그인 처리 등UI 레이어사용자에게 데이터를 보여주고 입력을 받음.리스트 출력, 버튼 클릭 처리 등왜 나눠야 할까?코드를 읽기 쉽고 유지보수하기 좋게 하기 위해테스트하기 쉽게 하기 위해앱이 커질 때 구조적으로 확장할 수 있도록 하기 위해간단한 예제 (Flutter + MVVM 아키텍처)예시: 사용자 이름을 가져와 화면에 표시하는 앱프로젝트 구조 예시lib/├─..

이 페이지는 아키텍처 모범 사례, 그 중요성, 그리고 Flutter 애플리케이션에 적용할지 여부에 대한 권장사항을 제공합니다. 이러한 권장사항은 엄격한 규칙이 아닌 권장사항으로 간주되어야 하며, 여러분의 앱 고유의 요구사항에 맞게 조정해서 사용해야 합니다. 이 페이지에 나열된 모범 사례들은 우선순위(priority)를 가지고 있으며, 이는 Flutter 팀이 해당 권장사항을 얼마나 강하게 추천하는지를 반영합니다.강력히 권장(Strongly recommend): 새로운 애플리케이션을 구축할 때 반드시 이 권장사항을 구현해야 합니다. 현재 접근 방식과 근본적으로 충돌하지 않는 한 기존 앱을 리팩터링 해서라도 이 관행을 구현하는 것이 좋습니다.권장(Recommend): 이 관행은 대부분의 경우 앱을 향상시킬 ..

각 항목의 크기를 지정하려면 prototypeItem, itemExtent, 또는 itemExtentBuilder 중 하나를 사용할 수 있습니다. 이 중 하나를 지정하는 것이 자식들이 자체적으로 크기를 결정하도록 두는 것보다 더 효율적입니다. 왜냐하면 스크롤 시스템이 자식의 크기를 미리 알고 있으면, 예를 들어 스크롤 위치가 급격하게 변경될 때 작업을 줄일 수 있기 때문입니다.리스트에 고정 크기의 항목이 있는 경우에는 prototypeItem 또는 itemExtent를 사용하세요.리스트에 다양한 크기의 항목이 있는 경우에는 itemExtentBuilder를 사용하세요.prototypeItem, itemExtent, itemExtentBuilder이 세 가지는 리스트 항목의 높이(또는 너비) 를 미리 정의..

플러터의 기본 ListView 생성자는 짧은 리스트에 잘 작동합니다. 많은 수의 항목이 포함된 리스트를 다루기 위해서는 ListView.builder 생성자를 사용하는 것이 가장 좋습니다. 기본 ListView 생성자는 모든 항목을 한 번에 생성해야 하는 반면, ListView.builder() 생성자는 항목이 화면에 스크롤되어 나타날 때 생성합니다.1. 데이터 소스 생성하기먼저, 데이터 소스가 필요합니다. 예를 들어, 데이터 소스는 메시지 목록, 검색 결과, 또는 상점의 제품 목록일 수 있습니다. 대부분의 경우, 이 데이터는 인터넷이나 데이터베이스로부터 옵니다.이 예제에서는 List.generate 생성자를 사용하여 10,000개의 문자열 리스트를 생성합니다:List.generate(10000, (i)..

어쩌면, 모든 리스트 항목들이 고르게 간격을 두고 배치되도록 리스트를 만들고 싶을 수 있습니다. 예를 들어, 다음 이미지에서처럼 네 개의 항목이 고르게 간격을 두고 배치되어 있으며, "Item 0"은 맨 위에, "Item 3"은 맨 아래에 있습니다. 동시에, 장치가 너무 작거나 사용자가 창 크기를 조절했거나, 항목 수가 화면 크기를 초과할 경우에는 사용자가 리스트를 스크롤할 수 있도록 하고 싶을 수 있습니다. 일반적으로 Spacer를 사용해 위젯 간의 간격을 조정하거나, Expanded를 사용해 위젯이 사용 가능한 공간을 채우도록 확장할 수 있습니다. 그러나 이러한 솔루션은 스크롤 가능한 위젯 내에서는 사용할 수 없습니다. 왜냐하면 이들은 유한한 높이 제약(finite height constraint)을..