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

네트워킹 기능이 없는 Flutter 앱은 다소 고립된 느낌을 줄 수 있습니다. 이 페이지에서는 Flutter 앱에 네트워킹 기능을 추가하는 방법을 다룹니다.앱은 데이터를 가져오고, JSON을 메모리 내에서 사용 가능한 형태로 파싱한 다음, 다시 데이터를 전송하게 됩니다.네트워크를 통한 데이터 가져오기 소개가장 간단한 형태로, http 패키지를 이용해 Dart VM 기반 플랫폼과 웹 브라우저 기반 환경 간 네트워크 접근 차이를 처리한다고 가정하면, HTTP GET 요청은 다음처럼 간단히 만들 수 있습니다:import 'package:http/http.dart' as http;void main() async { var response = await http.get( Uri.parse('https://..

사용자 입력 처리이제 Flutter 앱에서 상태를 관리하는 방법을 알았으니, 사용자가 앱과 상호작용하고 상태를 변경할 수 있게 하려면 어떻게 해야 할까요? 사용자 입력 처리 소개Flutter는 멀티 플랫폼 UI 프레임워크이기 때문에, 사용자가 Flutter 앱과 상호작용할 수 있는 다양한 방법이 있습니다. 이 섹션의 자료들은 앱 내에서 사용자 상호작용을 가능하게 하는 데 일반적으로 사용되는 몇 가지 위젯을 소개합니다. 스크롤과 같은 일부 사용자 입력 메커니즘은 레이아웃(Layouts) 섹션에서 이미 다루었습니다.디자인 시스템 지원에 대해Flutter는 SDK의 일부로 두 가지 디자인 시스템(Material과 Cupertino)의 미리 제작된 구성 요소를 제공합니다. 교육 목적으로, 이 페이지는 Mater..

Flutter 앱의 상태(state)란, UI를 표시하거나 시스템 리소스를 관리하는 데 사용하는 모든 객체를 의미합니다. 상태 관리(state management)는 이러한 객체들에 효과적으로 접근하고, 여러 위젯 사이에서 공유할 수 있도록 앱을 구성하는 방법을 말합니다. 이 페이지에서는 상태 관리에 대한 다양한 측면을 다룹니다. 주제는 다음과 같습니다:StatefulWidget 사용하기생성자, InheritedWidget, 콜백(callback)을 사용해 위젯 간에 상태 공유하기Listenable을 사용하여 어떤 변화가 일어날 때 다른 위젯에게 알리기애플리케이션 아키텍처에 Model-View-ViewModel (MVVM) 사용하기 이 가이드는 provider나 Riverpod 같은 서드파티 패키지를 사..

이 섹션에서는 가장 일반적인 레이아웃 위젯을 사용하여 레이아웃을 구축하는 방법을 배웁니다. Flutter DevTools(또는 Dart DevTools라고도 불림)를 사용하여 Flutter가 레이아웃을 생성하는 방식을 이해하게 됩니다. 마지막으로, Flutter에서 가장 흔히 발생하는 레이아웃 오류 중 하나인 악명 높은 "제한되지 않은 제약 조건(unbounded constraints)" 오류를 접하고 이를 디버그하는 방법을 배우게 됩니다.Flutter에서 레이아웃 이해하기Flutter의 레이아웃 메커니즘의 핵심은 위젯입니다. Flutter에서는 거의 모든 것이 위젯입니다 — 심지어 레이아웃 모델도 위젯입니다. Flutter 앱에서 볼 수 있는 이미지, 아이콘, 텍스트 모두 위젯입니다. 보이지 않는 것들..

Flutter와 관련하여, "모든 것이 위젯이다"라는 말을 자주 듣게 될 것입니다. 위젯은 Flutter 앱 사용자 인터페이스의 구성 요소이며, 각각의 위젯은 사용자 인터페이스의 일부를 불변(immutable)으로 선언하는 것입니다. 위젯은 텍스트와 버튼 같은 물리적 측면뿐만 아니라 패딩과 정렬 같은 레이아웃 효과를 설명하는 데에도 사용됩니다. 위젯은 구성(composition)을 기반으로 하는 계층 구조를 형성합니다. 각 위젯은 부모 안에 중첩되며 부모로부터 컨텍스트(context)를 받을 수 있습니다. 이 구조는 최상위(root) 위젯까지 이어집니다. 다음은 이를 보여주는 간단한 예제입니다. import 'package:flutter/material.dart';import 'package:flutte..

다트 소개플러터를 시작하려면 플러터에 사용되는 다트 프로그래밍 언어에 대해 어느 정도 알아야 합니다. 이 페이지는 다트에 대해 소개합니다. 다트는 자바, 자바스크립트 또는 다른 C 계열 언어를 사용해본 사람이라면 친숙하게 느껴질 것입니다.. 다음은 dart.dev에서 데이터를 가져오고, 반환된 JSON을 디코딩하여 콘솔에 출력하는 예제 코드입니다. import 'dart:convert';import 'package:http/http.dart' as http;class Package { final String name; final String latestVersion; final String? description; Package(this.name, this.latestVersion, {this..

이 카테고리는 Flutter 초보자를 위한 다음 학습 단계입니다. 프로그래밍 방법이 아니라 Flutter가 어떻게 작동하는지를 배우는 것이 목표입니다.추천 학습 순서1. Dart 소개 (선택사항)Flutter는 Dart 언어를 사용합니다.Java, C++, Swift 경험이 있으면 쉽게 적응할 수 있습니다.2. 위젯 기본 사항Flutter 앱의 핵심 구성 요소인 "위젯"을 이해합니다.3. 레이아웃Flutter는 코드로 레이아웃을 구성합니다.위젯을 조합하여 다양한 화면에 최적화된 UI를 만듭니다.4. 상태 관리위젯 간 상태를 공유하고, MVVM 패턴으로 상태를 효과적으로 관리하는 방법을 배웁니다.5. 사용자 입력 처리버튼, 텍스트 등 사용자 상호작용을 지원하는 위젯을 사용하고, 직접 상호작용 기능을 추가하..