개발하는 두더지

@required 에 대해 알아보기 @required 속성은 생성자가 기본값이 없고 null 이 아닐 경우에 사용합니다. 그리고 assert 메서드를 이용해 null일 경우를 체크하는 기능도 있습니다. 이 annotation을 사용하기 위해서 meta 패키지를 추가해야 합니다. import 'package:meta/meta.dart'; 사용 예시는 아래와 같습니다. class Backdrop extends StatefulWidget { final Category currentCategory; final Widget frontLayer; final Widget backLayer; final Widget frontTitle; final Widget backTitle; const Backdrop({ @requ..

결과를 먼저 보여주면 가로로 스크롤을하면서 아이템이 (2개, 1개), (2개, 1개) 이런식을 보여주는 스크롤 뷰 형태를 띕니다. AsymmetricView 위젯의 내부를 살펴보면 인덱스가 홀수, 짝수이냐에 따라서 TwoProductCardColumn 또는 OneProductCardColumn 을 반환합니다. return List.generate(_listItemCount(products.length), (int index) { double width = .59 * MediaQuery.of(context).size.width; Widget column; if (index % 2 == 0) { /// Even cases int bottom = _evenCasesIndex(index); column = Tw..

색상을 변경하기 위해서 디자이너에게 글자와 관련된 디자인을 받아야 합니다. Flutter의 ThemeData 는 3개의 텍스트 테마를 제공합니다. 각각의 텍스트 테마는 headline 과 title 같이 텍스트 스타일의 컬렉션입니다. Customize the text theme 프로젝트 안에 폰트를 넣기 위해서, pubspec.yaml 파일에 아래와 같이 코드를 추가해 줍니다. flutter: fonts: - family: Rubik fonts: - asset: fonts/Rubik-Regular.ttf - asset: fonts/Rubik-Medium.ttf weight: 500 이제 Rubik 폰트를 사용할 수 있습니다. Flutter 프로젝트에 적용해봅시다. TextTheme _buildShrine..

카드는 하나의 주제에 대해서 정보를 표시하는데 유용하게 사용됩니다. Flutter에서 독립적으로 사용하기엔 정보가 충분하지 않아서 GridView 와 같은 위젯에 감싸서 사용해야 합니다. body: GridView.count( crossAxisCount: 2, padding: EdgeInsets.all(16.0), childAspectRatio: 8.0 / 9.0, children: [Card()], ), 위의 코드를 실행시켜보면 비어있는 카드 한장을 구현할 수 있습니다. GridView는 아이템 항목 개수만큼 count 메서드를 invoke (호출) 합니다. crossAxisCount 는 행에 몇개의 아이템을 보여줄지를 결정합니다. 예제에서는 2개를 보여주도록 설정합니다. cross axis 는 스크롤..

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를 추가해줍니다..