프로그래밍/Flutter & Dart11

• [Flutter] Inherited Widget . 위젯은 of 메서드를 이용해 트리의 상위에 위치한 InheritedWidget의 참조를 얻는다. . of 메서드는 트리를 탐색하여 가장 가까운 InheritedWidget 형식을 가진 부모를 찾아 반환한다. . 대부분 InheritedWidget 자체에 of 메서드를 정의함 . 파라메터로 전달된 BuildContext로 BuildContext.inheritedFromWidgetOfExactType 메서드를 호출 . inheritedFromWidgetOfExactType은 실제 트리를 검색하는 메서드 -> BuildContext로 부모 위젯에 접근 .inheritedFromWidgetOfExactType은 정적(Static)메서드 -> 어디에서나 호출 가능 프로그래밍/Flutter & Dart 2023. 2. 1.

• 

  [Flutter] Stream Controller 1. Stream Controller StreamController는 스트림을 제어하는 도구 중 하나입니다. 각각의 StreamController는 'sink'와 'stream'이라는 두 개의 오브젝트를 갖습니다. sink는 스트림에 데이터를 넣어주는(push) 역할을 하며, stream은 데이터 파이프를 타고 넘어오는 데이터를 꺼내는(receive)데 사용합니다. import 'dart:async'; void main() async { // create a StreamController final streamController = StreamController(); // listen to events streamController.stream.listen(print); // push events str.. 프로그래밍/Flutter & Dart 2023. 1. 13.

• [Flutter] for와 forEach Flutter에서 가장 대표적으로 사용하는 반복문은 for와 forEach입니다. 각각 외부반복, 내부반복으로 구분합니다. 문법에 대해서 간단히 정리해 보면 다음과 같습니다. 1에서 6까지 숫자가 차례대로 저장되어 있는 리스트의 각 원소를 출력하는 코드를 작성해 보도록 하겠습니다. 구현된 코드는 다음과 같습니다. void main() { final lists = [1, 2, 3, 4, 5, 6]; for (int i = 0; i < lists.length; i++) { print('for loop: ${lists[i]}'); } lists.forEach((e){ print('forEach loop: $e'); }); } 가장 먼저 1에서 6까지 원소로 이루어진 lists 리스트를 정의합니다. for문에서.. 프로그래밍/Flutter & Dart 2023. 1. 5.

• [Flutter] Cascade Operator 오늘은 Cascade Operator에 대해서 알아보도록 하겠습니다. 계단식 표기법으로도 불립니다. Cascade Operator를 사용하면 동일 객체에서의 일련의 작업을 보다 깔끔하게 표현할 수 있습니다. 다음과 같이 정의된 User class가 있다고 가정해 봅시다. class User{ String name = ''; int age = 0; } void main() { User user = User(); user.name = 'juhan'; user.age = 23; User user1 = User() ..name = 'juhan' ..age = 23; } User class는 하위에 name과 age라는 두 개의 속성을 가지고 있습니다. User class를 이용해서 새로운 인스턴스를 만들고 새로.. 프로그래밍/Flutter & Dart 2023. 1. 5.

• [Flutter] Future Builder 함수를 통해서 어떤 값을 리턴할 때 우리는 기본적으로 즉각적으로 값은 반환하는 상황을 주로 사용하였습니다. 하지만 애플리케이션 외부로부터 데이터를 전달받는 상황이라면 함수가 실행되고 나서 네트워크 문제등에 의해서 값을 바로 출력할 수 없는 경우가 발생합니다. 이 때 Future Builder를 이용해서 값을 받을 수 있습니다. Future Builder를 이용하면서 Future 타입의 데이터를 다루게 되는데 말 그대로 미래의 어느 한 시점(in the future)에 얻게 되는 데이터를 의미합니다. 다음의 소스코드를 통해서 값이 출력되는 과정을 살펴보도록 하겠습니다. 우리가 흔히 사용하는 함수는 함수가 호출되는 즉시 값을 반환하고 반환된 값을 변수에 저장한 뒤 화면에 출력하는 방법으로 사용됩니다. (ge.. 프로그래밍/Flutter & Dart 2023. 1. 5.

• 

  [Flutter] 보이지 않는 위젯(layout widget) flutter를 사용함에 있어서 가장 많이 듣게 되는 단어는 단연 위젯(widget)입니다. 플러터는 거의 대부분(almost) 위젯으로 이루어져 있다고 해도 과언이 아닐 정도로 위젯이 차지하는 비중은 대단합니다. 위젯을 한마디로 표현하라고 하면, 'UI를 만들기 위해서 사용되는 class 집합'정도로 표현할 수 있겠습니다. 아무리 복잡한 화면도 가장 간단한 위젯의 조합으로부터 시작됩니다. 위젯을 쌓고 또 쌓다 보면 화면이 만들어지는 것이죠. 그렇기 때문에 이 위젯에 대해서 정확히 이해하고 있어야 화면 내에 UI 컴포넌트를 적재적소에 원하는 크기로 삽입할 수 있습니다. layout Widget vs UI element Widget 위젯은 크게 레이아웃 위젯(layout widget)과 UI 요소 위젯(U.. 프로그래밍/Flutter & Dart 2022. 12. 31.

• [Flutter] const, final의 차이점(feat. immutable, stateless vs stateful 차이점) Immutable? flutter를 배우기 시작하면서 가장 많이 듣는 단어 중 하나가 바로 immutable이라는 단어입니다. 사전적인 뜻은 '변하지 않는' 정도의 뜻을 가지고 있습니다. HTML도 아니고 상태가 계속 바뀌고 더군다나 상태 관리에 대한 솔루션도 여러 가지 존재하는 마당에 immutable이라는 것은 무슨 이야기일지 오늘 한번 알아보도록 하겠습니다. flutter의 위젯이 immutable이라고 이야기하는 이유는 widget의 변경이 생기면 flutter는 아예 그 위젯을 재생성(re-build) 하기 때문입니다. 그렇기 때문에 immutable이라고 이야기할 수 있는 것이죠. 애니메이션 효과들도 어떻게 보면 widget의 재생성의 과정이 빠르게 반복되는 거라고 하네요. flutter의 공.. 프로그래밍/Flutter & Dart 2022. 12. 30.

• 

  [Flutter] Go Router를 이용해서 페이지 이동하기 go route는 flutter에서 페이지 간 이동 시 URL기반의 API를 이용해서 쉽게 이동할 수 있도록 도와주는 패키지입니다. 1. Go Router 설정하기 import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; const Color darkBlue = Color.fromARGB(255, 18, 32, 47); void main() { runApp(MyApp()); } final GoRouter _router = GoRouter( routes: [ GoRoute( path: '/', builder: (context, state) => HomePage(), ), GoRoute( path: '/classA',.. 프로그래밍/Flutter & Dart 2022. 12. 29.

• 

  [Flutter] state management(provider) 앞으로 몇 차례 포스팅을 통해서 provider에 대해서 공부를 해 보고자 합니다. state management는 기본적으로 app을 흐르는 데이터의 관리라고 생각하면 되겠습니다. 처음 앱을 만들게 되면 페이지를 구성하게 되고 페이지를 구성하거나 사용자의 입력을 받아서 다른 페이지에 전달해야 하는 경우가 생깁니다. 전달하는 데이터가 바로 다음 페이지일 수도 있고 아니면 구조 상 멀리 떨어진 페이지일 수도 있습니다. 이때 필요한 데이터를 제 때 필요한 곳에 전달하는 것이 state management라고 할 수 있으며, 이를 구현하기 위해서는 다음과 같은 몇 가지 방법을 이용할 수 있습니다. 1. stateful widget을 이용한 데이터 전달 2. inherited widget을 이용한 데이터 관리 .. 프로그래밍/Flutter & Dart 2022. 12. 27.

• 

  Flutter vsCode 완소 세팅방법 안녕하세요. 오늘은 vsCode를 이용서 Flutter 프로그래밍을 할 때 정말 유용한 세팅 방법을 공유하고자 합니다. vsCode의 화면 왼쪽 하단에 톱니바퀴 모양의 'Manage' 버튼을 클릭한 뒤 [Command Palette...]를 클릭합니다. 화면의 상단에 입력창이 뜨게 되는데 여기에서 'open user settings'를 입력한 뒤 나오는 드롭박스 메뉴 중 아래쪽에 [Open User Settings(JSON)]를 찾아서 클릭합니다. 화면과 같이 'settings.json'파일이 열립니다. 화면의 왼쪽이 원본입니다. 화면의 오른쪽과 같이 중간에 다음의 코드를 추가로 입력해 줍니다. "editor.codeActionsOnSave": { "source.fixAll": true }, "dart... 프로그래밍/Flutter & Dart 2022. 12. 2.

• Flutter flutter는 Dart라는 언어를 기반으로 만들어진 프레임워크입니다. 프레임워크라는 것이 프로그래밍을 쉽게 할 수 있도록 도와주는 라이브러리 집합정도로 생각할 수 있는데요. Angular라든지 React라든지가 이와 같은 프레임워크라고 할 수 있습니다. Angular나 React는 그 기반을 Javascript에 두고 있지만 flutter는 Dart라는 언어에 기반을 두고 있습니다. 그런데말입니다. flutter나 Dart모두 구글에서 만들었다는 걸 아시나요? 그렇기 때문에 서로 엄청난 시너지 효과가 나타납니다. 예시로 처음에 Dart 언어는 null safety를 지원하지 않다가 flutter 팀에서 요청에 의해서 나중에 추가 되었다는 이야기가 있습니다. 이처럼 모두 구글 개발자들에 의해서 개발되고 .. 프로그래밍/Flutter & Dart 2022. 12. 1.