![]()
overview. ListView.builder 란? 예제 코드 - todo 리스트 문서 https://api.flutter.dev/flutter/widgets/ListView-class.html ListView class - widgets library - Dart API A scrollable list of widgets arranged linearly. ListView is the most commonly used scrolling widget. It displays its children one after another in the scroll direction. In the cross axis, the children are required to fill the ListView. If non-n..
overview. TextEditingController 란? 예제 문서 https://api.flutter.dev/flutter/widgets/TextEditingController-class.html TextEditingController class - widgets library - Dart API A controller for an editable text field. Whenever the user modifies a text field with an associated TextEditingController, the text field updates value and the controller notifies its listeners. Listeners can then read the text..
![]()
Overview . MVVM 패턴에 대해 알아보자 앱 아키텍처란? MVC (Model-View-Controller) 패턴을 사용하는 주된 이유는? MVVM 패턴에 대해 알아보자 시나리오 1. 앱 아키텍처란? 앱 아키텍처는 애플리케이션의 전반적인 구조와 구성요소, 그리고 이러한 구성요소 간의 관계와 상호작용을 정의하는 청사진 또는 설계 원칙을 의미합니다. 쉽게 말해, 앱을 구축하는 데 필요한 구성요소와 이러한 구성요소들이 어떻게 함께 작동하고 연결되는지를 설명하는 방법론이라고 할 수 있습니다. MVC, MVP, MVVM, VIPER 등 너무나 많은 아키텍처가 존재 한다. 하지만 원리는 거의 동일 하다. 역할 별로 레이어를 나눈다. 각 레이어는 각자의 역할에만 집중하게 설계하고 자신 밖에 업무에서 가능한 신..
overview. JSON 문자열 데이터를 dart 코드로 변환할 수 있을까? dart:convert 라이브러리 전체 코드 http 통신을 해보자 1. JSON 문자열 데이터를 dart 코드로 변환할 수 있을까? JSON 문자열을 Dart 객체로 변환하는 과정을 "JSON 파싱"이라고 합니다. JSON 파싱은 일반적으로 JSON 형식의 문자열 데이터를 특정 프로그래밍 언어의 데이터 구조나 객체로 변환하는 작업을 의미합니다. Dart 객체로 변환하기 위해 우리는 dart:convert 라이브러리의 json.decode() 메서드를 사용합니다. 그럼 라이브러리가 있어야 겠네요! 2. dart:convert 라이브러리 앞서 설명했던것 처럼 라이브러리를 사용합시다. import 'dart:convert'; js..
Overview . 비동기 프로그래밍이란? Future 타입과 값을 꺼내는 방법 1. 비동기 프로그래밍 이란? 동기성 - 모든 코드가 순차적으로 진행되는 형태 비동기 - 코드가 동시다발적으로 실행, 순착적으로 보장을 할 수 없는 형태 dart 비동기 프로그래밍은 프로그램의 흐름을 중단시키지 않고, 무언가의 완료를 기다리는 동안 다른 작업을 수행할 수 있게 해줍니다. Dart에서는 이를 위해 Future와 Stream이라는 두 가지 주요 개념을 제공합니다. 키워드 // 키워드 묶음 // async / await / Future : 1회만 응답을 돌려 받는 경우 // async* / yield / Stream : 지속적으로 응답을 돌려 받아야 하는 경우 Future 키워드로 비동기 처리 예제 ( Future..
![]()
Overview . 플러터에서의 콜백 함수를 알아 보자 플러터에서 코랙 함수 (callback function) 이란? 예제 코드 예제 코드 간략 설명 1. 플러터에서 콜백 함수(callback function)란? 플러터에서 콜백 함수(callback function)는 한 위젯이나 클래스가 다른 위젯이나 클래스에게 특정 작업을 수행하도록 요청을 보내는 방법입니다. 일반적으로, 위젯의 부모가 자식 위젯에게 콜백 함수를 제공하여, 자식 위젯이 특정 상황에 부모 위젯에게 정보를 전달할 수 있게 합니다. 콜백은 자주 사용되는 프로그래밍 패턴 중 하나로, 함수나 메서드를 인자로 전달하여 나중에 어떤 시점에 호출되게 하는 것을 말합니다. 2. 예제 코드 import 'package:flutter/material..
![]()
Overview . 간단하게 사용할 수 있는 클릭 이벤트 InkWell 을 알아보자 InkWell 이란? 1. InkWell 이란? 터치에 반응하는 머티리얼 의 직사각형 영역입니다 . 스플래시를 클립하지 않는 이 위젯의 변형에 대해서는 InkResponse를 참조하세요 . 다음 다이어그램은 기본값을 사용할 때 탭했을 때 InkWell 이 어떻게 보이는지 보여줍니다. InkWell 위젯 에는 Material 위젯이 상위 항목으로 있어야 합니다 . Material 위젯 은 잉크 반응이 실제로 칠해지는 곳입니다. 이는 머티리얼 이 잉크를 퍼뜨려 터치에 실제로 반응하는 머티리얼 디자인 전제와 일치합니다 . 위젯이 이 클래스를 직접 사용하는 경우, debugCheckHasMaterial을 호출하기 위해 빌드 ..
![]()
overview. ios의 경고창인 CupertinoDialog 에 대해 알아봅니다. flutter Cupertino Alert Dialog Cupertino 경고 대화 상자 생성 예제 1. Flutter Cupertino Alert Dialog란? Cupertino 경고 대화 상자는 iOS 스타일 경고 대화 상자를 표시하는 데 사용되는 Flutter의 위젯입니다. 작업을 수행하는 동안 사용자로부터 확인을 받는 데 이를 사용합니다. 예를 들어 파일을 삭제하는 동안 작업을 삭제할지 취소할지 확인하는 메시지가 표시됩니다. 경고 대화 상자에는 제목, 내용, 작업의 세 가지 속성이 있습니다. 상단에는 제목이 표시되고 이어서 콘텐츠와 작업이 표시됩니다. 이러한 속성은 선택 사항이지만 대화 상자의 기본 사항이므로 ..
Overview. 이번에는 Stack 과 그 하위 위젯 Positioned 위젯에 대해 살펴봅니다. Stack 위젯이란? 스택 구조의 이해 스택에서 하위 위젯의 역할 스택 정렬 스택 포지셔닝 스택 오버플로 스택의 오버플로 처리 팁 및 문제 해결 1. Stack 위젯 이란? 스택이란 무엇입니까? Flutter의 스택은 여러 위젯을 겹칠 수 있는 위젯입니다. Flutter의 Stack 위젯은 Stack 위젯의 가장자리를 기준으로 하위 위젯을 배치할 수 있다는 점에서 독특합니다. 따라서 Stack 위젯은 Flutter 앱에서 복잡한 레이아웃을 생성하기 위한 강력한 도구가 됩니다. Flutter에서 스택이 작동하는 방식 Flutter의 Stack 위젯은 Stack 위젯의 가장자리를 기준으로 하위 위젯의 위치..
![]()
Overview. StatefulWidget 과 StatelessWidget의 차이를 알아봅시다. StatefulWidget 과 StatelessWidget 1. StatefulWidget 과 StatelessWidget StatefulWidget이란? 변경 가능한 상태를 가진 위젯입니다. 위젯이 처음 화면에 그려질 때 변수의 값(상태값)에 따라 위젯을 그릴 수 있고, 화면에 그림이 그려진 후 사용자에 액션에 따라 위젯을 다시 그릴 수 도 있는 위젯입니다. StatefulWidget과 StatelessWidget 차이 StatefulWidget과 StatelessWidget의 차이 UI를 만들면 UI가 항상 고정되어 있지 않습니다. 사용자와 상호작용하는 UI에는 상태가 있습니다. 예를 들어 사용자가 버튼..
Overview. Navigator 위젯에 대해 알아봅니다. Navigator 위젯이란? 0. 문서 https://api.flutter.dev/flutter/widgets/Navigator-class.html Navigator class - widgets library - Dart API A widget that manages a set of child widgets with a stack discipline. Many apps have a navigator near the top of their widget hierarchy in order to display their logical history using an Overlay with the most recently visited pages visu..
![]()
Overview. 이번에는 로그인 등에 필요한 TextFormField 위젯을 알아봅니다. TextFormField 이란? Form 예제 코드 TextFormField 예제 코드 1. TextFormField 이란? Form 위젯은 데이터 전송을 위해 여러 양식의 위젯을 함께 그룹화 해주는 컨테이너 위젯입니다. 사용자 입력을 받을 수 있는 여러 입력 요소들을 감싸서 한 번에 데이터를 전송하게 해주거나, 입력 요 소들의 유효성을 검사하는데 사용됩니다. 즉, Form 위젯 안에 TextFormField를 여러 개 추가하여 사용자 입력을 받고 입력 받은 데이터를 한 번에 전송할 수 있습니다 전체 디자인은 이렇습니다. ( 디자인 똥손..) 2. Form 예제 코드 TextFormField 를 모아놓은 클래스 입..
