조준장 개발자 생존기

Failed to start DevTools: Dart DevTools exited with code 255. 과 같이 에러 메시지가 나온다면 다음 코드를 터미널에 작성하여 문제를 해결한다. flutter upgrade

이번에는 ChangeNotifierProvider를 통해 Provider를 구현해보자. ChangeNotifier는 Flutter SDK에 포함된 클래스로 청취자에게 변경 알림을 제공해주는 것이다. 즉, ChangeNotifier를 통해 변화에 대해 구독할 수 있다. Provider는 이전에 간단하게 알아보았으므로 구현하는 방법에 대해서 바로 알아보자. [Flutter] 플러터 Bloc 패턴과 Provider 패턴 Flutter 앱을 개발하다 보면 자주 등장하는 Bloc 패턴과 Provider 패턴에 대해서 간단하게 알아보자. Bloc 패턴은 Google 개발자가 권장하는 Flutter의 상태 관리 시스템이다. 프로젝트를 관리하는데 도움 fre2-dom.tistory.com 라이브러리 아래 링크에 들어가..

Flutter 앱을 개발하다 보면 자주 등장하는 Bloc 패턴과 Provider 에 대해서 간단하게 알아보자. Bloc 패턴은 Google 개발자가 권장하는 Flutter의 상태 관리 시스템이다. 프로젝트를 관리하는데 도움이 되며 프로젝트의 중앙 위치에서 데이터에 액세스 할 수 있다. 이 아키텍처는 다른 아키텍처와도 연관시킬 수 있다. 예를 들어 MVP와 MVVM이 있으면, 여기서 Bloc이 MVVM에 ViewModel로 대체 가능하다. 하지만 간단한 로직 하나 구현하는데도 패턴을 적용하면 최소 4개의 클래스를 작성해야 하는 불편함이 있다. 그래서 등장한 것이 Provider 이다. Provider 는 Bolc 패턴보다 쉽게 적용할 수 있어, 데이터 공유와 로직의 분리를 좀 더 간단하게 할 수 있다. P..

앱 개발을 하면서 비동기는 아주 중요한 개념이라고 생각하여 Flutter에서 주로 사용되는 비동기인 Future와 Stream의 개념을 다시 한번 집고 넘어가려고 한다. 비동기란 동기 처리가 끝난 후에 실행되며 Firebase 같은 DB에서 데이터를 가져오거나 API, 크롤링 등 외부에서 데이터를 가져오는 경우와 반응형 프로그래밍을 할 때 쓰인다. Flutter에서 비동기 처리를 하기 위해서는 Future와 Stream에 대해서 잘 알아야 한다. Future는 이전에 설명했듯이 앨범에서 이미지 가져오기, 현재 배터리 표시, 파일 가져오기, http 요청 등 일회성 응답에 사용된다. Stream은 위치 업데이트, 음악 재생, 스톱워치 등 일부 데이터를 여러 번 가져올 때 사용된다. 즉, 계속해서 데이터의 ..

이전에 Dart 문법에 대해서 알아보면서 비동기 처리에 대해서 다뤄보았다. 이번에는 이전에 다뤘던 비동기 처리의 개념 중 자주 사용되는 FutureBuilder에 대해서 알아보자. [Flutter] 플러터 Dart(다트) 문법 정리 이번에는 플러터에서 사용되는 Dart 문법에 대해서 알아보자. DartPad dartpad.dev Dart 언어만을 다루기 때문에 위 링크를 통해 Dart 문법에 대해서만 확인하면서 진행하도록 하자. var와 dynamic Dart에서 Ja fre2-dom.tistory.com 비동기 처리에 대해서 잘 모른다면 위 링크를 통해 한번 읽어보고 오면 이해하기 더 좋을 것 같다. FutureBuilder는 Future를 사용하는 이유와 같이 데이터를 모두 다 받기 전에 먼저 데이터..

이번에는 플러터에서 사용되는 Dart 문법에 대해서 알아보자. DartPad dartpad.dev Dart 언어만을 다루기 때문에 위 링크를 통해 Dart 문법에 대해서만 확인하면서 진행하도록 하자. var와 dynamic Dart에서 Java와 비슷하게 변수를 선언하지만 Java와 다르게 타입 추론이 가능하다. String name = '준장'; var friend = '준혁'; // 타입 추론 변수 name은 String으로 타입을 명시해주었지만 변수 friend 같은 경우, 타입을 var로 지정하여 타입 추론을 하게 했다. 여기서 주의할 점은 var 타입으로 변수를 선언할 때 초깃값을 참조하여 해당 변수의 타입을 추론하기 때문에 한번 var로 선언한 변수는 다른 타입의 값으로 넣어서는 안 된다는 것..

이번에는 앱 개발에 많이 쓰이는 Bottom Navigation Bar를 구현해보자. Bottom Navigation Bar는 동적으로 화면이 변화하므로 Stateful Widget을 통해 구현해야한다. main.dart import 'package:flutter/material.dart'; import 'package:flutter_application_1/home.dart'; void main() => runApp(MyApp()); // 프로그램을 실행할 때 MyApp 부터 실행하겠어! // StatelessWidget은 변화지 않는 화면을 작업할 때 사용. // 변화는 화면을 작업 하고싶을 경우에는 StatefulWidget을 사용. class MyApp extends StatelessWidget ..

Flutter를 처음 시작할 때 나오는 Stateless Widget과 Stateful Widget에 대해서 알아보자. Stateless Widget Stateless Widget이란 말 그대로 상태가 없는 위젯이다. Stateless Widget은 한 번만 bulid() 메서드가 실행되며 화면에 표시된 후에 화면을 변경할 수 없다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); // 프로그램을 실행할 때 MyApp 부터 실행하겠어! // StatelessWidget은 변화지 않는 화면을 작업할 때 사용. // 변화는 화면을 작업 하고싶을 경우에는 StatefulWidget을 사용. class MyApp extends St..

플러터 기본 틀과 메커니즘에 대해서 코드 분석을 통해 알아보자. 우리가 이번에 만든 기본 틀은 다음 사진과 같다. 코드 import 'package:flutter/material.dart'; void main() => runApp(MyApp()); // 프로그램을 실행할 때 MyApp 부터 실행하겠어! // StatelessWidget은 변화지 않는 화면을 작업할 때 사용. // 변화는 화면을 작업 하고싶을 경우에는 StatefulWidget을 사용. class MyApp extends StatelessWidget { // MaterialApp = 앱으로서 기능을 할 수 있도록 도와주는 뼈대 @override Widget build(BuildContext context) { // return Materi..

VS Code에서 플러터 개발환경을 구축해보자. Flutter SDK 설치 Install Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems. flutter.dev Flutter 공식 사이트의 접속한다. 자신의 환경에 맞춰 Flutter를 설치할 운영 체제를 선택한다. Windows를 예시로 설치하겠다. 운영체제를 선택 후 Flutter SDK를 다운로드한다. 다운로드한 후에는 적당한 위치에 압축을 풀어준다. 압축을 푼 후에 bin 폴더에 들어가 주소를 복사해준다. (환경 변수 편집을 위해서 복사해주는 것이다.) 이후 PC 검색 창에 "시스템 환경 변수 편집..