전체 글 (24) 썸네일형 리스트형 [Flutter] Flutter Navigator 사용법 (5) Flutter 공식문서의 Navigator 챕터에서 이전 화면에 데이터를 반환하는 방법에 대해 정리해보았다. 이전 화면에 데이터 반환하기 새로운 화면으로부터 이전 화면으로 데이터를 반환해야하는 경우가 있음. 예를 들어, 사용자에게 두 가지 옵션을 보여주는 화면에서 사용자가 한 옵션을 클릭하면 첫 번째 화면에 알려주고 그에 따른 실행을 하려는 경우 Navigator.pop()을 사용하여 다음과 같이 진행할 수 있음. 홈 화면을 정의함. 선택 창을 띄우는 버튼을 추가. 두 개의 버튼을 가진 선택 창을 보여줍니다. 하나의 버튼을 클릭하면 선택 창을 닫습니다. 선택된 정보를 홈 화면의 snackbar에 보여줍니다. 홈 화면을 정의. 예제에서는 홈 화면에서는 버튼 하나가 있고 버튼을 클릭하면 연동 창을 띄움. c.. [Flutter] Flutter Navigator 사용법 (4) 새로운 화면으로 데이터 보내기 종종 새로운 화면으로 단순히 이동하는 것 뿐만 아니라 데이터를 넘겨주어야 할 때도 있음. 예를 들어, 사용자가 선택한 아이템에 대한 정보를 같이 넘겨주는 경우가 있음. 예제에서는 Todo 리스트를 만들고 Todo를 선택하면 새로운 화면(위젯)으로 이동하면서 선택한 to do에 대한 정보를 표시함. Todo 클래스를 정의함. Todo 리스트를 표시함. Todo에 대한 상세 정보를 보여줄 수 있는 화면을 생성. 상세 화면으로 이동하면서 데이터를 전달. Todo 클래스를 정의. Todo를 표현하기 위한 간단한 정보를 표시함. 이 예제에서는 두 가지의 데이터를 갖고 있는 클래스를 정의함. class Todo { final String title; final String descri.. [Flutter] Flutter Navigator 사용법(3) Named route로의 화면 전환 flutter 공식문서의 Navigator 챕터에 있는 Named route 사용법을 정리해 보았다. 만약 앱의 다른 많은 영역에서 동일한 화면으로 이동하고자 한다면, 중복된 코드가 생기게 됩니다. 이러한 경우 named route를 정의하여 화면 전환에 사용하는 방법이 있음. Named route를 사용하기 위해 Navigator.pushNamed 함수를 사용할 수 있음. 두 개의 화면 만들기. Route 정의하기. Navigator.pushNamed를 사용하여 두 번째 화면으로 전환하기. Navigator.pop을 사용하여 첫 번째 화면으로 돌아가기. 두 개의 화면 만들기 우선 두 개 이상의 화면이 있어야 함. 예제에서는 첫 번째 화면에는 두 번째 화면으로 이동하기.. [Flutter] Flutter Navigator 사용법 (2) 플루터 공식문서의 중첩 네비게이터 활용 사례에 대해 일부 내용을 정리해 보았다. 중첩 네비게이터 앱은 둘 이상의 네비게이터를 사용할 수 있음. 하나의 네비게이터를 다른 네비게이터 아래에 중첩하여 탭 내비게이션 등을 작성할 수 있음. 중첩 네비게이터 사용 예제 import 'package:flutter/material.dart';// ...void main() => runApp(new MyApp());// ...class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Code Sample for Navigator', // MaterialApp con.. [Flutter] Flutter Navigator 사용법 (1) 플루터 공식문서에 있는 Navigator 사용법을 정리해 보았다. Navigator는 플루터의 페이지 이동에 사용된다. 네비게이터 클래스 최근에 방문한 페이지와 함께 이전 페이지 위에 시각적으로 오버레이를 사용하여 위젯 계층 구조 맨 위에 네비게이터가 있음. 이 패턴을 사용하면 네비게이터가 오버레이에서 위젯을 움직여 한 페이지에서 다른 페이지로 전환해서 표시할 수 있음. 네비게이터 사용 모바일 앱은 일반적으로 ‘화면’또는 ‘페이지’라는 전체 화면 요소를 통해 콘텐츠를 표시함. Flutter에서는 이러한 요소를 경로라고하며 네비게이터 위젯으로 관리합니다 . 네비게이터는 Route 객체의 스택을 관리하고 Navigator.push 및 Navigator.pop 과 같은 스택 관리 방법을 제공함. Android.. [Flutter] Flutter Assets와 image추가하기 플루터 공식문서의 중요성은 여러 번 강조해도 지나치지 않다. 플루터 개발자라면 공식문서의 어느 페이지에 어느 내용이 있는지 훤히 알고 있어야 한다. 플루터 공식문서의 Assets와 image 추가하기 내용을 정리해 보았다. Assets와 Image 추가하기 asset 플루터앱은 코드와 에셋(asset 또는 resources)으로 구성됨 asset의 종류 static data (예 JSON files) configuration files icons images (JPEG, WebP, GIF, animated WebP/GIF, PNG, BMP, and WBMP) Assets 지정 pubspec.yaml을 사용하여 지정함. pubspec.yaml 파일에 있는 명시적 경로 (파일에 상대적인 경로)로 지정됨. a.. [javascript] this, arguments, function, arrow function, callback *** 아래의 내용은 (이웅모 저)책을 공부하며 정리한 내용입니다. *** this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기참조변수이다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조 할 수 있다. 함수를 호출하면 arguments 객체와 this가 암묵적으로 함수 내부에 전달된다. 함수 내부에서 arguments 객체를 지역변수처럼 사용할 수 있는 것처럼 this도 지역변수처럼 사용할 수 있다. 단, this가 가리키는 값, 즉 this 바인딩(식별자와 값을 연결하는 과정을 의미한다. 예를 들어 변수 선언은 변수 이름(식별자)와 확보된 메모리 공간의 주소를 바인딩한다.)은 함수 호출 방식에 의해 동적으로 결정된다. // 객체 리.. [javascript] call by value, call by reference, call by sharing / 원시타입과 참조타입 / type of 와 instance of call by value vs call by reference vs call by sharing call by value vs call by reference 함수의 매개변수를 값으로 전달하는 방식이 Call by Value이고 함수의 매개변수를 참조로 전달하는 방식이 Call by Reference 이다. const flight = 'LH234'; const jane = { name: 'Jane Austin', passport: 2933621416 }; const checkIn = function (flightNum, passenger) { flightNum = 'LH999'; passenger.name = 'Ms. ' + passenger.name; if (passenger.passport === 2.. 이전 1 2 3 다음