nomad-programmer

flutter doctor --android-licenses 명령을 실행하면 NoClassDefFoundError가 나와서 실행이 되질 않았다. 그 이유는 Java9 이상의 버전을 사용해서 그런것이다. 이러한 에러를 보지 않으려면 Java8 버전을 사용해야 한다. 아래 링크는 이런 에러가 왜 나오는지에 대한 다른 블로거의 설명이다. www.slipp.net/wiki/pages/viewpage.action?pageId=41583579 1.a. Flutter 설치 중 안드로이드 라이센스 관련 오류 해결방법 - SLiPP 스터디 - SLiPP::위키 flutter를 설치하면서 에러가 여러 번 일어났는데 구글링을 해도 잘 나오지 않는 버그가 있어서 여기에 공유합니다. 이 버그는 안드로이드 라이센스를 허용해주면서..

Provider 라이브러리 4.1.0 이상의 버전에서는 더욱 간편하고 적은 비용으로 Provider를 사용할 수 있다. 이것은 최근 Dart 언어의 업데이트로 인하여 Provider 라이브러리도 업데이트가 된 사항이다. Provider 코드가 상당히 많이 줄어들어 인상적인 업데이트다. 먼저 Dart 언어의 업데이트 내역을 살펴본 후 Provider를 살펴보도록 하자. Dart dart extension은 다른 패키지 클래스에 속성과 메서드를 추가할 수 있다. 다음의 예를 보자. // 열거형을 비롯해 다른 모든 클래스를 확장할 수 있다. enum Connectivity { connected, disconnected, searching } // 열거형에 메서드를 확장하였다. extension on Conne..

로컬 디바이스에 많은 데이터를 저장하고 쿼리를 요청해야 한다면, 로컬 파일이나 키-값 저장소 대신 데이터베이스를 사용하는 것이 좋다. 일반적으로 데이터베이스는 다른 로컬 솔루션보다 더 빠른 쓰기, 수정, 읽기 성능을 제공한다. Flutter 앱은 sqflite 플러그인을 통해 SQLite 데이터베이스를 사용할 수 있다. sqflite dart INTEGER int REAL num TEXT String BLOB Uint8List import 'package:flutter/material.dart'; import 'package:path/path.dart'; import 'package:sqflite/sqflite.dart'; void main() async { // runApp()이 없기때문에 에러 발생한..

isolate는 다른 언어에서의 thread 개념이라도 생각면된다. Flutter는 main isolate에서 앱이 실행된다. 그런데 비싼 비용의 데이터를 불러올때면 툭툭 끊기는 애니메이션을 야기할 수 있다. 이렇게 툭툭 끊기는 애니메이션을 "jank"라고 부른다. 허나 isolate를 사용하면 jank가 없는 애니메이션을 볼 수 있을뿐더러 성능도 올라간다. flutter-ko.dev/docs/cookbook/networking/background-parsing 백그라운드에서 JSON 파싱하기 기본적으로, Dart 앱은 모든 작업을 단일 스레드에서 수행합니다. 대부분의 경우 이러한 모델은코딩을 단순화시키며, 앱 성능이 떨어지거나 jank라고 불리는 뚝뚝 끊기는 애니메이션을 야기하지 flutter-ko.d..

pub.dev에 그래프 라이브러리가 많다. 하지만 입맛에 맞는 그래프 라이브러리가 없는 경우에는 직접 그래프를 만들어줘야 한다. 이럴때 사용하는 것이 CustomPaint & CustomPainter 이다. 커스텀 페인터는 직접 UI를 그릴때 사용한다. 기존의 UI로 만들기 어려운 화면을 만들고 싶을 때 유용하다. 직접 UI를 그리기위해서는 CustomPaint와 CustomPainter 클래스가 있어야 한다. CustomPaint : Center 위젯이나 Container 위젯같은 것이다. 즉, CustomPainter클래스를 담는 그릇이다. 이 클래스는 painter 속성을 가지고 있으므로 이것을 활용해 화면을 그릴 수 있다. CustomPainter : canvas, paint, size 등을 통해..

플러터에서 쓰이는 테스트 방식은 크게 3가지이다. 유닛 테스트 위젯 테스트 통합 테스트 유닛 테스트는 메소드나 클래스처럼 작은 단위를 테스트할 때 쓰인다. 그리고 외부에 의존하지 않는 테스트를 말한다. 보통 IO처리, 데이터베이스 접근하는 것을 외부에 의존한다고 하는데, 외부에 의존하는 경우는 Mockito 같은 테스트 프레임워크를 사용해 테스트한다. 다트 기본 테스트 프레임워크 test 라이브러리를 추가한다. pub.dev/packages/test test | Dart Package A full featured library for writing and running Dart tests. pub.dev // pubspec.yaml dev_dependencies: test: any test 디렉토리에다 ..

StatelessWidget 클래스에 TextFormField를 사용해도될까? TextEditingController는 렌더링간에 유지되어야하는 클래스 인스턴스이다. 그러나 StatelessWidget 클래스에 정의하면 기본적으로 모든 업데이트 후 다시 만든다. 그러므로 TextFormField 클래스를 사용할 예정이면 StatefulWidget 클래스로 만들어야 한다. Flutter 공식문서에서도 TextFormField 클래스를 생성할 때면 StatefulWidget으로 생성하라고 나와있다. flutter.dev/docs/cookbook/forms/text-field-changes Handle changes to a text field How to detect changes to a text fiel..

Flutter에서의 Reactive Programming - Stream, Provider 패턴, BloC 패턴 요즘의 프로그래밍 패러다임은 반응형 프로그래밍(Reactive Programming) 이다. 반응형 프로그래밍은 비동기 데이터를 효율적으로 처리하기 위해 만들어졌다. 비동기 처리 : 언제 도착할 지 모르는 데이터인 http 호출, UI 클릭, 데이터 저장, 에러 처리 등을 말한다. StreamBuilder 플러터에서도 리액티브 프로그래밍을 할 수 있다. 보통은 Stream이나 RxDart를 사용한다. 그렇다면 Flutter에서 Stream은 어떠한 방식으로 사용할까? Flutter에서 Stream은 "StreamBuilder" 를 사용하여 스트림 데이터 처리를 한다. StreamBuilder를..

Flutter 프레임워크를 사용해 앱을 만들 때, Widget 생성시 보통은 new 키워드를 생략하고 사용한다. ex) Text('foo'); ex) new Text('foo'); 생략해서 사용할 수 있을뿐이지 컴파일 시 컴파일러가 자동으로 new 키워드를 붙여준다. 이것은 컴파일 시간에 진행되는 것이라 문제될 것은 없다. 컴파일 시간에 되는 것이라면 문제 없겠지만 런타임에 그런것이라면 조금 신경을 써야하는 것이 좋다. statefulWidget의 setState() 메소드가 바로 그것이다. 이 메소드는 실행 시간에 UI 전체를 다시 그리는(build) 메소드다. 그래서 소소하게라도 관심을 갖고 코딩을해야 한다. setState() 메소드를 통해 업데이트가 되어야하는 위젯은 업데이트가 되야겠지만... s..

