개발하는 두더지

ButtonBar를 이용하면 버튼의 배치를 쉽게 할 수 있습니다. ButtonBar 위젯을 만들고 내부에 Button 위젯들을 넣어주면 수평으로 배치해줍니다. 버튼에는 FlatButton 과 RaisedButton 이 있습니다. 각각 Material 가이드라인에서 TextButton 과 Contained Button 으로 설명하고 있습니다. 하나는 버튼의 배경색이 없이 텍스트만있고, 다른 하나는 버튼의 배경색과 텍스트로 이루어져 있습니다. 왜 이렇게 나눠놨을까요? Material 가이드라인에 따르면 하나의 레이아웃에는 눈에 띄는 버튼이 있어야 한다고 합니다. 눈에 잘 띄는 버튼은 사용자가 앱을 통해 진행하기를 바라는 행동을 나타낸다고 하는데 그런 의미에서 버튼 위젯을 나눈 것이라 생각합니다. TextEd..

로그인을 할 때 보통 사용자 Id, 비밀번호를 입력합니다. 2개의 입력 폼 UI를 구현하기 위해 TextField 를 이용해보도록 하겠습니다. TextField 위젯을 사용하면 리플효과(터치하면 물결처럼 퍼지는 터치 효과)가 적용됩니다. decoration 값에는 InputDecoration 위젯이 들어갑니다. filled: 에는 TextField 의 어느 영역을 터치해야되는지 알려주기 위해 배경에 적당한 색을 입혀줍니다. obscureText 는 비밀번호를 입력할 때 *** 로 표시되게 해줍니다. SizedBox 는 여백을 주기에 적절한 위젯입니다. height 값을 적절히 설정하여 너무 붙어있지 않게합니다. TextField( decoration: InputDecoration( filled: true..

지금까지 Flutter에서 Firestore dependency를 추가하고 android에서 사용할 수 있도록 환경을 구성했습니다. 이번에는 실제 flutter 코드에서 firestore를 어떻게 사용하는지 알아보겠습니다. 1편에서 본 코드와 크게 다르지 않습니다. dummySnapshot을 이용하지 않고 StreamBuilder 를 이용하여 Firebase 쿼리 결과값을 가져오게됩니다. StreamBuilder 위젯은 데이터베이스에 대한 업데이트를 수신하고 데이터가 변경될 때마다 목록을 새로 고칩니다. Firebase Console 에서 document의 값 한개를 변경하면 컬렉션에 포함된 모든 document의 값이 호출되어 실시간으로 변경된 값을 감지하고 UI변경 작업을 진행할 수 있습니다. Wid..

Firebase 에서 프로젝트를 만들고 Android, iOS 앱의 패키지 이름과 사이닝 키를 등록하는 방법은 설명하지 않겠습니다. Firebase 프로젝트 생성 후 Android App을 등록하고나면 google-services.json 파일이 생깁니다. 이 파일을 flutter 프로젝트에 포함시켜야 합니다. android/app 에 google-services.json 파일을 넣어줍니다. 그리고 android/app/build.gradle 파일을 열어서 제일 하단에 아래의 코드를 작성해줍니다. apply plugin: 'com.google.gms.google-services'android/build.gradle 파일을 열어서 google-services dependency를 추가해줍니다..

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..