개발하는 두더지

flutter에서 Firebase, FireStore를 사용하기 위해서는 Android 에서 Gradle에 dependency를 추가하듯이 flutter에서도 추가해줘야 합니다. pubspec.yaml 파일에서 cloud_firestore 를 추가해줍니다. 최신 버전은 Flutter Pacakages를 검색할 수 있는 pub 에서 확인할 수 있습니다. IDE 에서 flutter packages get 을 실행시켜 dependency를 추가시켜줍니다. Visual Studio Code에서는 View -> Command Palette.. 에서 flutter packages get을 검색하여 run 해줍니다. dependencies: flutter: sdk: flutter cloud_firestore: ^0...

코드를 먼저 살펴보면 아래와 같습니다. 하단에 대화를 입력할 수 있는 TextField와 send 버튼이 있고, send 버튼을 누르면 리스트에 텍스트 내용이 하나씩 저장되는 구조입니다. 하나의 채팅 메시지를 나타내는 위젯이 필요합니다. 아래와 같이 ChatMessage라는 StatelessWidget을 만들어줍니다. 메시지를 보낸 사용자를 나타내는 간단한 그래픽 아바타, 보낸 사람 이름이 들어있는 Column 위젯 및 메시지 텍스트를 표시하는 Row 위젯을 리턴합니다. CircleAvatar 위젯을 커스텀하기 위해서 _name 변수 값의 첫 번째 문자를 텍스트 위젯에 전달하여 사용자의 첫 번째 이니셜로 레이블을 지정합니다. CrossAxisAlignment.start를 row 생성자의 crossAxis..

Flutter framework에는 TextField라 불리는 상태 기반 위젯이 있습니다. 입력 필드의 동작을 커스텀하는 속성을 가진 상태 기반 위젯입니다. State 란 위젯이 빌드되고 위젯 생명주기 동안 변경될 때 동기적으로 읽을 수 있는 정보입니다. 위젯에 상태기반 데이터를 표시하기 위해서는 데이터를 State object에 캡슐화해야 합니다. 그런 다음 State 객체를 StatefulWidget 클래스를 확장한 위젯과 연결할 수 있습니다. import 'package:flutter/material.dart'; void main() => runApp(FriendlychatApp()); class FriendlychatApp extends StatelessWidget { @override Widge..

사용자가 스크롤을 해서 무한대로 리스트를 보여주려면 ListView의 Builder 팩토리 생성자를 이용하면 됩니다. 상황에 따라서 목록의 뷰를 느리게 빌드할 수 있습니다. _buildSuggestions 메서드가 리스트 뷰의 row를 그려주는 기능인데 itemBuilder는 리스트뷰에 row 하나가 추가될 때마다 호출되는 콜백을 포함하고 있습니다. 메서드가 실행되면 itemBuilder의 i 값이 0 일때 최초 호출되고 10개의 생성된 영어단어를 추가하게됩니다. 그리고 인덱스가 0인 row를 ListTile 위젯을 이용해 그리게 됩니다. row가 하나 추가되었으니 다시 itemBuilder 콜백이 호출되고 이후에는 인덱스가 홀수일때는 divider를 그리고 짝수일때는 2로 나눈 몫의 값을 이용해 ind..

stateless widget은 값이 변하지 않는 위젯입니다. 즉, final로 선언된 값입니다. stateful widget은 위젯의 생명주기동안 값이 변할 수 있는 위젯입니다. 구현하기 위해서는 반드시 State 인스턴스를 생성하는 StatefulWidget 클래스를 생성해야 합니다. StatefulWidget 자체는 값이 변하지 않지만 내부의 State 클래스가 생명주기동안 값이 변합니다. MaterialApp은 위젯은 Material design의 기본 골격을 쉽게 추가할 수 있는 위젯인데 child로 Scaffold 위젯을 추가할 수 있습니다. Flutter 앱내의 모든 것들은 위젯으로 구성됩니다. 간단한 텍스트부터 버튼 그리고 스크린 레이아웃까지 전부 위젯이고 _계층적인 순서_를 가지고 배열합..

dartpad - dart 코드를 실행시켜볼 수 있는 콘솔 Dart를 함수형 프로그래밍처럼 동작시키기 함수형 프로그래밍에서 할 수 있는 것들은 함수를 파라미터로 전달 변수에 함수를 저장 상수 값으로 사용할 수 있는 익명 함수 만들기 (lambda) dart는 이러한 함수형 프로그래밍의 기능을 제공합니다. 즉 함수를 변수의 값에 할당할 수 있고, 다른 함수에 파라미터로 전달할 수 있습니다. 또한 클래스의 인스턴스를 함수처럼 call할 수도 있습니다. String scream(int length) => "A${'a' * length}h!"; main() { final values = [1, 2, 3, 5, 10, 50]; for (var length in values) { print(screa..

dartpad - dart 코드를 작성하여 실행시켜볼 수 있는 콘솔 Dart로 추상클래스 만들기 dart는 추상클래스를 지원합니다. 그리고 한개의 dart 파일에서 여러개의 클래스를 선언할 수 있습니다. dart.math 는 dart의 core library 입니다. 다른 코어 라이브러리들도 import 시킬 수 있습니다. include dart:core, dart:async, dart:convert, dart:collection dart 1.x 버전에서는 PI 처럼 대문자로 표기했지만 dart 2에서는 pi 처럼 소문자로 표기합니다. 클래스 외부에 팩토리 메소드를 최상위 메소드로 구현하여 사용할 수 있습니다. import 'dart:math'; Shape shapeFactory(Strin..

dartpad dart 코드를 자유롭게 실행시켜볼 수 있는 콘솔 dart로 클래스 생성자 파라미터를 optional 하게 만들어보기 생성자를 만들때 {} 로 감싸고 각 멤버변수들을 초기화시켜주면 optional 하게 만들 수 있다. 아래 코드에서 볼 수 있듯이 생성자에서 : 를 이용하여 특정 멤버변수만 값을 지정할 수 있다. import 'dart:math'; class Rectangle { int width; int height; Point origin; Rectangle({this.origin = const Point(0,0), this.width = 0, this.height = 0}); @override String toString() => 'origin x: ${origin..