AppBar에 Gradient 색상을 적용시켜보았다. import 'package:flutter/material.dart'; class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold( appBar: AppBar( toolbarHeight: 70, title: new Text( 'Gradient', style: new TextStyle( fontWeight: FontWeight.w600, fontFamily: 'Poppins', fontSize: 36.0, ), ), centerTitle: true, flexibleSpace: new Container( decoration..

Flutter Provider란? Provider는 2019년 구글 IO에서 추천되며 큰 주목을 받았다. 원래는 플러터 커뮤니티에서 만든 플러그인이었으나, 구글에서 공식적으로 추천할 정도로 편리함을 가져다준다. 2018년 구글 IO까지만 해도 구글은 Provider가 아닌 BloC 패턴 사용을 권장했었다. 플러터는 UI와 Design 모두 소스코드로 관리되지 않으면 한 클래스에 여러 코드가 몰리게 되는 문제가 있었다. 이를 해결하기 위해 UI와 데이터 처리 로직 분리가 되는 BloC 패턴을 제공했다. 하지만 BloC 패턴은 사용하기 너무 어렵다는 말이 있었고, 단순한 로직을 구성하려해도 최소 4개의 클래스를 만들어야만 했다. 반면, Provider 패턴을 사용하면 데이터 공유나 로직의 분리를 좀 더 간단..

해당 스탑워치는 0.01초까지 측정 가능하며 Timer 클래스를 활용하여 0.01초마다 화면을 갱신한다. main.dart 파일 코드 // main.dart import 'package:flutter/material.dart'; import 'package:provider/provider.dart'; import 'aboutTime.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return ChangeNotifierProvider( create: (BuildContext context) => AboutTime(), child: Ma..

Form과 TextFormField를 사용하면 회원 가입처럼 사용자 입력값을 검증해야 할 때 유용하다. TextFormField 위젯은 TextField 위젯이 제공하는 기능에 추가로 validator 프로퍼티를 활용한 검증 기능을 제공한다. 검증에는 TextFormField 위젯을 사용하며, 검증할 내용 전체를 Form위젯으로 감싼다. Form 위젯에는 유니크한 (유일무이한) 키를 지정해야 하며 GlobalKey 인스턴스를 키로 사용한다. TextFormField 위젯에는 validator 프로퍼티가 있으며 여기에는 입력된 값을 인수(value)로 받는 함수를 작성한다. 또한 검증 로직을 작성하는데, 에러 메시지를 문자열로 반환하거나 null을 반환하여 검증이 통과되었음을 정의할 수 있다. 폼의 검증은..

사용자에게 값을 입력받을 때 사용하는 위젯이 TextField 위젯(또는 TextFormField 위젯) 이다. TextEditingController 클래스의 인스턴스를 통해서 TextField 위젯에 작성된 값을 얻을 수 있다. 다음은 TextEditingController 클래스를 사용하는 예제이다. TextField 위젯이 2개 있고 입력값이 변하면 각각 로그를 출력한다. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: ..

플러터 코드롤 UI를 작성할 때 한 번에 완벽한 코드를 만들 수 있는 사람은 거의 없다. 작업 하다 보면 Column이나 Row로 감싸거나 Padding으로 감싸는 경우가 빈번하다. 그렇게 되면 나중에 수동으로 Padding을 제거하거나 Column을 제거하는 일이 발생해 굉장히 불편하다. 여러 위젯이 중첩된 코드 중간에 위젯을 추가하거나 삭제할 때 정확한 위치에 괄호를 넣거나 제거하는 것이 얼마나 어려운 일인지 겪어보면 알게 된다. 현재 위젯을 벗겨내거나 다른 위젯으로 감싸는 방법 Visual Studio Code 단축키 : Android Studio 단축키 : 다른 위젯으로 감싸고 싶은 위젯 코드 앞에 커서를 두고 "단축키"를 누른다. Wrap with XXX 형태로 메뉴가 표시되는데 XXX 위젯으로..

# Slidable (리스트 아이템 슬라이드 기능) https://pub.dev/packages/flutter_slidable flutter_slidable | Flutter Package A Flutter implementation of slidable list item with directional slide actions that can be dismissed. pub.dev # sqflite (SQLite Flutter 버전) pub.dev/packages/sqflite sqflite | Flutter Package Flutter plugin for SQLite, a self-contained, high-reliability, embedded, SQL database engine. pub.dev ..

push() 메소드로 새로운 화면이 실행되고 pop() 메소드로 이전 화면으로 돌아간다는 것을 확인했다. 실행되는 화면은 스택(Stack) 구조로 메모리에 쌓이게 된다. 스택은 나중에 들어간 것이 먼저 나오는 구조이다. 스택에서 모든 화면이 제거되면 앱이 종료된다. StatelessWidget & StatefulWidget 클래스의 동작 방법 차이점 StatelessWidget 클래스 동작 build() 메소드가 언제 호출되는지 확인해보자. 각 화면의 build 메소드의 return 앞에 어떤 화면인지 확인할 수 있도록 print() 로그를 작성하자. 화면이 표시되면서 build() 메소드가 호출된다. pop() 메소드로 뒤로 돌아갈 때는 두 번째 화면에서 받은 Text 객체가 출력되었다. Statefu..

새로운 화면으로 전환하거나 이전 화면으로 돌아가는 것을 네비게이션이라고 한다. 새로운 화면으로 이동 새로운 화면을 띄우거나 이전 화면으로 돌아가는 방법을 이용해 두 화면을 내비게이션 하는 앱을 만들어보자. // main.dart import 'package:flutter/material.dart'; import 'package:test2/first_page.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatc..

머터리얼 디자인은 안드로이드에 적용하려고 구글이 만든 디자인 규칙이다. 그러므로 아이폰에는 어울리지 않는다. 좀 더 아이폰스러운 디자인을 적용하려면 쿠퍼니노 디자인을 사용해야 한다. flutter/cupertino.dart 패키지에는 다양한 쿠퍼티노 디자인용 UI 위젯이 준비되어 있다. Cupertino로 시작하는 이름의 클래스들이 이에 해당되며 사용 방법이 머터리얼 위젯과 비슷하므로 쉽게 적용할 수 있다. 여담이지만 두 디자인 컨셉을 섞어서 사용할 수도 있고 안드로이드 앱을 아이폰스럽게 만드는 것도 가능하다. 쿠퍼티노 기본 UI 쿠퍼티노 디자인에서는 AppBar 대신 CupertinoNavigationBar를 사용하며 CupertinoSwitch, CupertinoButton 등을 사용한다. 쿠퍼티노 ..

SliverAppBar & SliverFillRemaining SliverAppBar와 SliverFillRemaining은 화면 헤더를 동적으로 표현하는 위젯이다. 헤더를 위로 스크롤하면 헤더 부분이 작아지면서 헤더 하단에 있던 정적인 내용만 보이는 AppBar 형태로 애니메이션된다. 이런 효과를 Sliver 효과라고 부른다. SliverAppBar와 SliverFillRemaining을 사용한 예이다. import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Mate..