본문 바로가기

Category/Flutter11

Flutter에서 화면 전환을 위한 주요 요소들: Navigator, MaterialPageRoute, GestureDetector Flutter는 사용자가 앱에서 페이지를 전환하거나 새로운 화면을 탐색할 수 있도록 다양한 도구와 위젯을 제공합니다. 이 글에서는 Navigator, MaterialPageRoute, GestureDetector에 대해 설명하고, 이들이 어떻게 사용되는지 예제를 통해 이해해 보겠습니다.1. NavigatorNavigator는 Flutter의 네비게이션과 화면 전환을 관리하는 핵심 클래스입니다. Navigator는 앱의 스택(stack) 구조를 관리하며, 이를 통해 새로운 화면을 푸시(push)하거나 기존 화면을 팝(pop)할 수 있습니다.push(): 새로운 화면을 스택에 추가하여 표시합니다.pop(): 현재 화면을 제거하고 이전 화면으로 돌아갑니다.예제 코드:Navigator.push( context.. 2024. 11. 3.
Flutter에서 403 오류 해결: Referer 헤더로 이미지 로드 문제 해결하기 웹에서 이미지를 로드할 때 403 Forbidden 오류가 발생하는 이유 중 하나는 서버의 접근 제한 정책 때문입니다. 많은 웹사이트는 보안을 강화하고 리소스의 무단 사용을 방지하기 위해 요청의 출처를 확인하는 Referer 헤더를 사용합니다. Referer 헤더는 서버가 요청이 어떤 웹사이트에서 왔는지를 알 수 있도록 해줍니다. 예를 들어, 이미지나 파일을 제공하는 서버는 특정 출처에서만 요청을 허용하도록 설정할 수 있습니다. 만약 요청이 허가된 출처(예: https://comic.naver.com)에서 오지 않았다면 서버는 접근을 차단하고 403 Forbidden 오류를 반환할 수 있습니다. 이 문제를 해결하기 위해 Image.network() 메서드에 Referer 헤더를 추가할 수 있습니다. 예를.. 2024. 11. 3.
Flutter의 ListView : 스크롤 가능한 목록 만들기 ListView는 Flutter에서 스크롤 가능한 목록을 만들 때 가장 널리 사용되는 위젯 중 하나입니다. 여러 위젯을 세로 또는 가로로 스크롤할 수 있는 목록 형태로 표시할 수 있어 유용합니다.ListView의 종류ListView() 기본 생성자: 모든 항목을 한 번에 렌더링하므로 적은 수의 항목을 표시할 때 적합합니다.ListView( children: [ Text('Item 1'), Text('Item 2'), Text('Item 3'), ],)ListView.builder(): 동적으로 생성된 많은 수의 항목을 효율적으로 렌더링할 때 사용됩니다. itemBuilder를 사용하여 필요할 때마다 항목을 생성하므로 메모리 사용이 효율적입니다.ListView.builder( item.. 2024. 11. 3.
Flutter에서 FutureBuilder로 비동기 데이터 처리하기 FutureBuilder는 Flutter에서 비동기 작업의 상태를 UI에 쉽게 반영할 수 있도록 도와주는 위젯입니다. 주로 API 호출이나 파일 읽기와 같은 비동기 작업이 완료될 때까지 기다린 후, 그 결과를 기반으로 다른 UI를 표시할 때 사용됩니다.FutureBuilder의 주요 속성future: 비동기 작업을 반환하는 Future 객체입니다. 예를 들어, API 요청이 포함될 수 있습니다.builder: 비동기 작업의 상태에 따라 UI를 렌더링하는 함수입니다. AsyncSnapshot을 매개변수로 받아 작업의 상태와 데이터를 제공합니다.AsyncSnapshot의 상태connectionState.none: Future가 시작되지 않았습니다.connectionState.waiting: Future가 실.. 2024. 11. 3.
Dart에서 JSON 쉽게 다루기 : jsonDecode 사용법과 예제 jsonDecode 설명 및 사용 예시jsonDecode는 Dart의 내장 라이브러리인 dart:convert에 포함된 함수로, JSON 문자열을 Dart 객체(예: Map, List)로 변환해 주는 역할을 합니다. 이 함수는 JSON 데이터를 쉽게 처리할 수 있게 해주며, REST API로부터 받은 JSON 형식의 응답을 디코딩하는 데 자주 사용됩니다.주요 특징:JSON 문자열을 Dart 객체로 변환합니다.반환된 Dart 객체는 JSON의 구조에 따라 Map 혹은 List 타입이 됩니다.JSON 구조가 중첩된 경우에도 jsonDecode는 이를 적절히 변환해줍니다.사용 예시:import 'dart:convert';void main() { // JSON 문자열 예제 String jsonString =.. 2024. 11. 3.
Flutter 라이프사이클 Flutter의 라이프사이클은 Flutter 애플리케이션의 실행 및 종료 동안 위젯의 상태와 생명주기를 관리하는 방법입니다. 이 라이프사이클은 주로 StatefulWidget에서 중요하게 다뤄지며, State 클래스의 다양한 메서드를 통해 위젯의 상태가 어떻게 변화하는지를 보여줍니다. 여기 Flutter 라이프사이클의 주요 메서드와 설명입니다:1. initState()설명: 위젯이 처음 생성될 때 호출되는 메서드입니다. 초기화 작업을 수행할 때 사용되며, 단 한 번만 호출됩니다.사용 예시: 초기 API 호출, 애니메이션 컨트롤러 초기화 등.주의사항: super.initState()를 반드시 호출해야 합니다.2. didChangeDependencies()설명: 위젯이 부모 위젯의 변경에 따라 종속성에 변화.. 2024. 11. 2.